Skip to content

Instantly share code, notes, and snippets.

@Sanaldev

Sanaldev/map_box_static_map_geoJson.js

Last active March 5, 2019 08:13
Show Gist options
  • Save Sanaldev/96217899330f52d348d06b38776eeb54 to your computer and use it in GitHub Desktop.
Save Sanaldev/96217899330f52d348d06b38776eeb54 to your computer and use it in GitHub Desktop.
Download ZIP
Map Box - Static Map - GeoJson
Raw
map_box_static_map_geoJson.js
var topLocations = [{"Locations":"Cedar Grove Park","Lat Long":"-26.75768,152.8438","Footfall":293},{"Locations":"Noel Burns Park","Lat Long":"-26.76416,153.12004","Footfall":289},{"Locations":"Bill Keylock Place","Lat Long":"-27.60254,152.98185","Footfall":288},{"Locations":"Pardalote Park","Lat Long":"-27.60706,153.04122","Footfall":284},{"Locations":"Laurel Oak Park","Lat Long":"-27.62282,153.03159","Footfall":276},{"Locations":"Biambi Yumba Park","Lat Long":"-27.54035,152.96964","Footfall":272},{"Locations":"Homestead Park","Lat Long":"-27.60673,152.95791","Footfall":272},{"Locations":"Crummunda Park","Lat Long":"-26.7643,153.12379","Footfall":271},{"Locations":"Bicentenary Park","Lat Long":"-26.75921,152.85016","Footfall":271},{"Locations":"Hives Park","Lat Long":"-27.53381,152.98028","Footfall":267}];
L.mapbox.accessToken = 'Sample Token'; //Use a Valid Token
var featureArray = [];
topLocations.forEach(function(ele,i){
lat = parseFloat(ele['Lat Long'].split(',')[0]);
lon = parseFloat(ele['Lat Long'].split(',')[1]);
feature = {"type": "Feature","properties": {},"geometry": {
"type": "Point",
"coordinates": [lon,lat]
}};
featureArray.push(feature);
})
var sfAndDc = {"type": "FeatureCollection","features": featureArray };
var bounds = geojsonExtent(sfAndDc);
var size = [470, 320]; //Dimensions for map
var vp = geoViewport.viewport(bounds, size);
var pins = [];
for (var i = 0; i < sfAndDc.features.length; i++) {
pins.push('pin-s(' + sfAndDc.features[i].geometry.coordinates.join(',') + ')');
}
var static_map_url =
'https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/' +
pins.join(',') + '/' +
vp.center.join(',') + ',' +
(vp.zoom-1) + '/' +
size.join('x') +
'?access_token=' + L.mapbox.accessToken;
$('.map').css('background-image', 'url("' + static_map_url+'")');
Raw
test.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>PDF</title>
<script src='https://api.mapbox.com/mapbox.js/v3.2.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.2.0/mapbox.css' rel='stylesheet' />
<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>
<style>
.map{
width: 470px;
height: 320px;
/*background: url('/images/v3/pdf/footfall_report/mapbox.jpg');*/
display: inline-block;
vertical-align: top;
background-size: auto 100%;
}
</style>
</head>
<body>
<div class="map">
</div>
<script src='map_box_static_map_geoJson.js'></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment