tile-data/leaflet.html at master · stagecast/tile-data · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
  <head>
    <title>Smukfest Maptiler</title>
    <meta http-equiv="imagetoolbar" content="no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/ardhi/Leaflet.MousePosition/master/src/L.Control.MousePosition.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js" type="text/javascript"></script>
    <script src="https://cdn.rawgit.com/ardhi/Leaflet.MousePosition/master/src/L.Control.MousePosition.js" type="text/javascript"></script>
    <style>
      body { margin:0; padding:0; width:100%; height:100%; background: #ffffff; }
      #map { position:absolute; top:0; bottom:0; width:100%; z-index: 1; }
      #slider{ position: absolute; top: 10px; right: 10px; z-index: 5; }
    </style>
  </head>
<body>
  <div id="map"></div>
  <input id="slider" type="range" min="0" max="1" step="0.1" value="1" oninput="layer.setOpacity(this.value)">
  <script type="text/javascript">
    var mapExtent = [9.85354510, 56.00002617, 9.96216247, 56.03989772];
    var mapMinZoom = 12;
    var mapMaxZoom = 19;
    var bounds = new L.LatLngBounds(
      new L.LatLng(mapExtent[1], mapExtent[0]),
      new L.LatLng(mapExtent[3], mapExtent[2]));
    var map = L.map('map').fitBounds(bounds);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
    var layer;
    var options = {
      minZoom: mapMinZoom,
      maxZoom: mapMaxZoom,
      opacity: 1.0,
      attribution: 'Rendered with <a href="http://www.maptiler.com/">MapTiler</a>',
      tms: false
    };
    layer = L.tileLayer('{z}/{x}/{y}.png', options).addTo(map);
  </script>
</body>
</html>