Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Center Map on Layer Change in Leaflet
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="" />
<script src=""></script>
<style type="text/css">
#map {
height: 500px;
<div id="map"></div>
<script type="text/javascript">
var 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 ='map', {
center: [51.505, -0.09],
zoom: 13
var overlayMaps = {
"Circle": circle,
"Polygon": polygon
L.tileLayer('http://{s}{z}/{x}/{y}.png', {
attribution: '&copy; <a href="">OpenStreetMap</a> contributors, <a href="">CC-BY-SA</a>'
L.control.layers(overlayMaps, null, {
collapsed: false
// recenter map on base layer change:
map.on('baselayerchange', function(e) {
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.