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