Layer Ordering in leaflet.js

user1249791 picture user1249791 · Oct 11, 2012 · Viewed 22.9k times · Source

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

InPursuit picture InPursuit · Oct 22, 2012

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