Leaflet/Mapbox.js GeoJSON with Google Static Chart API in the popup by wboykinm

index.html

<!doctype html>
<html>
<head>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
  <link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />
  <link href="//netdna.bootstrapcdn.com/bootswatch/3.0.2/simplex/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css" />
  <link rel='stylesheet' href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' />
  
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
    #footer {
      position:absolute;
      bottom:0px;
      left:0px;
      right:0px;
      background:#fff;
      z-index:999;
      overflow:auto;
      padding:5px;
      opacity:0.9;
      }
  </style>
  <script src='//api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
  <script src="//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js"></script>

<body>
  <div id="map" class="dark"></div>
  
  <div id="footer">
	<div class="container">
		<ul class="list-inline">
			<li><h1>Mapbox.js GeoJSON with Google Static Chart API Popup</h1></li>
		</ul>  
         </div>
  </div>
  <script>
  var baseTiles = L.tileLayer('//a.tiles.mapbox.com/v3/landplanner.map-4y9ngu48/{z}/{x}/{y}.png', {
    maxZoom: 18
  });
  // Grab the local geojson file
  $.getJSON("popplaces.geojson", function(data) {
   // Define the markercluster
    var markers = new L.MarkerClusterGroup();
    var geojson = L.geoJson(data, {
        onEachFeature: function (feature, layer) {
            // Use a mapbox maki marker
	    layer.setIcon(L.mapbox.marker.icon({'marker-symbol': 'circle-stroked', 'marker-color': '59245f'}));
            // Bind a popup with a chart populated with feature properties 
            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'/>");
	}
    });
    // Put it all together
    markers.addLayer(geojson);
    // Zoom to the marker layer
    var map = L.map('map').fitBounds(geojson.getBounds());
    baseTiles.addTo(map);
    map.addLayer(markers);    
  });
  </script>
</body>
</html>