How to use ui-leaflet and Markercluster to change color of markercluster?

Question

I have to create a non-default markerCluster color. I have checked the API and it seems that they suggest modifying a divIcon after creation (I believe, I am learning Leaflet, ui-leaflet, MarkerCluster all at the same time) to something like this:

var markers = L.markerClusterGroup({
iconCreateFunction: function(cluster) {
    return L.divIcon({ html: '<b>' + cluster.getChildCount() + '</b>' });
}
});

https://github.com/Leaflet/Leaflet.markercluster

The way I was populating data was on creation, something closer to this:

layers: {
                baselayers: {
                    osm: {
                        name: 'OpenStreetMap',
                        type: 'xyz',
                        url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                        layerOptions: {
                            subdomains: ['a', 'b', 'c'],
                            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                            continuousWorld: true
                        }
                    },
                    cycle: {
                        name: 'OpenCycleMap',
                        type: 'xyz',
                        url: 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
                        layerOptions: {
                            subdomains: ['a', 'b', 'c'],
                            attribution: '&copy; <a href="http://www.opencyclemap.org/copyright">OpenCycleMap</a> contributors - &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                            continuousWorld: true
                        }
                    }
                },
                overlays: {
                    hillshade: {
                        name: 'Hillshade Europa',
                        type: 'wms',
                        url: 'http://129.206.228.72/cached/hillshade',
                        visible: true,
                        layerOptions: {
                            layers: 'europe_wms:hs_srtm_europa',
                            format: 'image/png',
                            opacity: 0.25,
                            attribution: 'Hillshade layer by GIScience http://www.osm-wms.de',
                            crs: L.CRS.EPSG900913
                        }
                    },
                    cars: {
                        name: 'Cars',
                        type: 'markercluster',
                        visible: true
                    }
                }
            },
            markers: {
                m1: {
                    lat: 42.20133,
                    lng: 2.19110,
                    layer: 'cars',
                    message: "I'm a moving car"
                },

which I kinda stole from a similar (and forked break off) site: https://github.com/tombatossals/angular-leaflet-directive/blob/master/examples/0216-layers-overlays-markercluster-example.html I was attempting to add an icon property with separate colors to no avail. I am attempting to change the color when multiple types are clustered together. Any help would be appreciated.

Thanks in advance.

Sorry @muzaffar I cannot. Its a proprietary issue. I will look into make a generic example, but that may take some time. Thanks for the response though. — jsNoob

jsNoob jsNoob · Accepted Answer · 2017-01-27T17:59:57

So the big issue was my understanding of how to employ the divIcon was flawed. I assumed that I needed to change the color after instantiation which is not correct. It was a simple matter of just adding the code to my initial service:

               cars: {
                    name: 'Cars',
                    type: 'markercluster',
                    visible: true,
                    layerOptions:{
                          iconCreateFunction: function(cluster) {
                                return L.divIcon({ html: '<b>' +cluster.getChildCount() + '</b>' });

                    }
                }

I didn't relize that the api functionality that they provided were really just modifying the already existing object (more accurately changing the instantiation of an object). If you want to instantiate it, the variable names need just be added under this layerOptions key and simply find the variable on the API.

How to use ui-leaflet and Markercluster to change color of markercluster?

1 Answers