CODEWITHSUNDEEP
javascriptjqueryhtmlleaflet
Felipe Piña
Felipe Piña

Reputation: 99

Update map panes and legend dynamically on leaflet

I'm trying to use leaflet to make an interactive map (like a choropleth) using data from geojson files and I've a problem to update data and legend on the map, dynamically.

My code use a leaflet map with a mapbox-light baselayer, a dropdownlist and a legend. Two jsons files are loaded and I use two map panes to use them and set their z-index. Dropdownlist has two options and is used to change the selected geojsons to expand this example; the real case has 25 values to choose.

I use $(id_dropdownlist).change to make everything. If ddl change:

When I make the first change in the ddl works fine: select geojsons files, load and color polygons. My problem appears from the second change onwards, after remove panes: geojsons are loaded successfully but these are not showed/colored on my map.

My amateur debugging detect than in the first change the div leaflet-pane element has the geojsons values, but from the second change onwards the same div leaflet-pane has not data.

Also, I want to update the legend at same time after load the geojsons, but I do not have any idea how to make that.

Here is a functional example in JSFiddle.

If someone could help me step by step, for learn it, I would be very grateful. If panes are not the way to do this, or another way to do this better, please tell me how.

Upvotes: 0

Views: 2440

Answers (1)

ghybs
ghybs

Reputation: 53225

When user changes the selection of your drop down list, you first try to clear your map by removing your previously created custom panes from the DOM.

There is a very high chance Leaflet does not expect such fiddling with its panes, even if they are custom. That is probably why when you create new custom panes with the same names, Leaflet does not reference them correctly, hence it does not display your new layers in those new panes.

For adding and removing your layers dynamically to / from the map, you should simply use Layer Groups instead. In particular, it provides you with a clearLayers method that does what you are trying to achieve.

Therefore, you just add your polygons and markers to that Layer Group (instead of directly to the map), so that you can easily clear them when the user selects a new value. The custom panes remain unaffected.

// Initialize the Layer Group.
// Add it to map so that its children will appear on map.
var layerGroup = L.layerGroup().addTo(map);

// On <select> "change" event:
layerGroup.clearLayers();

// When you have retrieved your data and are ready to convert it to layers:
L.geoJSON(data, {
  style: { // Can be a function as usual.
    pane: 'polygon'
  },
  pointToLayer: function(feature, latlng) {
    return L.circleMarker(latlng, {
      pane: 'POI'
    });
  }
}).addTo(layerGroup); // Add to layerGroup instead of directly to map.

Updated JSFiddle: https://jsfiddle.net/Ljetvd2x/4/

As for updating your legend, I am sure you should be able to find some resources on that topic, including here on SO. If you still need help, that should very probably be separated into a new post.

Upvotes: 2

Related Questions