Layer Ordering in leaflet.js

Question

How can I force a new layer added to the map in Leaflet to be the first over the basemap?

I could not find a method to easily change the order of the layers, which is a very basic GIS feature. Am I missing something?

Answer 1

A Leaflet map consists of a collection of "Panes" whose view order is controlled using z-index. Each pane contains a collection of Layers The default pane display order is tiles->shadows->overlays->markers->popups. Like Etienne described, you can control the display order of Paths within the overlays pane by calling bringToFront() or bringToBack(). L.FeatureGroup also has these methods so you can change the order of groups of overlays at once if you need to.

If you want to change the display order of a whole pane then you just change the z-index of the pane using CSS.

If you want to add a new Map pane...well I'm not sure how to do that yet.

http://leafletjs.com/reference.html#map-panes

http://leafletjs.com/reference.html#featuregroup

Answer 2

According to Leaflet API, you can use bringToFront or bringToBack on any layers to brings that layer to the top or bottom of all path layers.

Etienne