Royal Enfield Map

Innovation Academy Member Map

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Innovation Academy Member Map</title>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js" charset="utf-8"></script>
  
  <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>
  
  <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">

<style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>
  
  <div id="map"></div>

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

https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js

https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js

https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js