Leaflet中具有动态数据的Choropleth映射

Question

I am struggling with Javascript and Leaflet tryind to realize a dashboard. I am trying to realize a choropleth map following this tutorial . I need to change dynamically data display on map according to two select menu.

Selects:

<select class="c-select" id="methodSelected" name="methodSelected" required>
</select>
<select class="c-select" id="yearSelected" name="yearSelected" required>
</select>

I am holding changing on selects with

$("#methodSelected").change()
$("#yearSelected").change()

both are declared inside a

$(document).ready(function() {}

In this block I also declare the required variables and functions

var choroplethMap;
var q = d3_queue.queue();
q.defer(d3.json, "final2.geojson");
function ready(GeoJSON) {
    ...
    makePlaceHolderChoroplethMap();
}

makePlaceHolderChoroplethMap is like that

function makePlaceHolderChoroplethMap() {
    choroplethMap = L.map('choroplethContainer').setView([51.505, -0.09], 2);
    L.tileLayer("url", 
       {
            id: id,
            attribution: attribution,
            accessToken: accessToken
        }
    ).addTo(choroplethMap);

Now when I will change values with the two select menu I want update map, so I put into $("#yearSelected").change() a call to makeChoroplethMap() .

function makeChoroplethMap() {}

Inside this function I put code following tutorial previously linked.

The problem is that when I changed the values with that code I will re-add new layers over others previously added (Geojson, legend and control, as you can see)

So I tryed to leave only binding with data into makeChoroplethMap() ,

geojson = L.geoJson(data, 
    {
        style: style,
        onEachFeature: onEachFeature
    }
).addTo(choroplethMap);

but I recieve an error in info.addTo(choroplethMap); as t is undefined . I think because choroplethMap is not initialized. Map and select work, but controls are not displayed 'cause of error. For now (I think I breaked something because yesteday worked) also geojson layer overstay over country also if I change values with select (the previously one putted does not go off also I change values).

So my question is: how can re-bind data without re-adding also legend and other control?

Answer 1

Add the legend and the GeoJSON layer once , when you're initializing the map. If you add them in makeChoroplethMap , you'll be re- adding them.

Then, use L.GeoJSON.clearLayers() and the currently undocumented L.GeoJSON.addData() method to clear/add polygons.