The map slows down when zooming when there is a lot of data(5000 and more)

[bonya0329]

Can you tell me if there are alternative solutions to this problem?

[jwasilgeo]

Hi @bonya0329 I have noticed this too but didn't have any fresh solutions for how to deal with it yet. Is it possible in your map to reduce how many flow lines between origin points and destination points are shown when zooming in more?

Here's a rough code example of listening to Leaflet map zoom events, checking the zoom level (let's say at level 10; whatever makes sense for your map), and then selecting only certain flow lines for display.

map.on("zoomend", function() {
  const newZoomLevel = map.getZoom();

  if (newZoomLevel >= 10) {
    // zoomed in at or past the zoom level 10 threshold
    // select only some flow lines for display
    // (but will also be called unfortunately anytime the zoom changes at or below 10)
    yourCanvasLayer.selectFeaturesForPathDisplay(selectionFeatures, selectionMode);
  } else {
    // zoom level changed and it is above 10
    // select all flow lines for display
    // (but will also be called unfortunately anytime the zoom changes above 10)
    yourCanvasLayer.selectAllFeaturesForPathDisplay();
  }
});

But please note this will fire and occur quite often, and the zoom event listening approach could be improved to only call yourCanvasLayer methods one time at or below 10, and only one time above 10.

https://leafletjs.com/reference.html#map-zoom

https://github.com/jwasilgeo/Leaflet.Canvas-Flowmap-Layer#method-summary

What do you think?