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? – Kees de Kooter Feb 1 '15 at 16:20

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

| improve this answer | |

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

| improve this answer | |
  • 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 '17 at 15:37

Your Answer

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

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