Leaflet for R: How to customize the coloring of clusters?

Question

How do I customize the coloring of the addMarkers function in the leaflet package for R?

The default coloring for clusters is:

1-10 Green
11-100 Yellow
100+ Red

I'd like to change the ranges and colors to something like:

1-100 Red
101-1000 Yellow
1000+ Green

JS Leaflet has this capability: https://github.com/Leaflet/Leaflet.markercluster#customising-the-clustered-markers

Is this possible through a markerClusterOptions parameter in the R package?

leaflet(quakes) %>% addTiles() %>% addMarkers(
  clusterOptions = markerClusterOptions()
)

not quite the same, but I recently wanted to do the same thing and found that the github version had recently added the option to make custom icons, so you can at least color the markers easily. — Rorschach, Nov 08 '15 at 23:36

score 13 · Accepted Answer · answered Nov 09 '15 at 10:43

13

You can use the iconCreateFunction in the markerClusterOptions to create your own custom icon function to display the cluster markers.

In your example, you can maybe just modify the default marker function (found here) and just modify the if/else loops setting the CSS class of the markers. The default CSS that colors the markers can be found here. You can create your own classes if you want more customisation.

Here's a code example (large is red coloring, medium is yellow, and small is green so I just switched the default code around to match your conditions):

library(leaflet)
leaflet(quakes) %>% addTiles() %>% addMarkers(
  clusterOptions = markerClusterOptions(iconCreateFunction=JS("function (cluster) {    
    var childCount = cluster.getChildCount(); 
    var c = ' marker-cluster-';  
    if (childCount < 100) {  
      c += 'large';  
    } else if (childCount < 1000) {  
      c += 'medium';  
    } else { 
      c += 'small';  
    }    
    return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });

  }"))
)

answered Nov 09 '15 at 10:43

NicE

21,165
3
51
68

Perfect, thanks! This is also a great answer to "how do you insert javascript code directly into leaflet", or any htmlwidgets it would seem – Tim_K Nov 09 '15 at 14:02
If I wanted to change the CSS behind the cluster classes, how would I do that from the R interface? For example, If I wanted to remove the opacity from .marker-cluster-small { background-color: rgba(181, 226, 140, 1.0); } .marker-cluster-small div { background-color: rgba(110, 204, 57, 1.0); } – Tim_K Nov 10 '15 at 16:24
One way to do it is to manually change the default CSS file. On OSX, this is under /Library/Frameworks/R.framework/Versions/3.2/Resources/library/leaflet/htmlwidgets/plugins/Leaflet.markercluster (you can find your R library path by using .libPaths()). This works but I'd like to have a way to do it on a case-by-case basis from within the R package, if possible. Seems like there might be a way using htmlwidgets but I have not found it yet – Tim_K Nov 10 '15 at 19:14
Interesting secondary question, maybe post another question on SO, not sure how to change the CSS of the leaflet map if you are not in a shiny app. – NicE Nov 10 '15 at 21:50
2

Secondary question about customizing CSS for Leaflet for R can be found here: http://stackoverflow.com/questions/33634901/leaflet-for-r-how-to-change-default-css-cluster-classes/33647955#33647955 – Tim_K Nov 11 '15 at 15:02

Leaflet for R: How to customize the coloring of clusters?

1 Answers1

Linked