JSFiddle - React, Tailwind, and code Playground

by Thomas B.

HTML

<script src="http://www.institut-ecocitoyen.fr/pollution/sol/bdf/geojson.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.css">
<body onload="init()">
    Leaflet on overlayadd fitBounds to FeatureGroup
    <div id="map" style="width:500px; height: 400px"></div>
</body>

JavaScript

var map,legend1,legend2,debugvar, others;

function init()
{
    map = L.map('map', {
            center: [50.736322, 13.252174],
            zoom: 9
        });
        // control that shows state info on hover
      

        var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        var osmAttribution = 'Map data &copy; <a href="http://www.osm.org">OpenStreetMap</a> | Data &copy; Institut Ecocitoyen';
        var osmTileLayer = L.tileLayer(osmUrl, {
            attribution: osmAttribution
        }).addTo(map);

      
    var eppendorf = L.marker([50.877321, 13.547055]).bindPopup('Eppendorf'),
        saidenbachNorth = L.marker([50.937448, 13.843383]).bindPopup('Saidenbach'),
        saidenbachEast =  L.marker([50.936322, 13.752174]).bindPopup('Saidenbach'),
        zoeblitz = L.marker([50.957581, 13.840406]).bindPopup('Zöblitz');

        var erzgebirge = new L.featureGroup([eppendorf, saidenbachNorth, saidenbachEast, zoeblitz]);
        var overlays = {
            "Erzgebirge": erzgebirge
        };
        var test = new L.LatLng(50.777321, 13.247055);
       
        map.on('layeradd',function(e){
            //console.log(e.layer._layers);
            console.log(e);
        }) ;  
        var layersControl = new L.Control.Layers(null,overlays);
		map.addControl(layersControl);

        // Add and remove layers
        map.on('overlayadd', function (eventLayer) {
            debugvar=eventLayer;
            console.log(eventLayer);
    map.fitBounds(eventLayer.layer);
            
        });


 // Add and remove layers
        map.on('overlayremove', function (eventLayer) {
            debugvar=eventLayer;
          
        });

    
    // zum Debuggen / Konsolemeldungen lesen muss in den ChromeDevTools der Frame auf result(fiddls.jshell,net) eingestellt sein.
       
    
    
	
    }