CODEWITHSUNDEEP
javascriptdictionaryleaflet
stefcud
stefcud

Reputation: 2315

Leaflet center popup AND marker to the map

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 centered in leaflet map

Upvotes: 31

Views: 21985

Answers (5)

rafaels88
rafaels88

Reputation: 839

I took the chance to make a refactoring on @dan-mandle's reply using only public methods since his answer (correct answer) is using many private attributes and it is not the best practice:

    map.on("popupopen", (event) => {
      const popupPixelCoords = map.project(event.popup.getLatLng());
      const popupHeight = event.popup.getElement().clientHeight;
      popupPixelCoords.y -= popupHeight / 2; // move the popup vertical axis location down (distance: half of popup height)
      map.panTo(map.unproject(popupPixelCoords), { animate: true }); // pan to calculated location
    });

Upvotes: 0

Rami Alloush
Rami Alloush

Reputation: 2626

My very simple solution keeps the current zoom level as well for better usability.

map.on('popupopen', function (e) {
    map.setView(e.target._popup._latlng, e.target._zoom);
});

Upvotes: -1

Dan Mandle
Dan Mandle

Reputation: 5839

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

Upvotes: 64

Titsjmen
Titsjmen

Reputation: 809

Here's an easy solution:

First you center the map to your marker.

map.setView(marker.latLng);

Then you open the popup.

var popup.openOn(map); = L.popup()
    .setLatLng(marker.latLng)
    .setContent(dynamic-content)
    .openOn(map);

Leaflet will automatically pan the map so the popup fits on the map. To make it look more beautiful you can add a margin-top to the popup with CSS.

Upvotes: 6

fitzpaddy
fitzpaddy

Reputation: 501

Ciao Stefano,

This is untested pseudocode, but Leaflet project/unproject functions should provide assistance.

i.e;

// Obtain latlng from mouse event
var latlng;
// Convert latlng to pixels
var px = project(latlng);
// Add pixel height offset to converted pixels (screen origin is top left)
px.y -= mypopup.height/2
// Convert back to coordinates
latlng = unproject(px);
// Pan map
map.panTo(latlng,{animate: true});

This depends on zoom scale being constant during calculation, so you might be required to pan the map and then calculate the pan offset to update correctly (using animation, this will only be a gentle transition).

Good luck!

Upvotes: 9

Related Questions