How to change the map center in Leaflet.js

Question

The following code initializes a leaflet map. The initialize function centers the map based on user location. How do I change the center of the map to a new position after calling the initialize function?

function initialize() {
map = L.map('map');
L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery Â© <a href="http://cloudmade.com">CloudMade</a>'
}).addTo(map);

map.locate({setView: true, maxZoom: 8});    
}

score 225 · Accepted Answer · answered Oct 04 '12 at 20:44

225

For example:

map.panTo(new L.LatLng(40.737, -73.923));

answered Oct 04 '12 at 20:44

Paulo Rodrigues

5,273
7
35
58

47

`map.flyTo([40.737, -73.923], 8)` if you want to zoom and animate as well – Martin Belcher - AtWrk Dec 10 '18 at 15:51
9

In my case however, ```panTo()```, ```flyTo()```, ```setView()``` - all of them take me to the *top left* of the map, and not the center. – Mrigank Pawagi Apr 27 '19 at 12:42
1

@MrigankPawagi use `setTimeout(function () {map.invalidateSize(true)}, 100);` – Jasom Dotnet Mar 18 '22 at 12:59

score 158 · Answer 2 · edited Feb 22 '14 at 00:06

158

You can also use:

map.setView(new L.LatLng(40.737, -73.923), 8);

It just depends on what behavior you want. map.panTo() will pan to the location with zoom/pan animation, while map.setView() immediately set the new view to the desired location/zoom level.

edited Feb 22 '14 at 00:06

GoTo

5,966
2
28
31

answered Oct 07 '12 at 21:51

Greg Wilson

2,380
2
15
14

4

I like this one because you also get the zoom level, which is very useful. – Mr. Concolato Oct 16 '14 at 18:12
5

Also you can pass the coordinates as an array: `map.setView([40.737, -73.923], 8)` or an object `map.setView({lat:40.737, lng:-73.923}, 8)` – leobelizquierdo Feb 11 '16 at 17:48
7

panTo was not showing animation, I use `map.setView(latlng, map.getZoom(), { animation: true });` – Ivan Ferrer Villa Jan 24 '17 at 15:49
animation still not working with `setView` – chovy May 01 '22 at 14:03

score 15 · Answer 3 · edited Jul 17 '18 at 09:31

15

Use map.panTo(); does not do anything if the point is in the current view. Use map.setView() instead.

I had a polyline and I had to center map to a new point in polyline at every second. Check the code : GOOD: https://jsfiddle.net/nstudor/xcmdwfjk/

mymap.setView(point, 11, { animation: true });

BAD: https://jsfiddle.net/nstudor/Lgahv905/

mymap.panTo(point);
mymap.setZoom(11);

edited Jul 17 '18 at 09:31

SHR

7,940
9
38
57

answered Jul 17 '18 at 09:14

Stefan Nedelcu

167
1
4

Doesnt' animate for me. – chovy May 01 '22 at 14:02

score 7 · Answer 4 · answered May 08 '19 at 14:07

7

You could also use:

var latLon = L.latLng(40.737, -73.923);
var bounds = latLon.toBounds(500); // 500 = metres
map.panTo(latLon).fitBounds(bounds);

This will set the view level to fit the bounds in the map leaflet.

answered May 08 '19 at 14:07

LatinRickshaw

85
1
7

score 1 · Answer 5 · answered Mar 18 '22 at 13:03

In the case of map-centering problem despite using panTo(),flyTo() or setView() try to adjust the map with map.invalidateSize():

setTimeout(function () {
    map.invalidateSize(true);
}, 100);

jQuery sample:

$(document).ready(function () {
    mymap.invalidateSize();
});

score 0 · Answer 6 · answered Aug 19 '21 at 17:13

0

I was looking for a way to change the bounds but without the animation. This worked for me:

var bounds = L.latLng(40.737, -73.923).toBounds();
map.fitBounds(bounds, {animation: false});

answered Aug 19 '21 at 17:13

Akaisteph7

5,034
2
20
43

How to change the map center in Leaflet.js

6 Answers6

Linked