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"></div>
</body>

CSS

html,body
{width:100%;
height:100%;}
#map
{
  height:100%;
  width:100%;
}
.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;

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 ?...