Leaflet.js: нажмите на многоугольник, чтобы удалить слой и изменить его на новый.

Я некоторое время делал карту Leaflet и пытался выяснить, как сделать так, чтобы, если я щелкну один из полигонов в слое GeoJSON, он удалит текущий слой и заменит его другим слоем.

Точно так же, если я щелкну по нему еще раз, он удалит новый слой и заменит его предыдущим слоем.

Я пытался возиться с разными вещами, но ничего не работает. Это одна из моих недавних попыток.

<script type="text/javascript" src="provinces.js"></script>

<script>

    var map = L.map('map').setView([-2.5, 119], 5);

    L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://cartodb.com/attributions">CartoDB</a>',
        subdomains: 'abcd',
        maxZoom: 19
    }).addTo(map);


    // get color depending on population density value
    function getColor(d) {
        return d > 5000 ? '#800026' :
                d > 2500  ? '#BD0026' :
                d > 1000  ? '#E31A1C' :
                d > 500  ? '#FC4E2A' :
                            '#FFEDA0';
    }

    function style(feature) {
        return {
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '',
            fillOpacity: 0.7,
            fillColor: getColor(feature.properties.kode)
        };
    }

    function highlightFeature(e) {
        var layer = e.target;

        layer.setStyle({
            weight: 5,
            color: '#ccc',
            dashArray: '',
            fillOpacity: 0.7
        });

        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
            layer.bringToFront();
        }

        info.update(layer.feature.properties);
    }

    var geojson;

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

    function zoomToFeature(e) {
        map.fitBounds(e.target.getBounds());
    }


    function addNewBoundary(e) { // this function doesn't do anything
            var newLayerBoundary = new L.geoJson();
            newLayerBoundary.addTo(map);

            $.ajax({
            dataType: "json",
            url: "province-details.geojson",
            success: function(data) {
                $(data.features).each(function(key, data) {
                    newLayerBoundary.addData(data);
                });
            }
            }).error(function() {});
    }

    function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: clearLayers // with this it just clears the layers before being clicked
    });
}

    geojson = L.geoJson(provinces, {
        style: style,
        onEachFeature: onEachFeature
    }).addTo(map);

</script>