mapbox.js - importing and clustering GeoJSON with a chart popup

hello world

forked from wboykinm's block: mapbox.js - importing and clustering GeoJSON with a chart popup

<!doctype html>
<html>
<head>
  <script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.3/mapbox.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.3/mapbox.css' rel='stylesheet' />
  <style>
    body {
      padding: 0;
      margin: 0;
    }

html, body, #map {
      height: 100%;
    }

</style>
  <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
  <link href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
  <link href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />
<body>
  <div id="map"></div>
  <script>
  // ADD YOUR BASE TILES
  var baseLayer = L.tileLayer('https://a.tiles.mapbox.com/v3/landplanner.map-4y9ngu48/{z}/{x}/{y}.png', {
    maxZoom: 18
  });
  // DEFINE THE CLUSTER LAYER
  var markers = L.markerClusterGroup();

// CALL THE GEOJSON HERE
  $.getJSON("saplaces.geojson", function(data) {
    var geojson = L.geoJson(data, {
      onEachFeature: function (feature, layer) {
        // USE A CUSTOM MARKER
        layer.setIcon(L.mapbox.marker.icon({'marker-symbol': 'circle-stroked', 'marker-color': '59245f'}));

// ADD A POPUP WITH A CHART
        layer.bindPopup("<h1>" + feature.properties.NAME + "</h1><h2><small>Population Change & Projection (in thousands)</small></h2><img width='265px' src='https://chart.googleapis.com/chart?chf=bg,s,67676700&chxl=0:|1950|1985|2020&chxp=0,10,50,90&chxr=0,0,105&chxs=0,676767,10.5,0,l,676767&chxt=x,y&chs=260x100&cht=ls&chco=0000FF&chds=a&chd=t:" + feature.properties.POP1950 + "," + feature.properties.POP1955 + "," + feature.properties.POP1960 + "," + feature.properties.POP1965 + "," + feature.properties.POP1970 + "," + feature.properties.POP1975 + "," + feature.properties.POP1980 + "," + feature.properties.POP1985 + "," + feature.properties.POP1990 + "," + feature.properties.POP1995 + "," + feature.properties.POP2000 + "," + feature.properties.POP2005 + "," + feature.properties.POP2010 + "," + feature.properties.POP2015 + "," + feature.properties.POP2020 +  "&chdlp=b&chg=-1,0&chls=3&chma=5,5,5,5|5'/>");

}
    });
    markers.addLayer(geojson);

// CONSTRUCT THE MAP
    var map = L.map('map', {maxZoom: 9}).fitBounds(markers.getBounds());
    baseLayer.addTo(map);
    markers.addTo(map);
  });
  </script>
</body>
</html>

Modified http://code.jquery.com/jquery-1.10.2.min.js to a secure url

https://api.tiles.mapbox.com/mapbox.js/v1.6.3/mapbox.js

https://code.jquery.com/jquery-1.10.2.min.js

https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js