Leaflet control for basemap layers

Question

In short, I need layer groups to be controlled using the elevator control, two or three at a time. In this JSFiddle, when changing basemaps, the hydrographic overlay should always remain on top of various basemaps.

If you start and use the color control in the upper right corner, you will notice how hydrodetection will be disabled when you switch to images and stay if you do not switch to topographic and back to national geography. This is the behavior that I was able to reliably reproduce. If you play with him, you can see some rather strange stuff.

Any input or suggestions on the best ways to achieve this are welcome. To solve this problem, it is necessary to use a level control to switch the base card, while maintaining waterproofing from above. Otherwise, I am completely open to alternative solutions.

If you're curious before moving on to JSFiddle , here is the JavaScript ...

// initialize map
var map = L.map('map', {
    center: [45.7067, -121.5217], // Hood River, OR
    zoom: 7
});

// hydrology overlay layer
var hydro = L.esri.tiledMapLayer('http://hydrology.esri.com/arcgis/rest/services/WorldHydroReferenceOverlay/MapServer');

// basemap layer groups so the hydro overlay always overlays the various basemaps
var nationalGeographic = L.layerGroup([
        hydro,
        L.esri.basemapLayer('NationalGeographic')
    ]),
    esriTopo = L.layerGroup([
        hydro,
        L.esri.basemapLayer('Topographic')
    ]),
    esriShadedRelief = L.layerGroup([
        L.esri.tiledMapLayer('ShadedReliefLabels'),
        hydro,
        L.esri.basemapLayer('ShadedRelief')
    ]),
    esriImagery = L.layerGroup([
        hydro,
        L.esri.basemapLayer('Imagery')
    ]);

// add default layers to map
map.addLayer(esriTopo);

// json object for layer switcher control basemaps
var baseLayers = {
    "National Geographic": nationalGeographic,
    "Esri Topographic": esriTopo,
    "Shaded Relief": esriShadedRelief,
    "Imagery": esriImagery
};

// add layer groups to layer switcher control
var controlLayers = L.control.layers(baseLayers).addTo(map);

Answer 1

z . z index unearthed fooobar.com/questions/260271/... . Bobby , TileLayer API.

, zIndex . , zIndex , . Layer Control z- , . , , , . , , Layer Control . , , z , , , . , detectRetina, MacBook Pro.

, JSFiddle http://jsfiddle.net/FH9VF/11/.

// initialize map
var map = L.map('map', {
    center: [45.7067, -121.5217], // Hood River, OR
    zoom: 7
});

// hydrology overlay layer
var hydro = L.esri.tiledMapLayer('http://hydrology.esri.com/arcgis/rest/services/WorldHydroReferenceOverlay/MapServer', {
    zIndex: 5,
    detectRetina: true
});

// basemap layer groups so the hydro overlay always overlays the various basemaps
var nationalGeographic = L.esri.basemapLayer('NationalGeographic'),
    esriTopo = L.esri.basemapLayer('Topographic'),
    esriShadedRelief = L.esri.basemapLayer('ShadedRelief'),
    esriImagery = L.esri.basemapLayer('Imagery');

// add default layers to map
map.addLayer(esriTopo);
map.addLayer(hydro);

// json object for layer switcher control basemaps
var baseLayers = {
    "National Geographic": nationalGeographic,
    "Esri Topographic": esriTopo,
    "Shaded Relief": esriShadedRelief,
    "Imagery": esriImagery
};

// add layer groups to layer switcher control
var controlLayers = L.control.layers(baseLayers).addTo(map);

Answer 2

- :

//define base layers
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var normalView = L.tileLayer(osmUrl, {styleId: 997, attribution: osmAttributes, maxZoom: 18 });
...

//define overlay layers
var markersLayer = new L.layerGroup();
var linesLayer = new L.layerGroup();
...

//create MAP with default base and overlay layers
var map = L.map('map', {
layers: [normalView, markersLayer]
}).setView([45.2516700, 19.8369400], 12);

//add layers to the base and overlay
var baseMaps = {
    "Normal view": normalView,
    "Night view": nightView,
    "MapQuest layer": mapQuest
};

var overlayMaps = {
    "Markers": markersLayer,
    "Lines": linesLayer,
    "3D layer": osmbView
};

//add layer control to the map
L.control.layers(baseMaps, overlayMaps).addTo(map);