PruneCluster and React.js

Question

Some used them together?

Maybe there is a component for the PruneCluster?

It will be great to see some examples/tutorials....

Answer 1

Download the prunecluster from npm.

Copy it to your local js directory.

add the line

exports.PruneCluster = PruneCluster;

Then start using it :

var P = require('../Lib/PruneCluster');
this.clusterGroup = new P.PruneClusterForLeaflet();

The author don't have plans to make it React compatible. https://github.com/SINTEF-9012/PruneCluster/issues/102

EDIT:

PruneCluster should use as it is in the official documentation. The problem is, leaflet is mounted as react component.

The better answer is to expose leaflet map object from the react component.

This way you can use prunecluster as it is.

The example above is bad, see this Example which shows how to access leaflet map, which is half the solution. From there, just use Prunecluster as normal JS and create layers that you then add to leaflet map object that you got from my example.

Answer 2

I would suggest trying this React component https://yuzhva.github.io/react-leaflet-markercluster

Those React component have similar functionality with PruneCluster.