Changing Leaflet Markercluster Icon Color, Inheriting the Rest of the Default CSS Properties

Changing leaflet markercluster icon color, inheriting the rest of the default CSS properties

your iconCreateFunction should look some thing like this

iconCreateFunction: function (cluster) {
 var childCount = cluster.getChildCount();
 var c = ' marker-cluster-';
 if (childCount < 10) {
   c += 'small';
 } 
 else if (childCount < 100) {
   c += 'medium';
 } 
 else {
   c += 'large';
 }

 return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', 
  className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
 }

and give css some thing like this

.marker-cluster-small {
background-color: rgba(218, 94, 94, 0.6);
}
.marker-cluster-small div {
background-color: rgba(226, 36, 36, 0.6);
}
.marker-cluster-medium {
background-color: rgba(241, 211, 87, 0.6);
}
.marker-cluster-medium div {
background-color: rgba(240, 194, 12, 0.6);
}

.marker-cluster-large {
background-color: rgba(253, 156, 115, 0.6);
}
.marker-cluster-large div {
background-color: rgba(241, 128, 23, 0.6);
}

see the below plunker for complete working example

https://plnkr.co/edit/GvDbB1rzIZ4bvIkQjM0p?p=preview

leaflet markercluster single marker color

Your single black marker is just your normal marker, outside any cluster since it is far away from other markers.

If you want to replace the visual appearance of ALL your markers, including when they do not cluster (i.e. when they are shown as single markers), you can conveniently use the singleMarkerMode option of MarkerCluster plugin:

var clusterGroup = L.markerClusterGroup({
    singleMarkerMode: true,
    iconCreateFunction: function(cluster) {
            // your code
        });
    }
})

This will override the icon of all your markers, so that they look like clusters of size 1.

How do I change the color of links in a leaflet container, without changing the zoom buttons' color

The simpelst way would be to apply the a style only to childs of the section.

In your html add a class or id to the section element: <section id="wrapper"> and then apply the styles only to the #wrapper childs:

#wrapper {
    (styling for the container)
}
#wrapper a:link {
    color:gold;
}
#wrapper a:visited {
    color:pink;
}

Another way would be to overwrite the zoom button styles:

.leaflet-control-zoom  a:link, .leaflet-control-zoom  a:visited {
   color: black;
}

Helpful Docs: Selectors Explained, All Selectors

How to assign different colors to multiple markercluster groups?

I haven't tried it this, but here's what I recommend attempting:

1. Instead of returning L.divIcon() from your function, get the default icon by calling _defaultIconCreateFunction() on your markerClusterGroup, e.g., trucksGroup._defaultIconCreateFunction(cluster).
2. Add a new class to that default icon to denote what group it's in. E.g., icon.options.className += ' trucks-group'.
3. Add new styles in your CSS for .truck-group.marker-cluster-small, .truck-group.marker-cluster-medium, etc.

Putting the first two steps together:

var trucksGroup = L.markerClusterGroup({
    iconCreateFunction: function(cluster) {
        var icon = trucksGroup._defaultIconCreateFunction(cluster);
        icon.options.className += ' trucks-group';
        return icon;
    }
});

var carsGroup = L.markerClusterGroup({
    iconCreateFunction: function(cluster) {
        var icon = carsGroup._defaultIconCreateFunction(cluster);
        icon.options.className += ' cars-group';
        return icon;
    }
});

markerclustererplus css change on hover

You may set the class of the div directly:

c.clusterIcon_.div_.className='clusterHover'

But it would be much easier when you use the :hover-pseudo-class

.cluster:hover {
    /* some styles */
}

Problems with syntax dynamically setting icon value in leaflet

You have to create all the L.Icon objects you will need and use the onEachFeature callback (see GeoJson) to change the marker icon according to the geojson property.

function onEachFeature(feature, layer) {
  if(feature.properties.icon && feature.properties.icon == "Red") { // Red is the text in the property
    layer.setIcon(Red); // Red is the L.Icon object you have created beforehand
  }
}

See example

---

Related Topics