CODEWITHSUNDEEP
javascriptcsspopupleaflet
BryGom
BryGom

Reputation: 699

Leaflet.js: Popup outside map container

I need open a popup window outside of map container like this: Popup over container and another div, always on top.

Popup over map container and another div, always on top, I used a z-index in .leaflet-popup-content-wrapperwithout success.

I used too L.marker([14, -45]).bindPopup(content,{autoPan:false}).addTo(map); But always show popup inside container.

Upvotes: 3

Views: 3677

Answers (1)

ghybs
ghybs

Reputation: 53225

EDIT

A workaround would be to implement the "popup" yourself, so that it belongs to the map container parent rather than inside the map container.

You would need to implement the marker movement tracking, but with Leaflet this is rather easy:

  1. use the map's "move" event
  2. retrieve the marker current position using map.latLngToContainerPoint()
  3. move your popup using L.DomUtil.setTransform() method to apply a translate3d (hardware accelerated translation).
map.on("move", function () {
  movePopup();
});

function movePopup() {
  var mapContainerRelativePos = map.latLngToContainerPoint(mymarker.getLatLng()),
    x = mapContainerPos.left + mapContainerRelativePos.x,
    y = mapContainerPos.top + mapContainerRelativePos.y;

  L.DomUtil.setTransform(mypopup, {x: x, y: y}, 1);
}

Demo: https://jsfiddle.net/3v7hd2vx/54/

Then you are left with opening and closing the popup.

Original answer

The L.Popup is added within the map elements. So by default it cannot extend outside the map container.

However you could try to "extract" it (popup.getElement() in Leaflet 1.0) by retrieving the associated HTML Elements and appending it to an external DOM parent node, so that you are no longer bound to the map container.

Upvotes: 4

Related Questions