0

I'm sorry for my English, I just study it. Is it possible to save map-draggable functionality on popup within leaflet map? I mean move the map while dragging(clicking and moving or tuching on mobile) across the popup?

2
  • Save where: on users computer, on server?
    – TomazicM
    Commented Jul 20, 2020 at 13:23
  • No, I meant to keep the functionality of moving the map when clicking/dragging on the popup. By default, the map does not move when you click/drag on the popup area, it moves only when you click/drag on the map itself. Commented Jul 20, 2020 at 14:00

1 Answer 1

2

You can enable dragging the whole map when mouse is pressed on popup by making popup content ignore the mouse events.

This can be achieved by modifying appropriate Leaflet CSS styles:

.leaflet-popup-content-wrapper {
   pointer-events: none;
}
.leaflet-popup-tip-container {
   pointer-events: none;
}
4
  • Thank you a lot! It works well. But what if popup has a button? Button will not be working too. I need this behavior only on mobiles. Can this be done with JS and events? I try until it works. Commented Jul 20, 2020 at 17:41
  • Popup close button will be working, it's in a separate div element with leaflet-popup-close-button CSS class.
    – TomazicM
    Commented Jul 20, 2020 at 18:18
  • I have another button on popup and big clickable image. I add CSS property to them "pointer-events: auto" and it works... But not so pretty. Is it possible for the entire area of popup (with button and clickable image) to be with draggable map, but click events work? Commented Jul 20, 2020 at 18:28
  • It would probably be possible, but with a lot of event processing.
    – TomazicM
    Commented Jul 20, 2020 at 18:43

Your Answer

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

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