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 in the leaflet-overlay-pane? (For example, how could I put just the SVG into the leaflet-shadow-pane and then turn pointer-events off on the leaflet-shadow-pane... thus making it possible to interact with the GeoJSON?)

My apprehension is this: Leaflet map layers are stored in panes: http://leafletjs.com/reference.html#map-panes

However, it is not clear to me just exactly how these panes are ordered and what each of them contains.

according the Leaflet's css (http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css), the order of these panes makes more sense:

  • .leaflet-map-pane { z-index: <"?">; } //Pane that contains all other map panes. (presumably all the below map panes)

    1. .leaflet-tile-pane { z-index: 2; } //Pane for tile layers.

    2. .leaflet-objects-pane { z-index: 3; } //Pane that contains all the panes except tile pane. (presumably all the below panes)

      1. .leaflet-overlay-pane { z-index: 4; } //Pane for overlays like polylines and polygons.

        • .leaflet-overlay-pane svg { z-index: <"?">; }
        • .leaflet-overlay-pane <"?"> { z-index: <"?">; }
      2. .leaflet-shadow-pane { z-index: 5; } //Pane for overlay shadows (e.g. marker shadows).

      3. .leaflet-marker-pane { z-index: 6; } //Pane for marker icons.

      4. .leaflet-popup-pane { z-index: 7; } //Pane for popups.

I am specifically interested in .leaflet-overlay-pane svg and any subsequent panes that reside inside .leaflet-overlay-pane (i.e. GeoJSON pane).


  • Thank you, yes this does touch on my interests. Other good resources include:leaflet.uservoice.com/forums/… and bl.ocks.org/rsudekum/5431771 .... I have SVG on top of my GeoJSON polys (which have interactivity). What is the most appropriate way to keep the SVG from blocking the GeoJSON interactive events while keeping it (the SVG) on top of the map? Both SVG and GeoJSON exist in the overlayPane. Feb 24, 2014 at 20:44
  • 1
    If your follow up question does not get resolved here then I recommend that you research/ask it as a separate Question.
    – PolyGeo
    Feb 24, 2014 at 21:10


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.

Browse other questions tagged or ask your own question.