block by renecnielsen cfc042c7569c1b8a52b6

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

Full Screen

hello world

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

index.html

<!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="//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('//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='//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>