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],
});
// LAYER CONTROLS
var baseMaps = {
"Standard": mex,
"Terrain": bm,
"Terrain-Gray": bmg
};
var overlayMaps = {
"Cities": cities,
"Roads": roads
};
layersControl = new L.Control.Layers(baseMaps, overlayMaps);
map.addControl(layersControl);