javascript - Cluster multiple Layers with markercluster - Stack Overflow

admin管理员组

文章数量:1430386

I am currently working on a map visualization with the Leaflet library. I am also using the markercluster plugin to cluster my points.

So my question now is the following:

I have 3 different categories of Markers in 3 different layers. For example Restaurants, Cafes and Bars Layers. And I want to bine all active Layers to a specific cluster.

At the moment the entries are clustered separately but I want to cluster them together.

The next step would be coloring the cluster according to the childMarkers. E.g. cluster includes restaurant and bar markers => half red/ half green, only restaurants => only red etc.

I hope somebody can help me to get to a solution. Thank you!

I am currently working on a map visualization with the Leaflet library. I am also using the markercluster plugin to cluster my points.

So my question now is the following:

I have 3 different categories of Markers in 3 different layers. For example Restaurants, Cafes and Bars Layers. And I want to bine all active Layers to a specific cluster.

At the moment the entries are clustered separately but I want to cluster them together.

The next step would be coloring the cluster according to the childMarkers. E.g. cluster includes restaurant and bar markers => half red/ half green, only restaurants => only red etc.

I hope somebody can help me to get to a solution. Thank you!

• javascript
• leaflet
• leaflet.markercluster

Share Improve this question Follow edited Jul 27, 2018 at 2:50 ghybs 53.6k66 gold badges8787 silver badges114114 bronze badges asked Oct 15, 2015 at 8:12 widdywiddy 44655 silver badges2222 bronze badges 3

• 1 Hello Widdy. It's been a while since you asked this question, but the map and its functionnalities, as you're describing it, should interest many people. The possibility to cluster markers and give them multiple colors if they have multiple categories seems very interesting. – blogob Commented Apr 25, 2020 at 14:27
• 1 Did the answer help you (if you can remember, after 5 years)? If so, please accept it, in order to help others. Thanks. – Mawg Commented Jan 10, 2021 at 21:42
• I could solve the problem using PruneCluster for Leaflet. This does exactly what i was looking for. Unfortunately my previous answer with that solution was deleted... sorry about that – widdy Commented Jan 15, 2021 at 16:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You mention 2 different requests in your question:

1. Having 3 different types of markers, but all should cluster together. Tricky part is if you want to hide/show a specific type (maybe through Layers Control).
2. Customizing the clusters appearance based on the number of contained markers from each type.

As for point 1, you can obviously add all 3 types of markers to the same MarkerClusterGroup, so that they can cluster together. If you already have them within different LayerGroups, you can simply do myMCG.addLayers([layerGroup1, layerGroup2, layerGroup3]); and MCG will get all individual markers added. But refrain from adding/removing those LayerGroups to/from the map later!

The difficult part is when you want to be able nevertheless to dynamically add / remove a specific type of markers from the map. Instead of doing just map.removeLayer(layerGroupX);, you would need to loop through all individual markers and remove them from your MCG, for example:

layerGroupX.eachLayer(function (marker) {
    myMCG.removeLayer(marker);
});

See also this issue on MarkerClusterGroup plugin site for the reasons and some extra examples. Do the reverse for adding markers back into your MCG.

Edit: I have published a Leaflet.FeatureGroup.SubGroup plugin since then, which addresses this exact use case. See also Using several Marker Cluster Groups displays overlapping Clusters

As for point 2, simply refer to the Customising the Clustered Markers section of the plugin documentation. Basically, you use option iconCreateFunction when initializing your MCG. You pass in a function, which takes a single argument (e.g. cluster) and you can use cluster.getAllChildMarkers(); to get the array of contained markers in the cluster being styled. Then simply iterate through this array to count the number of each type of markers, and create an icon accordingly.

You could also try this other plugin: q-cluster. But it does not animate, so it is far less eye-candy than MCG…

本文标签： javascriptCluster multiple Layers with markerclusterStack Overflow