The map shows traffic accidents recorded in Oslo, Norway, for the year 2013.
The Leaflet Markercluster plugin is wonderful. Since the markerclusters are divIcons you can put whatever you want inside them using the iconCreateFunction. I wanted my clusters to reveal more information than just the marker count and figured a pie chart would do the job. So I told the iconCreateFunction to do some D3 magic and this is the result.
The example is a bit more complicated than necessary due to how my dataset is structured. But if you take a look at the defineClusterIcon() function you'll see that I use d3.nest() to build a dataset for the pie chart based on a given property from all the cluster's children. Then I pass this dataset over to the bakeThePie() function together with instructions on how to style the chart. The function returns svg markup which in turn is placed inside the divIcon.
Feel free to suggest improvements.
Hello, very good tutorial thanks
I try to adapt your code but i don't understand many points ( specially the pathClassFunc & pathTitleFunc function and what argument is provided ) .
My markers are from ajax call and i don't get property field for them like you have in your geojson. I inspect the marker object and i found a field who let me know the type of each marker (iconUrl).
So i iterate on the cluster child and for the field iconUrl count if it's 'Botanique', 'Zoologie' or 'Paleontologie'.
So i get an array like this :
var myData = {
'Botanique' : hcount ,
'Zoologie' : zcount ,
'Paleontologie' : pcount
};
now i try to make the bakeThePie function but i failed.
i make a stackover flow post. maybe you can advice me. : http://stackoverflow.com/questions/28828870/create-custom-leaflet-markercluster-svg-icon
thanks