Skip to content

Instantly share code, notes, and snippets.

@zross

zross/businesses.json

Last active Oct 30, 2017
Embed
What would you like to do?
Leaflet.js Tips, Step 3 (markers and fitBounds)
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"Name": "Gimme! Coffee",
"BusType": "Cafe",
"Description": "Gimme espresso bars are found in New York City and Upstate New York."
},
"geometry": {
"type": "Point",
"coordinates": [-76.499491, 42.444508]
}
}, {
"type": "Feature",
"properties": {
"Name": "ZevRoss Spatial Analysis",
"BusType": "Data analysis and mapping",
"Description": "Specializes in spatial and environmental data analysis and statistics, geographic information systems and custom data design."
},
"geometry": {
"type": "Point",
"coordinates": [-76.4958259, 42.440258]
}
}, {
"type": "Feature",
"properties": {
"Name": "Argos Inn",
"BusType": "Inn and Bar",
"Description": "Inn and cocktail bar in a beautifully restored historic mansion."
},
"geometry": {
"type": "Point",
"coordinates": [-76.492543, 42.439401]
}
}
]
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script>
<!-- THIS IS NEW -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
#map {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var mapboxTiles = L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-i87786ca/{z}/{x}/{y}.png', {
attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms &amp; Feedback</a>'
});
var map = L.map('map')
.addLayer(mapboxTiles)
.setView([42.444508, -76.499491], 12);
var promise = $.getJSON("businesses.json");
promise.then(function(data) {
// THIS IS NEW
var allbusinesses = L.geoJson(data);
allbusinesses.addTo(map);
// THIS IS NEW
map.fitBounds(allbusinesses.getBounds(), {
padding: [50, 50]
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.