Custom icons in Font-Awesome Style R Leaflet

Question

The problem is I have no access to doughnut icon with Font-Awesome, so I tried a code putting a custom doughnut icon, but this code just partially solved my problem, because I expected the doughnut to be a replacement for the white circle in the default marker in leaflet, instead, my code just put the doughnut in the map

I tried the following code:

data(quakes)
library(leaflet)
library(dplyr)

Custom <- makeIcon(
iconUrl = "https://www.svgrepo.com/show/6303/donut.svg",
iconWidth = 31*215/230,
iconHeight = 31, 
iconAnchorY = 16,
iconAnchorX = 31*215/230/2
)

leaflet(data = quakes[1:20,]) %>% 
  addTiles() %>%
  addMarkers(
    lng = ~long, lat = ~lat,
    icon=Custom)

The objective is to be able to put any icon whether it is in a library or not.

Ignacio2424 · Accepted Answer · 2023-02-27T11:59:55.337

I made a partial but very effective solution for my problem of icons, here is a reproducible example:

data(quakes)
library(leaflet)
library(dplyr)
library(fontawesome) 

data <- head(quakes,20)
groups <- rep(c(1,2,3,4),each=5)
data <- as.data.frame(cbind(data,groups))

markers <- awesomeIconList(
  `1` = makeAwesomeIcon(
    icon="empty",
    markerColor = "white",
    library="fa"
  ),
  `2` = makeAwesomeIcon(
    icon="empty", 
    markerColor ="pink",
    library="fa"
  ),
  `3`  = makeAwesomeIcon(
    icon="empty", 
    markerColor ="red",
    library="fa"
  ),
  `4` = makeAwesomeIcon(
    icon="empty", 
    markerColor ="blue",
    library="fa"
  )
)

icons <- iconList(
  `1` = makeIcon(
    iconUrl = "https://www.svgrepo.com/show/503906/ice-cream.svg",
    iconWidth = 31*215/230,
    iconHeight = 20, 
    iconAnchorY = 33,
    iconAnchorX = 31*215/230/2
  ),
  `2` = makeIcon(
    iconUrl = "https://www.svgrepo.com/show/39019/donut.svg",
    iconWidth = 31*215/230,
    iconHeight = 20, 
    iconAnchorY = 33,
    iconAnchorX = 31*215/230/2
  ),
  `3` = makeIcon(
    iconUrl = "https://www.svgrepo.com/show/500813/coffee.svg",
    iconWidth = 31*215/230,
    iconHeight = 20, 
    iconAnchorY = 33,
    iconAnchorX = 31*215/230/2
  ),
  `4` = makeIcon(
    iconUrl = "https://www.svgrepo.com/show/111427/shawarma.svg",
    iconWidth = 31*215/230,
    iconHeight = 20, 
    iconAnchorY = 33,
    iconAnchorX = 31*215/230/2
  )
)

data %>% leaflet() %>% addTiles() %>% addAwesomeMarkers(lat = ~lat, lng = ~long, popup = ~as.character(mag), icon = ~ markers[groups]) %>% addMarkers(lat = ~lat, lng = ~long, popup = ~as.character(mag), icon = ~ icons[groups])

Image of the result:

The solution is based on putting first the empty Font Awesome markers and then the markers with custom icons, adjusting them with "iconAnchorY = 33" so that they are in the center of the Font Awesome marker. I take the opportunity to leave the complete code to group them and color them in case it is of help to someone.

Custom icons in Font-Awesome Style R Leaflet

1 Answers1