Mapilion Hillshading V1 Demo

Demo for Mapilion V1 Hillshading

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 Bright
 var osmBright = L.tileLayer('https://{s}-tiles.mapilion.com/raster/styles/osm-bright/{z}/{x}/{y}{r}.png?key=3b3d8353-0fb8-4513-bfe0-d620b2d77c45', {
   subdomains: ['a', 'b', 'c', 'd', 'e'],
   attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://mapilion.com/attribution" target="_blank">Mapilion</a> <a href="http://www.openmaptiles.org/" target="_blank">&copy; OpenMapTiles</a>'
 });

 // Kurviger Liberty
 var kurvigerLiberty = L.tileLayer('https://{s}-tiles.mapilion.com/raster/styles/kurviger-liberty/{z}/{x}/{y}{r}.png?key=3b3d8353-0fb8-4513-bfe0-d620b2d77c45', {
   subdomains: ['a', 'b', 'c', 'd', 'e'],
   attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://kurviger.de/" target="_blank">Kurviger</a> &copy; <a href="https://mapilion.com/attribution" target="_blank">Mapilion</a> <a href="http://www.openmaptiles.org/" target="_blank">&copy; OpenMapTiles</a>'
 });

 // Kurviger Liberty
 var kurvigerLibertyExperimental = L.tileLayer('https://{s}-tiles.mapilion.com/raster/styles/kurviger-liberty-aws8/{z}/{x}/{y}{r}.png?key=3b3d8353-0fb8-4513-bfe0-d620b2d77c45', {
   subdomains: ['a', 'b', 'c', 'd', 'e'],
   attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://kurviger.de/" target="_blank">Kurviger</a> &copy; <a href="https://mapilion.com/attribution" target="_blank">Mapilion</a> <a href="http://www.openmaptiles.org/" target="_blank">&copy; OpenMapTiles</a>'
 });


 //	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...