Overlay layer not displayed above Base layer for custom panels of Leaflet.groupedlayercontrol plugin

Question

I created simple web map (example http://jsfiddle.net/q77wk17z/1/) with one Overlay and several Base layers using Leaflet.groupedlayercontrol plugin. Overlay and Base layers divide on separate layer controls. When I turn on Overlay layer and select another Base layer - Overlay layer displayed under Base layer. Where am I wrong? May be another way create separated Overlay and Base layer controls... Code Example http://jsfiddle.net/q77wk17z/1/

Answer 1

For fix this issue need add

if(!obj.overlay) {
obj.layer.setZIndex(0);
}

code in leaflet.groupedlayercontrol.js file of Leaflet.groupedlayercontrol plugin. See fixed example http://spatialhast.github.io/leaflet.groupedlayercontrol.html. For Leaflet.groupedlayercontrol created pull request https://github.com/ismyrnow/Leaflet.groupedlayercontrol/pull/16

Answer 2

Setup the layer's zIndex works for me.

var _tiledlayer = L.tileLayer(MB_URL, {attribution: MB_ATTR, id: 'mapbox.streets', zIndex : -1});
            var _graylayer = L.tileLayer(MB_URL,   {attribution: MB_ATTR, id: 'mapbox.light', zIndex : -1});
            var _config = { url: "http://localhost:8082/setor_tile/{z}/{x}/{y}.pbf" , zIndex : 1};