[GIS] Leaflet.markercluster Gives slow performance when zooming

leafletmarkers

I have used leaflet marker cluster to render the geojson.

I am rendering 1 million geojson data. This gives better performance when render the data, but when zooming the map, gives very slow performance.

How to avoid this issue?

I am using the events zoomstart and zoomend to show the spinner.

Even zoomstart starts only after 2 or 3 seconds.
This is starting after 6 or 8 seconds.

 map.on("zoomstart", function (e) {map.spin(true);});
 map.on("zoomend", function (e) { map.spin(false); });

Best Answer

Use a different clustering plugin.

There are 10 listed for clustering/decluttering.

Related Solutions

Leaflet – Joining CSV to GeoJSON for Improved Performance

The Array.prototype.filter method is really slow. In cases where you can rely on an array being predictably formatted (as is presumably the case with CSV data returned from Papa), you are better off just using a for loop to iterate over it yourself. Here is a function that takes the GeoJSON feature properties, Papa Parse data, and a join field name as inputs, then joins the data much more quickly than the array filter method:

function featureJoinByProperty(fProps, dTable, joinKey) {
  var keyVal = fProps[joinKey];
  var match = {};
  for (var i = 0; i < dTable.length; i++) {
    if (dTable[i][joinKey] === keyVal) {
      match = dTable[i];
      for (key in match) {
        if (!(key in fProps)) {
          fProps[key] = match[key];
        }
      }
    }
  }
}

To perform the join in your example, you would just use:

wellZoneParcels.eachLayer(function(layer) {
  featureJoinByProperty(layer.feature.properties, results.data, "PARCELID");
});

Here is a fiddle of this working with some sample data hosted on Dropbox:

http://fiddle.jshell.net/nathansnider/2qrwecvo/

This parcel data is not very well-cleaned (I think there are a lot of duplicate polygons), but it does perform the join (with ~5300 features and 8 fields in the CSV) about 5 times faster than the array filter method.

[GIS] Speeding up Leaflet with GeoJSON data app

I finally solved this by adding in the filter a check to see if points are inside the map's view box, so only points in the current view are rendered.

Best Answer

Related Solutions

Leaflet – Joining CSV to GeoJSON for Improved Performance

[GIS] Speeding up Leaflet with GeoJSON data app

Related Question