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.
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.
أكثر...
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.
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.
أكثر...