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()">Synchronize Leaflet LayerControl with Legend
    <div id="map" style="width:500px; height: 400px"></div>
</body>

CSS

.info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}
.info h4 {
    margin: 0 0 5px;
    color: #777;
}
.legend {
    text-align: left;
    line-height: 18px;
    color: #555;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}

JavaScript

var map, legend1, legend2, debugvar, others,legend1_active,legend_active;

 function init() {
     map = L.map('map', {
         center: [43.463, 4.915],
         zoom: 13
     });
     // control that shows state info on hover
     var info = L.control({
         position: 'bottomright'
     });

     info.onAdd = function (map) {
         this._div = L.DomUtil.create('div', 'info');
         this.update();
         return this._div;
     };
     info.update = function (props) {
         this._div.innerHTML = '<h3> Information site</h3>' + (props ?
             '<b>' + props.commune + '</b><br>  Ref : ' + props.ref + '<br /> Profondeur: ' + props.profondeur + ' cm | Horizons : ' + props.horizon + '' : 'Selectionner un point');
     };

     function highlightFeature(e) {
         var layer = e.target;
         info.update(layer.feature.properties);
     }

     function resetHighlight(e) {
         //  geojson.resetStyle(e.target);
         info.update();
     }

     function onEachFeature(feature, layer) {
         var popupContent = "";
         if (feature.properties && feature.properties.commune) {
             popupContent += "<b>";
             popupContent += feature.properties.commune;
             popupContent += "</b> | Ref : ";
             popupContent += feature.properties.ref;
             popupContent += "<br> Profondeur : ";
             popupContent += feature.properties.profondeur;
             popupContent += "cm | Horizons : ";
             popupContent += feature.properties.horizon;
             popupContent += "<br>Type d'occupation: ";
             popupContent += feature.properties.occupation;
         }
         layer.on({
             mouseover: highlightFeature,
             mouseout: resetHighlight
         });
         layer.bindPopup(popupContent);
     }

     function getColor(d) {
         return d > 40 ? '#800026' : d > 30 ? '#BD0026' : d > 25 ? '#E31A1C' : d > 20 ? '#FC4E2A' : d > 15 ? '#FD8D3C' : d > 10 ? '#FEB24C' : d > 5 ?...