mapnes/static/index.html at master · ciciplusplus/mapnes · 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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
    /* styles */

    html, body {
      margin: 0;
      padding: 0;
    }

    #map {
      width: 100vw;
      height: 100vh;
    }

    /*======= Map Styling ============*/
    /*a[href^="https://maps.google.com/maps"]{display:none !important}

    .gmnoprint a, .gmnoprint span, .gmnoprint div {
        display:none;
    }*/
    </style>
  </head>
  <body>

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

    <script>
    var TILE_URL = 'http://localhost:5000/tiles/{x}/{y}/{z}';

    var map;
    var mapEl;
    var layer;
    var layerID = 'my-custom-layer';

    window.initMap = function() {
      // Select the element with id="map".
      mapEl = document.querySelector('#map');

      // Create a new map.
      map = new google.maps.Map(mapEl, {
        center: new google.maps.LatLng(48.866667, 2.333333),
        zoom: 2,
        disableDefaultUI: true
      });

      // Create a tile layer, configured to fetch tiles from TILE_URL.
      layer = new google.maps.ImageMapType({
        name: layerID,
        getTileUrl: function(coord, zoom) {
          console.log(coord);
          var url = TILE_URL
            .replace('{x}', coord.x)
            .replace('{y}', coord.y)
            .replace('{z}', zoom);
          return url;
        },
        tileSize: new google.maps.Size(256, 256),
        minZoom: 1,
        maxZoom: 20
      });

      // Apply the new tile layer to the map.
      map.mapTypes.set(layerID, layer);
      map.setMapTypeId(layerID);

      // autofocus
      google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
        document.querySelectorAll('[tabindex="0"]')[0].focus();
      });
    };
    </script>

    <!-- NOTE: The 'key' parameter should be replaced with your Google Maps API Key. -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=YOUR_API_KEY"></script>

  </body>
</html>