Center Map on Layer Change in Leaflet
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<html> | |
<head> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" /> | |
<!--[if lte IE 8]> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" /> | |
<![endif]--> | |
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script> | |
<style type="text/css"> | |
#map { | |
height: 500px; | |
} | |
</style> | |
</head> | |
<body> | |
<h1></h1> | |
<div id="map"></div> | |
<script type="text/javascript"> | |
var circle = L.circle([51.508, -0.11], 500, { | |
color: 'red', | |
fillColor: '#f03', | |
fillOpacity: 0.5 | |
}); | |
var polygon = L.polygon([ | |
[51.509, -0.08], | |
[51.503, -0.06], | |
[51.51, -0.047] | |
]); | |
var map = L.map('map', { | |
center: [51.505, -0.09], | |
zoom: 13 | |
}); | |
var overlayMaps = { | |
"Circle": circle, | |
"Polygon": polygon | |
}; | |
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>' | |
}).addTo(map); | |
L.control.layers(overlayMaps, null, { | |
collapsed: false | |
}).addTo(map); | |
// recenter map on base layer change: | |
map.on('baselayerchange', function(e) { | |
console.log(e); | |
map.fitBounds(e.layer); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment