CODEWITHSUNDEEP
javascriptgoogle-mapsleafletmapboxmarkerclusterer
Biribu
Biribu

Reputation: 3833

Multiple styled clusters in a map

I need to show many different points in a map. Till now, I used to create map pages with google maps. I have already created one page with a cluster but now I need more. I need something like: https://www.mapbox.com/mapbox.js/example/v1.0.0/markercluster-multiple-groups/

But I haven't found this in google maps. I have a problem with mapbox due I think it is not free so my company would have to pay for it. Is this possible in google maps? Or in leaflet?

I've already done some things with leaflet, if this is possible, I could use that. But I haven't found anything for leaflet neither. Could you point me to some tutorial or pages in which this kind of maps are shown?

Upvotes: 0

Views: 903

Answers (2)

Michał Grzejszczak
Michał Grzejszczak

Reputation: 2617

I would think that the example that you posted uses markercluster, Leaflet plugin. Mapbox is a well synchronized fork of Leaflet, so you can use most of Leaflet plugins with it.

In the example, this code creates a group of a color. Vanilla Markercluster plugin seems to be used for that.

function makeGroup(color) {
  return new L.MarkerClusterGroup({
    iconCreateFunction: function(cluster) {
      return new L.DivIcon({
        iconSize: [20, 20],
        html: '<div style="text-align:center;color:#fff;background:' +
        color + '">' + cluster.getChildCount() + '</div>'
      });
    }
  }).addTo(map);
}

Look at Markercluster docs and the exmaple you mention and you should be able to build your own marker groups.

Upvotes: 1

Matej P.
Matej P.

Reputation: 5383

Did you try the Marker Clusterer Plus library from the Google Maps Utility Library V3? The 'Advanced Example' on the How-to Page even demonstrates custom styling for the cluster markers.

Upvotes: 1

Related Questions