I have SVG on top of GeoJSON in my map. How can a leaflet SVG overlay be placed outside of the leaflet-overlay-pane while keeping GeoJSON in-place within the leaflet-overlay-pane? (For example, how could I put just the SVG into say the leaflet-shadow-pane and then turn pointer events off on the leaflet-shadow-pane making it possible to interact with the GeoJSON?)

Thus-far, when I set:

.leaflet-overlay-pane svg {
    pointer-events: none;

it seems to disable to disable pointer events to both the SVG and GeoJSON, which defeats the purpose.

  • 1
    I think the problem is that two svg roots are created: one by GeoJSON and one by your own SVG. The last one added to the map "wins". Can you add the code in which you load the SVG to the question? Feb 1, 2015 at 16:20

2 Answers 2


Add the SVG to map.getPanes().shadowPane.


You can turn off interactivity of a svg with interactivity: false

  • 1
    A good answer should include details about how and where to use your solution, and what it does to solve the problem. Please edit your answer to expand with more detailed explanation.
    – Midavalo
    Apr 27, 2017 at 15:37

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.