Using clustering in grav-plugin-leaflet?

Support Plugins
1

Hi,

does anyone has implemented leaflet clustering in the leaflet plugin yet?

I would like to show tens of thousands of data points resulting in the plugin stop saving and working.

Visualizing few points is working quite well. Therefore I was thinking about to implement clustering and wonder whether someone has this implemented successfully and can give advice to do so?

All the best,
SFux

2

I’ve used this Leaflet add-on but not in Grav and I have never used Grav’s leaflet plugin either.

Sorry if I am telling you what you already know. To use Leaflet.markercluster, you need to include the JS library. Let’s just do that the simplest way for this example, by including the script from CDN (https://unpkg.com/leaflet.markercluster@1.4.1/dist/ as per its README). So you want a <script src=" .." .. ></script> in the HTML head.

OK having started to talk you through this, I can see that this plugin is not like most plugins and seems like it would be very difficult to extend! It also looks like you can only add one marker per map.

Could you explain how you are using this plugin to get more than one marker on a map? That might help me see something I’m missing and I may be able to help you from there.

You can probably override the Twig template in the plugin, but I don’t see how you can:

  • get more than one marker into the Twig function
  • avoid harcdoding your cluster information into the template (it would be much better to be able to pass these variables when calling the Twig function)
3

Hi hughbris,
I hope that I do not mix it up. The way I have noted different points/marker is:

[map-leaflet lat=10 lng=0 zoom=2 mapname=test style=test]
[a-markers icon=""]
[{ "lat": 20.8, "lng": -159.7, "text": 49 },
{ "lat": 18.3, "lng": -173.3833, "text": 32 },
{ "lat": 19.4667, "lng": -174.5833, "text": 52 },
{ "lat": 16.75, "lng": -176.4, "text": 50 },
{ "lat": 19.0333, "lng": -177.3167, "text": 46 },
{ "lat": 32.5833, "lng": -132.5, "text": 50 },
{ "lat": 0.6667, "lng": 169.2833, "text": 79 }
....
]
[/a-markers]
[/map-leaflet]

Or do you mean differently styled markers like shown here?

Is that any help for helping me? :=)

4

Ah, you’ve been talking about Map Marker leaflet when I thought you were talking about Grav Leaflet plugin!

From a really quick look, it seems you could override those templates to be more like the examples in Leaflet.markercluster. Avoiding hardcoding would require hacking the plugin to allow extra shortcode options.

Also you need to make sure that the script (maybe from CDN) is included somewhere in your Twig (assets.AddJs() is much better and more flexible than adding a raw script tag).