modify icon size

[heliconius-maps]

Using the quakes data as an example and the code below, I wish to modify the icon size. I need to keep the rest of the code as unchanged as possible, I just want to make the icons smaller. I wish to do this because maps with many data points become excessively crowded. Can you please help?

NB I did post this issue on StackOverflow a couple of years ago, but have never received any replies.

library(leaflet)
data(quakes)
quakes<-head(quakes,10)
quakes$stations<-as.factor(quakes$stations)
map<-leaflet()
map<-addTiles(map,group = "OSM (default)")
map<-addMarkers(map,quakes$lon, quakes$lat, group = quakes$stations,
    clusterOptions = markerClusterOptions(maxClusterRadius = 5,transparent=TRUE,singleMarkerMode=TRUE,zoomToBoundsOnClick=FALSE,
        iconCreateFunction=JS(paste0("function(cluster) {
            var c = ' marker-cluster-small';
            var html = '<div style=\"background-color:rgba(","#FF00DB",")\"><span>' + cluster.getChildCount() + '</div><span>'
            return new L.DivIcon({html: html, className: 'marker-cluster' + c,iconSize: new L.Point(40, 40) });
        }"))
    )
)   

map

[micahwilhelm]

Did you find a workaround?

[rosserlab]

Yes, I did - I think I managed to do it by modifying the .css
Thanks for your response.

[micahwilhelm]

Would you care to share the modified css code, please?

[heliconius-maps]

Below are the .css parameters I tweaked. It was fiddly, and it also depends on what is being passed to the iconCreateFunction. But in the end I managed to get the desired results.

.marker-cluster {
	background-clip: padding-box;
	border-radius: 20px;
	}
.marker-cluster div {
	width: 22.5px;
	height: 22.5px;
	margin-left: 3.75px;
	margin-top: 3.75px;

	text-align: center;
	border-radius: 15px;
	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
	}
.marker-cluster span {
	line-height: 22.5px;
	}