Leaflet.js Tips, Step 3 (markers and fitBounds)
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!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 & 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