Static map from GeoJSON with geo-viewport and geojson-extent

<!DOCTYPE html><html><head><metacharset=utf-8/><title>Static map from GeoJSON with geo-viewport and geojson-extent</title><metaname='viewport'content='initial-scale=1,maximum-scale=1,user-scalable=no'/><script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script><linkhref='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css'rel='stylesheet'/><style>body{margin:0;padding:0;}#map{position:absolute;top:0;bottom:0;width:100%;}</style></head><body>

<imgid='static-map'></div><script src='https://api.mapbox.com/mapbox.js/plugins/geo-viewport/v0.1.1/geo-viewport.js'></script><script src='https://api.mapbox.com/mapbox.js/plugins/geojson-extent/v0.0.1/geojson-extent.js'></script><script>L.mapbox.accessToken='<your access token here>';// This is an example using geojson-extent. See the full docs for full details// https://github.com/mapbox/geojson-extent// Declare a GeoJSON file with the two places we're interested in.varsfAndDc={"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-122.41722106933594,37.78672476186115]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-77.03201293945312,38.91133881927709]}}]};// Calculate a bounding box in west, south, east, north order.varbounds=geojsonExtent(sfAndDc);// The size of the desired map.varsize=[600,300];// Calculate a zoom level and centerpoint for this map.varvp=geoViewport.viewport(bounds,size);// Create pins at places in the geojson file.varpins=[];for(vari=0;i<sfAndDc.features.length;i++){pins.push('pin-s('+sfAndDc.features[i].geometry.coordinates.join(',')+')');}// Construct a static map url// https://www.mapbox.com/developers/api/static/document.getElementById('static-map').src='https://api.mapbox.com/v4/mapbox.outdoors/'+pins.join(',')+'/'+vp.center.join(',')+','+vp.zoom+'/'+size.join('x')+'.png'+'?access_token='+L.mapbox.accessToken;</script>