Mapilion Rastertile Beta

Currently just a BETA

by boldtrn

HTML

<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
    <title>Mapilion Hillshading V1</title>

    <link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/leaflet.css" />
    <script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
  </head>

  <body>
    <div id="map"></div>
  </body>

</html>

CSS

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

JavaScript

// Base layers
 //	OSM
 var osm = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
   attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 });

 //	CartoDB Positron
 var cartodb = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
   attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
 });

 //	OSM Toner
 var toner = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
   attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'
 });

 //	White background
 var white = L.tileLayer("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQMAAABmvDolAAAAA1BMVEX///+nxBvIAAAAH0lEQVQYGe3BAQ0AAADCIPunfg43YAAAAAAAAAAA5wIhAAAB9aK9BAAAAABJRU5ErkJggg==");

 // Overlay layers (XYZ)
 // Get your own key at Mapilion.com
 var mapilion = L.tileLayer('https://{s}-staging.mapilion.com/raster/styles/osm-bright/{z}/{x}/{y}{r}.png?key=3b3d8353-0fb8-4513-bfe0-d620b2d77c45', {
   tms: false,
   subdomains: ['a', 'b', 'c', 'd', 'e'],
   attribution: '&copy; <a href="https://mapilion.com/attribution">Mapilion</a> <a href="http://www.openmaptiles.org/" target="_blank">&copy; OpenMapTiles</a> <a href="http://www.openstreetmap.org/about/" target="_blank">&copy; OpenStreetMap contributors</a>',
   bounds: L.latLngBounds(L.latLng(72, -180), L.latLng(-60, 180))
 });

 // Map
 var map = L.map('map', {
   center: [40, -30],
   zoom: 3,
   minZoom: 0,
   maxZoom: 18,
   layers: [mapilion]
 });

 var basemaps = {
 	 "Mapilion OSM Bright": mapilion,
   "OpenStreetMap": osm,
   "CartoDB Positron": cartodb,
   "Stamen Toner": toner,
   "Without background": white
 }
 

 // Add base layers
...