Last active
May 16, 2016 18:33
-
-
Save wboykinm/8717248 to your computer and use it in GitHub Desktop.
Mapbox.js GeoJSON markers with Google Static Chart API Popups
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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("saplaces.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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment