I have a map that covers the entire screen and I have a layer that overlays the map. That layer goes from bottom to top. the user interacts with this layer by clicking on different options and these options draw markers on the map.

When I centralize the map, the markers are hidden behind the layer that superimposes the map, thus eliminating the visibility of the marker.

How could I centralize the map and then move it one third above the layer? This question is a remake of How can I change the location center of a map using Leaflet API?

Try doing it this way

var offset = map.getSize().y * 0.15;
map.panBy(new L.Point(0, -offset), {animate: false});

But every time I click on an option in the layer to create a marker, the map moves and I lose the center.


enter image description here

Excuse the example image
The idea is that after the map makes the setView place its center above the blue layer that superimposes the map so as not to hide the markers.

  • I don't understand what you're asking.
    – Alex Leith
    Mar 1, 2018 at 1:47
  • It's still not clear to me what your question is. In your JSFiddle you have a button that first adds a new marker to the map and pans the map down a certain offset, every time you click it. Maybe you need to offset the map's center just once when you first create it, like this: jsfiddle.net/t2xty7p2/17/#&togetherjs=yDB4uug0bN?
    – cmrRose
    Apr 27, 2018 at 20:45

1 Answer 1


I know it's been years, but you could use leaflet-active-area.

Check out their demo.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.