Possible Duplicate:
How to change Leaflet Map panes layering order (z-index)?

In the Leaflet Layers Control L.Control.Layers() described here, is there a way to control the z-index (layer order) of the overlays?

I'm talking about the overlay portion they show like this:

var overlayMaps = {
"Motorways": motorways,
"Cities": citiesLayer

In their example, they have a tile layer and a maker layer. Of course, the marker layer is always on top regardless of which toggle button was clicked when.

In my case, I have two tile layers. The problem is that whichever toggle button I turn on last, THAT layer appears on top.

If both are off and I turn on Cities, then turn on Motorways, Motorways is on top of Cities and partially blocks them out. Is there a way to control this so Cities always appears on top even if Motorways is turned on after it?

I've tried reordering the code to no avail and am aiming to have maybe five overlays. The code is below. Thanks!

var mapAttribution = 'Attribiution',
            mapOptions = {maxZoom: 8, attribution: mapAttribution},
            mexicoMapUrl = 'http://{s}.tiles.mapbox.com/v3/billted98.map-50h5h3pu/{z}/{x}/{y}.png';
            blueMarbleUrl = 'http://{s}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-jul/{z}/{x}/{y}.png';
            blueMarbleGrayUrl = 'http://{s}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-jul-bw/{z}/{x}/{y}.png';
            roadsUrl = 'http://{s}.tiles.mapbox.com/v3/billted98.roads-major-mexico-select/{z}/{x}/{y}.png';
            citiesUrl = 'http://{s}.tiles.mapbox.com/v3/billted98.msm-cities-and-names/{z}/{x}/{y}.png';

    var mex = new L.TileLayer(mexicoMapUrl, mapOptions),
        bm = new L.TileLayer(blueMarbleUrl, mapOptions),
        bmg = new L.TileLayer(blueMarbleGrayUrl, mapOptions),
        roads = new L.TileLayer(roadsUrl, mapOptions),
        cities = new L.TileLayer(citiesUrl, mapOptions);

    // ADD MAP
    var map = new L.Map('map', {
        subdomains: ["a", "b", "c", "d"],
        center: new L.LatLng(23.342256,-102.019043),
        zoom: 5,
        minZoom: 5,
        maxZoom: 8,
        layers: [mex],

    var baseMaps = {
        "Standard": mex,
        "Terrain": bm,
        "Terrain-Gray": bmg

    var overlayMaps = {
       "Cities": cities,
       "Roads": roads

    layersControl = new L.Control.Layers(baseMaps, overlayMaps);

  • I thought so too, but the difference is that billted98 is trying to preserve order of tile layers, whereas I was trying to override default drawing order (Overlays//Tiles), so that I could get (Tiles//Overlays//Tiles) tiles on top of overlays. Jul 10, 2012 at 19:53
  • Using Chrome's browser inspector, here's what it's doing: When a toggle is clicked on, it adds a div with a class of "leaflet-layer" that includes the relevant tile layers. Then, when any other toggles are clicked, their new div is added AFTER the original div. So, whatever is clicked last, it is the latest in the DOM and draws last and on top. So, is there some way to dynamically add a z-index to the css of that class? or maybe generate a unique class for each layer where a z-index can be specified? maybe via jQuery? I'm pretty new to all of this, so any thoughts are very appreciated!
    – billted98
    Jul 11, 2012 at 15:32


Browse other questions tagged or ask your own question.