Search code examples
rfont-awesomer-leaflet

Change icon, color and marker color based on data in leaflet

I'd like to plot some data on a map wherein the icon shape, iconColor and markerColor are all based on the data itself.

Sample Code

library(data.table)
library(leaflet)
library(webshot2)
library(htmlwidgets)
library(fontawesome)

len <- 20

dat <- data.table(
  lat = runif(len, min = -90, max = 90), 
  lon = runif(len, min = -180, max = 180), 
  activity = sample(x = c('person-hiking', 'house', 'map-marker', 'user-gear'), size = len, replace = T),
  marker_color = sample(x = c('blue', 'cadetblue', 'lightgray'), size = len, replace = T), 
  icon_color = sample(x = c('white', 'black'), size = len, replace = T)
)

icons_1 <- awesomeIcons(
  icon = dat$activity, 
  markerColor = dat$marker_color, 
  iconColor = dat$icon_color,
  library = 'fa'
)

icons_2 <- awesomeIcons(
  icon = 'map_marker',
  markerColor = dat$marker_color, 
  iconColor = 'black',
  library = 'fa'
)

icons_3 <- makeAwesomeIcon(text = fa('user-gear'))


plt <- leaflet(data = dat, options = leafletOptions(zoomControl = FALSE)) %>% addTiles() %>%
  addAwesomeMarkers(~lon, ~lat, icon = icons_1) %>%
  # addAwesomeMarkers(~lon, ~lat, icon = icons_2) %>%
  # addAwesomeMarkers(~lon, ~lat, icon = icons_3) %>%
  addScaleBar(position = 'bottomright', 
              options = scaleBarOptions(maxWidth = 200, metric = T, imperial = T)) %>% 
  addProviderTiles(provider = providers$CartoDB.DarkMatterNoLabels)

Output

icons_1 displays the correct markerColor but the icon_color is shown correctly only when set to black and the icon is map+marker:

enter image description here

I wasn't sure if it had something to do with the icon argument, so I tried icons_2 to trouble-shoot but it didn't work either:

enter image description here

The icons (specified using activity in the data.table) do function fine, I tested out one using icons_3:

enter image description here

I'm able to create a single custom icon and use it for all markers but not sure how to customize them the way I want.

Solution

  • There is an open issue with some fontawesome icons. What works is to pass them as text to awesomeIcons. Also for fonts other than black use the Hex Code, e.g. '#FFFFFF' for white.

    enter image description here

    library(data.table)
library(leaflet)
library(fontawesome)

len <- 20
set.seed(1)

dat <- data.table(
  lat = runif(len, min = -90, max = 90), 
  lon = runif(len, min = -180, max = 180), 
  activity = sample(x = c(fa('person-hiking'), fa('house'), fa('map-marker'), fa('user-gear')), size = len, replace = T),
  marker_color = sample(x = c('blue', 'cadetblue', 'lightgray'), size = len, replace = T), 
  icon_color = sample(x = c('#FFFFFF', 'black'), size = len, replace = T)
)

icons_1 <- awesomeIcons(
  text = dat$activity, 
  markerColor = dat$marker_color, 
  iconColor = dat$icon_color,
  library = 'fa'
)

leaflet(data = dat, options = leafletOptions(zoomControl = FALSE)) %>% addTiles() %>%
  addAwesomeMarkers(~lon, ~lat, icon = ~ icons_1) %>%
  addScaleBar(position = 'bottomright', 
              options = scaleBarOptions(maxWidth = 200, metric = T, imperial = T)) %>% 
  addProviderTiles(provider = providers$CartoDB.DarkMatterNoLabels)