zooming - Leaflet Layer Groups with one layer representing a custom overlay specified for different zoomlevels

Question

I made a leaflets map with three different layers [osm, highresSatellite, Sentinel2]. I want the map to have a layer control where one can choose between four different layers

1. osm
2. higresaerial
3. Sentinel2
4. Overlay

The fourth layer Overlay should display Sentinel2 up to zoom level 13 and then switch to highresaerial layer until zoom level 22 I managed to import the different layer and create the overlay via selective diplay based on the current zoomlevel.

My Question is as follows:

How do I add a LayerControl to switch between and show my four different layers. Right now I left out this function because I don't know how to implement this. Currently the map only consists of the overlay. I added some general code parts for the LayerControl.

    var osm = L.tileLayer("http://osm/wmts/OpenStreetMap/webmercator/{z}/{x}/{y}.png", {
                                                attribution: 'OSM Streetmaps',
                                                tileSize: 256,
                                                maxZoom: 22,
                                                minZoom: 0
                                        }),
                        oneatlas = L.tileLayer("http://highressatimages{z}/{y}/{x}.jpeg", {
                                                attribution: 'OneAtlas',
                                                tileSize: 256,
                                                maxZoom: 22,
                                                minZoom: 0,
                                                maxNativeZoom: 17
                                        }),
                        s2 = L.tileLayer.wms("https://Sentinel2/WmsServer?", {
                                                layers: '0',
                                                minZoom: 0,
                                                maxZoom: 20,
                                                maxNativeZoom:20
                                        });
                                       
                var map = L.map('map', {
                        center: [50,13],
                        zoom: 4,
                        layers:[s2]
                        });
                       
                var baseMaps = {
                        'OSM': osm,
                        'OneAtlas': oneatlas,
                        's2': s2,
                        'overlay': ?overlay?
                        };
               
                /*        
                var drawnItems = new L.FeatureGroup();
                map.addLayer(drawnItems);
               
                var options = {
                        position: 'topleft',
                        draw: {
                                marker: false,
                                polyline: false,
                                polygon: {
                                        allowIntersection: false,
                                        drawError: {
                                                color: '#e1e100',
                                                message: 'Dont'
                                        },
                                        shapeOptions:{
                                        color: '#bada55'
                                        }
                                },
                                circle: false,
                                rectangle: {
                                        shapeOptions: {
                                                clickable: false
                                        }
                                },
                                circlemarker:false,
                        },
                        edit:{
                                featureGroup: drawnItems,
                                remove: true
                        }
                };
               
                var drawControl = new L.Control.Draw(options);
       
       
                map.addControl(drawControl);
               
                */

                map.on(L.Draw.Event.CREATED, function(evt) {
                        var type = evt.layerType,
                                layer = evt.layer;

                        drawnItems.addLayer(layer)
                       
                });
                map.on('zoomend',function(){
                        var zoomlevel = map.getZoom();
                        if (zoomlevel <14){
                                if (map.hasLayer(oneatlas)){
                                        map.removeLayer(oneatlas);
                                }
                                map.addLayer(s2);
                       
                        }
                        if (zoomlevel >=14){
                                if (map.hasLayer(s2)){
                                        map.removeLayer(s2);
                                }
                                //map.addLayer(s2);
                                map.addLayer(oneatlas);
                        }
                        console.log("current zoomlevel=" + zoomlevel)
                });
               

                //L.control.layers(baseMaps).addTo(map);

question from:https://stackoverflow.com/questions/65921448/leaflet-layer-groups-with-one-layer-representing-a-custom-overlay-specified-for

Answer 1

Waitting for answers