Skip to content

Instantly share code, notes, and snippets.

@wboykinm

wboykinm/index.html

Last active August 29, 2015 13:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wboykinm/8716561 to your computer and use it in GitHub Desktop.
Save wboykinm/8716561 to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet/Mapbox.js GeoJSON with Google Static Chart API in the popup
Raw
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="http://netdna.bootstrapcdn.com/bootswatch/3.0.2/simplex/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css" />
<link rel='stylesheet' href='http://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='http://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="http://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('http://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='http://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>
Display the source blob
Display the rendered blob
Raw
popplaces.geojson
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment