How can I change the location center of a map using Leaflet API?

Question

My map (Mapbox) takes up the whole background of the site so the center is in the middle of the site. But the focus of the map for the user is on the right side because I have

Answer 1

Found this solution by ghybs over on GIS which helped me solve this problem:

• Leaflet-active-area

  This plugin allows you to use a smaller portion of the map as an active area. All positioning methods (setView, fitBounds, setZoom) will be applied on this portion instead of the all map.

Answer 2

First you will need to know the lat and long of the point on the map you want to center on. Then it is simple, just call Map.map.setView passing in your coordinates and zoom level. Api reference: http://leafletjs.com/reference.html#map-set-methods

If you don't know your coordinates then you can find it by trial and error, just create a marker and add it to the map.

Answer 3

If you have multiple markers and want to center the map in their bounds and at the same time you have overlapping container, you can use the fitBounds options (paddingTopLeft, paddingBottomRight, padding).

http://leafletjs.com/reference.html#map-paddingtopleft

Answer 4

You can use a combo of panBy() and getSize() to offset the map the width of your overlay.

Here's a snippet that should get you a started:

// Calculate the offset
var offset = map.getSize().x*0.15;
// Then move the map
map.panBy(new L.Point(-offset, 0), {animate: false});

In my example, my overlay is 33% of the width of the map. So I grab the size of the map area, then multiple by 0.15 (this was based on some experimenting to see what the best offset amount was) and use panBy() to offset the map center.

Here's a full example.