Question

158

Leaflet center popup AND marker to the map

rated 0 times [ 159] [ 1] / answers: 1 / hits: 19657 / 10 Years ago, thu, march 20, 2014, 12:00:00

I want center my marker on popup open.. and centering map not in marker latlng, but on center of marker and popup!
The problem is that popup has dinamic content(loaded on click).

The map size is full display size in a mobile device!
I'm just used autoPanPadding option in popup but not sufficient

Refer to follow picture:

popup

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

joaquin

Add To Favorites

Follow

Total Points: 150

Total Questions: 103

Total Answers: 113

Location: Saint Helena

Member since Tue, Nov 3, 2020

4 Years ago

answered 10 Years ago ryderalfonsos · Accepted Answer

Using fitzpaddy's answer I was able to make this code which works and is much more flexible.

map.on('popupopen', function(e) {

    var px = map.project(e.target._popup._latlng); // find the pixel location on the map where the popup anchor is

    px.y -= e.target._popup._container.clientHeight/2; // find the height of the popup container, divide by 2, subtract from the Y axis of marker location

    map.panTo(map.unproject(px),{animate: true}); // pan to new center

});