Add Icons to Layer Control in Leaflet R - r

Question

how to add icons to the layer control in package Leaflet R?.
I made icons with the following code:
rojos <- makeAwesomeIcon(icon='ion-waterdrop', library='ion', markerColor = 'red', iconColor = 'white')
verdes <- makeAwesomeIcon(icon='ion-waterdrop', library='ion', markerColor = 'green', iconColor = 'white')
and with the following code I made the map
agua <-leaflet(options = leafletOptions(zoomControl = TRUE,
minZoom = 10, maxZoom = 17,
dragging = TRUE))%>%
addTiles()%>%
setView(-101.145,19.793, 10) %>%
# MAPAS BASE
addProviderTiles(providers$OpenStreetMap.BlackAndWhite, group = "Calles") %>%
addProviderTiles(providers$Esri.WorldImagery, group = "Imagen satelital") %>%
###########################################################################################################
addGeoJSONv2(
jsonlite::toJSON(rojo),
markerType="marker",
markerIcons = rojos,
popupProperty='popup',
labelProperty='NOMBRE DEL CUERPO DE AGUA',
group = "Agua contaminada") %>%
addGeoJSONv2(
jsonlite::toJSON(verde),
markerType="marker",
markerIcons = verdes,
popupProperty='popup',
labelProperty='NOMBRE DEL CUERPO DE AGUA',
group = "Agua no contaminada") %>%
#POLIGONOS
addPolygons(data = cuitzeo, col="green",fillColor="Transparent", group = "Cuenca de Cuitzeo",
weight = 3, opacity = 1)%>%
addPolygons(data = pol_mor, col="#000000",fillColor="Transparent",
group = "Límite Municipal Morelia",
weight = 2, opacity = 1, fillOpacity = .8) %>%
# CONTROL DE CAPAS
addLayersControl(
baseGroups = c("Calles","Imagen satelital"),
overlayGroups = c("Agua contaminada","Agua no contaminada","Cuenca de Cuitzeo","Límite Municipal Morelia"),
options = layersControlOptions(collapsed = F)
)
the result of this is the following:
I would like to get something of this style, but with my icons:

Answer 1

There is a relatively easy way to do this that uses the functionality of leaflet in r and doesn't rely on custom javascript controls: include html tags in your group names.
Instead of naming a group: "Group A", name it:
<div style='position: relative; display: inline-block' class='awesome-marker-icon-blue awesome-marker'>
<i class='glyphicon glyphicon-glass icon-black '></i>
</div>
Group A
You could create this name programmatically fairly easily based on an icon name for example. Only a few things change in each name: the colors, the library (fa, ion, glyphicon), the icon class (eg: fa-glass, ion-checkmark, glyphicon-fire), and the displayed group name.
This approach creates a layer control that looks like what you want:
To make things easier, store the names in a named list/vector and use that to define the groups when appending layers and again when defining which groups should be in the control. Here's a basic example:
library(leaflet)
IconSet <- awesomeIconList(
"Cruise Ship" = makeAwesomeIcon(icon= 'glass', markerColor = 'blue', iconColor = 'black', library = "glyphicon"),
"Pirate Ship" = makeAwesomeIcon(icon= 'fire', markerColor = 'black', iconColor = 'white', library = "glyphicon")
)
# Some fake data
df <- sp::SpatialPointsDataFrame(
cbind(
(runif(20) - .5) * 10 - 90.620130, # lng
(runif(20) - .5) * 3.8 + 25.638077 # lat
),
data.frame(type = factor(
ifelse(runif(20) > 0.75, "Pirate Ship", "Cruise Ship"),
c("Cruise Ship", "Pirate Ship")
))
)
# group names:
groups <- c("Cruise Ship" <- "<div style='position: relative; display: inline-block' class='awesome-marker-icon-blue awesome-marker'><i class='glyphicon glyphicon-glass icon-black '></i></div>Cruise Ship",
"Pirate Ship" <- "<div style='position: relative; display: inline-block' class='awesome-marker-icon-black awesome-marker'><i class='glyphicon glyphicon-fire icon-white '></i></div>Pirate Ship")
leaflet(df) %>% addTiles() %>%
addAwesomeMarkers(icon = ~IconSet[type], group=~groups[type]) %>%
addLayersControl(
overlayGroups = groups,
options = layersControlOptions(collapsed = FALSE)
)
Again, if working a few layers, or dynamic layers, it shouldn't be too hard to create a function that takes the icon data and makes a corresponding name to be used later, as opposed to hard coding the names above.
Regardless, this should be usable as a way to implement icons in controls.