I've combined a from a geoserver WMS tilelayer (trails) seperately with a mapBox streets-baseic and mapbox sateline using LayerGroup to form two basemaps, "Streets" and "Imagery" available for a leaflet map. I'm wanting the WMS trails to become part of these base maps and not be an overlay users can control. I'm new to leaflet and am having trouble with ordering of the TileLayers within the streets layer group.

The map starts with the trails on top of the streets basemap fine. The trails will still display over the sateline imagery when switching to the Imagery base map. However, when the base map is switched back over to the Streets base map, the trails disappear.

I've tried to implement trails.addTo(map).bringToFront(); after the layer control, thinking it is an ordering issue and even played around with zIndex, without success. I've looked at the follwoing two posts. I could try to remove and re-add the layers each time the base map is switched, but it seems the answer should be simpler.

How to change layer order in leaflet.js


Can anyone tell me how I can order the combined tile layers within the base map?

Here is my code

"use strict";

var map = L.map('map', {
        center: [IVY.default_latitude, IVY.default_longitude],
        zoom: 14

//default basemap layer

//street layer using mapbox basic
var mapboxbasic = L.tileLayer('https://api.mapbox.com/v4/mapbox.streets-basic/{z}/{x}/{y}.png?access_token=' + IVY.mapbox_api_key, {
        maxZoom: 18

//City Trails
var trails = L.tileLayer.wms('https://bloomington.in.gov/geoserver/publicgis/wms', {
        layers: 'publicgis:BikePedTrails',
        format: 'image/png',
        transparent: true,
        version: '1.1.1'

//aerial layer using mapbox satellite
var mapboxsat = L.tileLayer('https://api.mapbox.com/v4/mapbox.streets-satellite/{z}/{x}/{y}.png?access_token=' + IVY.mapbox_api_key, {
        maxZoom: 18

//Base Map Layer Groups

var streets = new L.layerGroup([mapboxbasic, trails]).addTo(map);
var imagery = new L.layerGroup([mapboxsat, trails]);

//experiment use bringToFront inside layergroup def - no difference
var streets = new L.layerGroup();

var imagery = new L.layerGroup();

//layer controls

var basemap = { 'Streets': streets, 'Aerials': imagery}


// bring trails to front

//base layer change method

//only works when switching to aerials - not when switching to streets
map.on('baselayerchange', function(layer) {

//these don't make a difference

There is actually a very simple way to control the "vertical" order of the tileLayers within the tilePane: option zIndex


Demo: http://jsfiddle.net/19hjrmpc/8/

Please note that you do not need to combine your tileLayers into LayerGroups to achieve this. If you absolutely need some sort of combinations, it would probably be easier to use scripting to turn ON and OFF the required layers.

With Thomas' solution, you move your trails tileLayer to the overlayPane, which is always above the tilePane (i.e. no matter what zIndex you set to other tileLayers, they will never be on top of it), but I am not aware of another out-of-the-box solution than Layers Control to put a tileLayer in it.

  • This worked perfectly for what I need and also worked when added an overlays that is displayed to the layer control. Thank you! – lhaley Oct 28 '15 at 23:04

I don't have a clean solution but if you don't use other overlays a quick and dirty workaround would be to use an overlay object in your Layer Control and set it to display:none;


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.