4

I've gotten custom HTML applied successfully within my #map element (where Leaflet is appended) but I'm having unusual behavior with other Leaflet objects that find themselves within the transparent portion of my div.

The full div is highlighted in blue in the image above. The area above the marker and its popup have no special stylings or any Javascript applications to explicitly affect event propagation.

Example

However, were I to click anywhere on that popup or its map marker, the click is propagating all the way through to the map, rather than stopping at the popup/marker. It's as though the inherent stopPropagation functionality on those objects is somehow nullified by being under my custom div. My cursor, too, has the grab-hand associated with moving the map, whereas it should be a default pointer when on those objects.

If I scroll the map so those objects are outside my div (outside the blue) then my clicks stop at them correctly.

I'm not sure if it's relevant but the top and left portions of the custom div do have stopPropagation applied to them, which also works as intended. But again, their parent element (the whole blue area) does not.

Any thoughts?

P.S. I should also point out that due to some dynamic scaling logic for resizing, there's no way to get rid of the parent element without a considerable and complex workaround, which we'd prefer to avoid. Otherwise I'd have done that already to bypass the problem.

Improve this question
1
  • I finally just redid the HTML to omit the parent. It's burdensome since now I have to scale/adjust the children individually but at least the problem has been sidestepped. Still curious if there's a solution to this, however.
    – Rikaelus
    May 21, 2015 at 20:23

1 Answer 1

Reset to default
1

I would put the overlay and the map divs as children of a parent div and use the css mouse-event property to ensure correct propagation. See: https://stackoverflow.com/questions/17537496/bootstrap-row-over-leaflet Be careful, if you need the popup to appear above that custom HTML, you will probably face some ordering issues.

Improve this answer
2
  • If you mean put my div as a sibling of the #map element that Leaflet builds inside of, that won't work. My divs need to exist within the fullscreen mode of Leaflet which occurs only within the #map div. As it was, my divs were already siblings of the elements Leaflet places within #map and are absolutely positioned.
    – Rikaelus
    Jun 5, 2015 at 16:45
  • I was indeed meaning div as a sibling of the #map. Yes, it won't work with github.com/Leaflet/Leaflet.fullscreen but you may be able to implement a full screen behaviour for the whole page (never worked with html5 fullscreen before, so cannot confirm).
    – Fabian Dubois
    Jun 10, 2015 at 12:06

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.