Leaflet: How to display markers behind polygons?

Question

I need icons (PNG) and polygons on my map. So I create icons as markers and polygons as polygons. Unfortunately regardless of creation order polygons are displayed "below" markers. I need is vice-versa. Is there a way, how to do it?

Answer 1

EDIT:

Correct default panes order in Leaflet 0.x: (from top-most to bottom-most)

1. objectsPane
   1. popupPane
   2. markerPane <= all markers icon (other than L.CircleMarker)
   3. shadowPane <= all markers icon shadow
   4. overlayPane <= all vectors (including L.CircleMarker)
2. tilePane

So just using the marker's icon shadow is not enough. You have to manually change the z-index of those panes in CSS (or through JS).

See also Leaflet: Polyline above Marker.

---

Original answer:

The stack order of vectors (like your polygons) and Markers is fixed in Leaflet 0.x. They are inserted into "panes" which order is (from top-most to bottom-most):

1. popupPane
2. markerPane <= all markers icon (other than L.CircleMarker)
3. overlayPane <= all vectors (including L.CircleMarker)
4. shadowPane <= all markers icon shadow
5. tilePane

So you should be able to easily workaround this fixed order by using the Marker's Icon shadow. If you still want the user to be able to click on your marker, simply use a transparent image for the normal icon, with the same size as your shadow image.

The situation is different in Leaflet 1.0. You can create your own panes (map.createPane), set their order by specifying their zIndex (possibly through CSS), and specify where your vectors and markers go by using their pane (and shadowPane for markers) option(s).