I have a leaflet draw implementation (in Angular) with a custom sidebar that overlaps the Map. It should not be possible to draw through that sidebar. For circlemarkers I could solve this problem easily by using

pointer-events: all;



for the clickevents. That way any clicks will not arrive on the map, so no circlemarker is drawn.

My problem: this solution does not work when drawing eg. rectangles. Even with the code above, any click on the sidebar starts drawing a new rectangle or finishes the drawing of a rectangle.

How can I prevent the Map from registering these events on top of the sidebar. Why does it work for circlemarkers an not for polygons?

  • Most probably the problem is in z-order of html elements. Try setting z-index of your sidebar to some very high value, then catch mouse events in your sidebar and prevent event bubbling. – TomazicM Apr 24 at 18:58
  • Thank you for your answer. Unfortunately, z-index values seem to be correct. I catch the click / mousedown events and stop propagation. But that doesn't help , the polyon / rectangle / circle still start/stop drawing. – Ben May 6 at 13:35
  • In this case debugging is the only solution. Going step by step through code and see what is happening. – TomazicM May 6 at 15:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.