D3 Examples - Royal Enfield Map

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Innovation Academy Member Map</title>
  <!-- Zepto -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js" charset="utf-8"></script>
  <!-- Leaflet -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js" charset="utf-8"></script>
  <!-- Leaflet.MarkerCluster -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js" charset="utf-8"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css" charset="utf-8">
​
  <!-- Fancy styling for a full-screen map -->
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>
  <!-- This is where the map is going to go -->
  <div id="map"></div>
​
  <script type="text/javascript">
    $(document).ready(function() {
      console.log("zepto loaded successfully")
​
      $.getJSON("royal_enfield.json", function(data) {
        // this next code chunk centres the map on your data
        var latsum = 0, lonsum = 0;
​
        for (var i = 0; i < data.length; i++) {
          var d = data[i]
          latsum += d["latitude"]
          lonsum += d["longitude"]
        }
​
        var latavg = latsum / data.length;
        var lonavg = lonsum / data.length;
​
        console.log(latavg);
        console.log(lonavg);
​
        // note how the centre is set to [latavg, longavg]
        var map = L.map('map', {
          maxZoom: 6
        }).setView([latavg, lonavg], 5)
​
        // basemaps taken from cartodb (cartodb.com/basemaps/)
        // choose the style that best fits your needs, but remember the attribution!
        // also, note the addTo at the end -- important to add map to div
        var layer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',{
          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://cartodb.com/attributions">CartoDB</a>'
        }).addTo(map)
​
        var markers = new L.MarkerClusterGroup({
          spiderfyDistanceMultiplier: 2,
          maxClusterRadius: 40
        })
        var markers_list = []
​
        for (var i = 0; i < data.length; i++) {
          var d = data[i]
          var popup_text = "<b>" + d["city"] + ", " + d["state"] + "</b>"
​
          var marker = L.marker()
                        .setLatLng([d["latitude"], d["longitude"]])
                        .bindPopup(popup_text)
​
          // this might seem like a redundant step but you will thank me later
          // when you need to access a marker on the map but have no way of getting
          // to it
          markers_list.push(marker)
          markers.addLayer(marker)
        }
        map.addLayer(markers)
      })
    })
  </script>
</body>
</html>
​
    