How to change zoom factor and centre position on clicking the radio-button of a overlayer

Question

I have a base folder with four overlayers in a GroupedOverlays.

These layers cannot be shown at the same time because I consciously use the radio button.

The range of the layers is different. They all start with Schiphol Airport as a starting point, Layer 1 places markers on the world map in countries I've visited (whole world) Layer 2 places markers in cities I've visited (Europe) Layer 3 places markers on places where I went for a walk (Netherlands) Layer 4 place markers at locations where I spent a weekend (BeNeLux)

I am looking for how to adjust the zoom factor and the center position when clicking in the LayerControl on one of these 4 layers.

I have tried various options, but nothing worked and I could not find the right option anywhere.

Learnt how to adjust the zoom factor and center position, but not how to control it when you click on one of the four radio buttons.

<script>
var Esri_WorldStreetMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
    minZoom: 16,
    maxZoom: 40,
    attribution: 'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
});
var Esri_NatGeo = L.tileLayer('https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
    minZoom: 2,
    maxZoom: 16,
    attribution: 'Tiles &copy; Esri &mdash; National Geographic, Esri, DeLorme, HERE, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC'
});

var map = L.map('map', {
    messagebox: true,
    fullscreenControl: true,
    layers: [Esri_NatGeo, ReizenL],
    center: [11.7500335, 4.763746],
    minZoom: 3,
    maxZoom: 20,
    zoom: 3,
        });

var schaallat = L.control.betterscale({
    metric: true
}).addTo(map);

var navbar = L.control.navbar().addTo(map);
var daynight = L.terminator().addTo(map);
var Legend =  new L.Control.Legend({
        position: 'topleft',
        collapsed: true,
        controlButton: {
            title: "<?php printf($Legname) ?>"
        }
});
//map.addControl(Legend);

var Download =  new L.Control.Download({
        position: 'topleft',
        collapsed: true,
        controlButton: {
            title: "Downloads"
        }
});
//map.addControl(Download);

$(".legend-container").append( $("#legend").css('visibility', 'visible'));
$(".legend-toggle").append( "<i class='legend-toggle-icon'></i>");

$(".download-container").append( $("#download").css('visibility', 'visible'));
$(".download-toggle").append( "<i class='download-toggle-icon'></i>");

// zoom the map to the polyline
map.addLayer(Esri_NatGeo);
var baseMaps = {
    "ESRI-National Geo": Esri_NatGeo    
};
//var overlayMaps 

var groupedOverlays = {
    "Reizen": {
        "<?php printf($legend02) ?>": ReizenL,
        "<?php printf($legend03) ?>": ReizenS,
        "<?php printf($legend04) ?>": ReizenH,
        "<?php printf($legend05) ?>": ReizenW
    }
}; 

    
 var options2 = {
      // Make the "Reizen" group exclusive (use radio inputs)
      exclusiveGroups: ["Reizen"],
      // Show a checkbox next to non-exclusive group labels for toggling all
      groupCheckboxes: true
    };

    // Use the custom grouped layer control, not "L.control.layers"
    var layerControl = L.control.groupedLayers(baseMaps, groupedOverlays, options2);
var name;


//L.control.groupedLayers(baseMaps, overlayMaps,options).addTo(map);

map.addControl(layerControl);
map.fitBounds(active_event_layer.getBounds());
map.on('overlayadd', function(e){
   name = e.name;
   echo(name);
});
    </script>
</body>
</html>

See: https://davidbrouwer.nl/WereldMarkers.php?taal=gb&width=1920&hight=1080

---

ghybs

---

I pasted your code into my code but when I switch between the overlayer nothing changes. The marks will clump around the origin just as they are now. I also don't understand how the script would be triggered if I switch between the layers. And then I also don't understand what exactly the function(e) does. I assume the e should get the value 0, 1, 2 or 3 when I switch layers. And so I suspect that the IF function checking of one of the four layers is equivalent to e-layer.

If so then the setView of "map" should be adjusted to the centre coordinates and zoom adjusted at:

ReizenL ==> setView(11.7500335, 4.763746, 3);

ReizenC ==> setView(11.7500335, 4.763746, 15);

ReizenH ==> setView(11.7500335, 4.763746, 20);

ReizenW ==> setView(11.7500335, 4.763746, 10);

The problem is solved, I have marked two rules that caused the rule to not work.

• // map.addControl(layerControl);
• //map.fitBounds(active_event_layer.getBounds());

I also changed "switch by e.id" to "switch by e.name". The leaflet_id is not reliable.

map.on('overlayadd', function(e) {
//   alert(e.name);
    switch (e.name){
        case "<?php printf($legend02) ?>":
            map.setView([<?php printf($XcoorL) ?>,<?php printf($YcoorL) ?>], 3);
        break;
        case "<?php printf($legend03) ?>":
            // map.setView([48.01932, 5.36133], 5);
            map.setView([<?php printf($XcoorS) ?>,<?php printf($YcoorS) ?>], 5);
        break;
        case "<?php printf($legend04) ?>":
            //map.setView([52.30512, 4.77081], 9);
            map.setView([<?php printf($XcoorH) ?>,<?php printf($YcoorH) ?>], 9);
        break;
        case "<?php printf($legend05) ?>":
            //map.setView([50.80593, 4.68567], 8);
            map.setView([<?php printf($XcoorW) ?>,<?php printf($YcoorW) ?>], 8);
        break;
    }
});

Answer 1

Assuming ReizenL/S/H/W are your Layer Groups (already defined elsewhere), you could check in your "overlayadd" event listener if the added layer is one of them, then modify the map view to that layer bounds.

Something in the lines of:

map.on("overlayadd", function (e) {
  var layer = e.layer;
  if ([ReizenL, ReizenS, ReizenH, ReizenW].includes(layer)) {
    map.fitBounds(layer.getBounds());
  }
});