How to change the map center in Leaflet.js

JavascriptLeaflet

Javascript Problem Overview

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});	
}

Javascript Solutions

Solution 1 - Javascript

For example:

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

Solution 2 - Javascript

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.

Solution 3 - Javascript

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);

Solution 4 - Javascript

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.

Solution 5 - Javascript

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});

Solution 6 - Javascript

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();
});
Categories
Recommended Javascript Solutions
Recommended Leaflet Solutions

Previous Solution:

What is the zero for string?

StringGo

Next Solution:

Passing multiple variables in @RequestBody to a Spring MVC controller using Ajax

JavaSpringHttpSpring Mvc

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJoel JamesView Question on Stackoverflow
Solution 1 - JavascriptPaulo RodriguesView Answer on Stackoverflow
Solution 2 - JavascriptGreg WilsonView Answer on Stackoverflow
Solution 3 - JavascriptStefan NedelcuView Answer on Stackoverflow
Solution 4 - JavascriptLatinrickshawView Answer on Stackoverflow
Solution 5 - JavascriptAkaisteph7View Answer on Stackoverflow
Solution 6 - JavascriptJasom DotnetView Answer on Stackoverflow