wmata-elevators/index.html at master · cookie-munster/wmata-elevators · 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
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
  <link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />

  <style>
    body { padding: 0; margin: 0; } html, body, #map { height: 100vh; width: 100vw; }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    L.mapbox.accessToken = 'pk.eyJ1IjoiYmxvb2ZlciIsImEiOiJjaW9hc2JzcjIwM25sdmlranY4dmV4ZTJiIn0.jC_kirEMwELyv0EoFmJv4Q';
    var map = L.mapbox.map('map','mapbox.streets')
      .setView([38.8947, -77.0363], 13)
      .addControl(L.mapbox.shareControl());

    function popUp(feature, layer) {
      layer.bindPopup(feaure.properties.Name);
    }

    var elevators = L.mapbox.featureLayer().addTo(map);
    elevators.loadURL('./elevators2.geojson');

    function onLocationFound(e) {
        var radius = e.accuracy / 2;

        L.marker(e.latlng).addTo(map)
            .bindPopup("You are within " + radius + " meters from this point").openPopup();

        L.circle(e.latlng, radius).addTo(map);
    }

    function onLocationError(e) {
        alert(e.message);
    }

    map.on('locationfound', onLocationFound)
    map.on('locationerror',onLocationError)

    map.locate({setView: true, maxZoom: 21});


  </script>
</body>