Leaflet Layer control same map as base and overlay - leaflet

Question

I have 3 maps Osm, Lidar and Aerial . I want to select one as the baselayer and one as an overlay. E.g. osm + aerial, osm + Lidar, Aerial + lidar. The LayerControl nearly does what I want but fires baselayerchanged when an overlay is enabled that is also a baselayer optionn. Any ideas on how to sort this would be welcome.

Answer 1

Use two instances of L.Control.Layers, each having a different set of 3 "baselayers".
The nomenclature of "baselayers" and "overlays" can be confusing. As far as a L.Control.Layers is concerned, baselayers are mutually exclusive and overlays are not. You can have something that looks like a graphical overlay but is defined as a baselayer in a control.

Answer 2

Here is the code I ended up with. The important thing is that when changing base layer with an overlay selected, the overlays have to be unloaded to load the new base at the bottom of the z order.
$(document).ready(function () {
var map = L.map('map').setView([-14.0349289249, -171.438639761], 14);
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors'
});
var aerial =L.tileLayer('aerial/{z}/{x}/{y}.png', {
maxZoom: 18,
tms: false,
attribution: 'Aerial from Centre for Samoan Studies (CSS)'
});
var lidar =L.tileLayer('lidar/{z}/{x}/{y}.png', {
maxZoom: 18,
tms: false,
attribution: 'LIDAR from Centre for Samoan Studies (CSS)'
});
// our set of layers
var layers = [osm, aerial, lidar];
// initial base layer
osm.addTo(map)
// to enable base/overlay swapping, add extra properties with unlikely to clash names
osm.isSamoaBase = true;
osm.isSamoaOverlay = false;
osm.samoaName = 'Base';
lidar.isSamoaBase = false;
lidar.isSamoaOverlay = false;
lidar.samoaName = 'LIDAR';
aerial.isSamoaBase = false;
aerial.samoaName = 'Aerial';
aerial.isSamoaOverlay = false;
// set true when the existing base layer is to be replaced
var baseChange = false;
// layer selector for both base and overlays,
// sorted to preserve order as layers move between base and overlay sections
var layerControl = L.control.layers(null, null, {sortLayers:true});
layerControl.addTo(map);
loadLayerControl(layerControl);
map.on('layerremove', function(le){
if (le.layer.isSamoaBase) {
le.layer.isSamoaBase = false;
// a new base will be selected next
baseChange = true;
}
if (le.layer.isSamoaOverlay) {
le.layer.isSamoaOverlay = false;
}
loadLayerControl(layerControl);
});
map.on('layeradd', function(le){
if (baseChange) {
baseChange = false;
// tag as new base
le.layer.isSamoaBase = true;
le.layer.isSamoaOverlay = false;
// restore full base layer opacity
le.layer.setOpacity(1);
}
if (!le.layer.isSamoaBase) {
le.layer.isSamoaOverlay = true;
}
loadLayerControl(layerControl);
//set opacity from slider for any selected overlays
var val = $('#basemapslider').slider("option", "value");
map.eachLayer(function(layer){
if (layer.isSamoaOverlay) {
layer.setOpacity(val);
}
});
});
function loadLayerControl(lc) {
//remove twice in case both layer both a base and overlay option
for (var i = 0; i < layers.length; i++) {
lc.removeLayer(layers[i]);
lc.removeLayer(layers[i]);
}
// must add base first to get base at bottom of z order
for (var i = 0; i < layers.length; i++) {
if (!layers[i].isSamoaOverlay) {
lc.addBaseLayer(layers[i], layers[i].samoaName);
}
}
// finally add overlays
for (var i = 0; i < layers.length; i++) {
if (!layers[i].isSamoaBase) {
lc.addOverlay(layers[i], layers[i].samoaName);
}
}
}
})