tomroh/leaflegend

Provides extensions to the leaflet R package to customize legends with images, text styling, orientation, sizing, and symbology.

leaflegend

This package provides extensions to the leaflet package to customize leaflet legends without adding an outside css file to the output to style legends. The legend extensions allow the user to add images to legends, style the labels of the legend items, change orientation of the legend items, use different symbologies, and style axis ticks. Syntax and style is consistent with the leaflet package. Helper functions are provided to create map symbols for plotting as well.

Installation

You can install the released version of leaflegend from CRAN with:

install.packages("leaflegend")

Install the development version with:

devtools::install_github("tomroh/leaflegend")

Tutorials

• Introduction to leaflegend

• Map Symbols and Size Legends

• Awesome Marker Legends

• leaflegend Recipes

Map Symbols

default

pch

Example

Use addLegend*() to create easily customizable legends for leaflet.

library(leaflet)
library(leaflegend)
set.seed(21)
data("gadmCHE")
gadmCHE@data$x <- sample(c('A', 'B', 'C'), nrow(gadmCHE@data), replace = TRUE)
factorPal <- colorFactor(c('#1f77b4', '#ff7f0e' , '#2ca02c'), gadmCHE@data$x)
n <- 10
awesomeMarkers <- data.frame(
  marker = sample(c('Font Awesome', 'Ionic', 'Glyphicon'), n, replace = TRUE),
  lng = runif(n, gadmCHE@bbox[1,1], gadmCHE@bbox[1,2]),
  lat = runif(n, gadmCHE@bbox[2,1], gadmCHE@bbox[2,2])
)
n2 <- 30
symbolMarkers <- data.frame(
  x = runif(n2, 0, 100),
  y = runif(n2, 10, 30),
  lng = runif(n2, gadmCHE@bbox[1,1], gadmCHE@bbox[1,2]),
  lat = runif(n2, gadmCHE@bbox[2,1], gadmCHE@bbox[2,2])
)
numericPal <- colorNumeric(hcl.colors(10, palette = 'zissou'),
                           symbolMarkers$y)
iconSet <- awesomeIconList(
  `Font Awesome` = makeAwesomeIcon(icon = "font-awesome", library = "fa",
                                   iconColor = 'rgb(192, 255, 0)',
                                   markerColor = 'lightgray',
                                   squareMarker = TRUE, iconRotate = 30
  ),
  Ionic = makeAwesomeIcon(icon = "ionic", library = "ion",
                          iconColor = 'gold', markerColor = 'gray',
                          squareMarker = FALSE),
  Glyphicon = makeAwesomeIcon(icon = "plus-sign", library = "glyphicon",
                              iconColor = '#ffffff',
                              markerColor = 'black', squareMarker = FALSE)
)
leaflet() |>
  addTiles() |>
  addPolygons(data = gadmCHE, color = ~factorPal(x), fillOpacity = .5,
              opacity = 0, group = 'Polygons') |>
  addLegendFactor(pal = factorPal, shape = 'polygon', fillOpacity = .5,
                  opacity = 0, values = ~x, title = 'addLegendFactor',
                  position = 'topright', data = gadmCHE, group = 'Polygons') |>
  addAwesomeMarkers(data = awesomeMarkers, lat = ~lat, lng = ~lng,
                    icon = ~iconSet[marker],
                    group = 'Awesome Icons') |>
  addLegendAwesomeIcon(iconSet = iconSet, title = 'addLegendAwesomeIcon',
                       position = 'bottomleft',
                       group = 'Awesome Icons') |>
  addSymbolsSize(data = symbolMarkers, fillOpacity = .7, shape = 'plus',
                 values = ~x, lat = ~lat, lng = ~lng, baseSize = 20,
                 fillColor = ~numericPal(y), color = 'black',
                 group = 'Symbols') |>
  addLegendSize(pal = numericPal, shape = 'plus', color = 'black',
                fillColor = 'transparent', baseSize = 20, fillOpacity = .7,
                values = ~x, orientation = 'horizontal',
                title = 'addSizeLegend', position = 'bottomright',
                group = 'Symbols', data = symbolMarkers) |>
  addLegendNumeric(pal = numericPal, values = ~y, title = 'addLegendNumeric',
                   orientation = 'horizontal', fillOpacity = .7, width = 150,
                   height = 20, position = 'bottomright', group = 'Symbols',
                   data = symbolMarkers) |>
  addLayersControl(overlayGroups = c('Polygons', 'Awesome Icons', 'Symbols'),
                   position = 'topleft',
                   options = layersControlOptions(collapsed = FALSE))

leaflegend's Issues

Sizing of SVG for numericLegends

It's currently difficult to size numeric legends appropriate given the text is in an svg. Base R strwidth is currently being used but doesn't handle all sizings well.

Add Wrapper to Create Size Symbols

• center icons automagically
• is there a more generic wrapper beyond makeIcon?

Unwanted extra icon in legend

Hello, thanks for the awesome package. The code below works as intended. But the problem is not all icons of FA work with the setup below. I am using a workaround from rstudio/leaflet#691, which might be causing the issue.
Announcement = makeAwesomeIcon(
icon = "font-awesome", library = "fa",
iconColor = "blue",
markerColor = "black"
)

support for dashed lines in leaflet legend

This is an awesome package and makes leaflet maps just so much better. I'm having trouble showing solid and dashed lines in my legend. Is there any chance of some support regarding how to get that into the legend?

adjust labels of addLegendSize

I'm working on implementing leaflegend in tmap v4 (r-tmap/tmap#699). One important question:

Can the legend labels be specified in addLegendSize? I'd like to be able to specify any text (e.g. "Very large", "Large", "Medium", "Small") for the symbol sizes.

Change label format of addLegendQuantile() ?

First of all thank you for this great package!

At the moment, addLegendQuantile() labels have a default formatting. It can either be one of the two types as in the screenshot.
I want to make the labels with only the values and not show the percentage.
So the labels will be

• (1-2)
• (2-4)
• (4-5)

in the example below.
Is this possible?

Add Line Weight Size Legend

Do you plan to add an implementation of this for the width/weight of polylines? I haven't seen any other package do it yet, and it seems like it would not be that hard from what you have already set up.

labels for addLegendFactor throw error

Hi Tom... Not sure if it's my code or the package, but I thought you could help either way...I wanted to use your package to generate smaller fonts in my map legend.

temp<-structure(list(event_name = c("2022 Refugee Educati", "2022 Refugee Educati",
"EMPOWER 2022", "2022 Refugee Educati", "EMPOWER 2022", "2022 Refugee Educati", "2022 Refugee Educati"), start_lat = c(41.427199, 40.040505, 40.468968, 40.238207, 40.332502, 40.343261, 40.327741), start_lon = c(-75.61821, -75.63425, -79.91863, -76.511942, -79.8646, -76.7808, -75.87002)), row.names = c(521L, 311L, 33L, 455L, 88L, 333L, 444L), class = "data.frame")

mypal<-colorFactor(palette = "Dark2",domain = temp$event_name)

leaflet() %>%
addCircleMarkers(data=temp,lng = ~start_lon,lat=~start_lat,weight=.3,
radius = 3,fillOpacity = .85,
fillColor = ~mypal(temp$event_name)) %>%
addLegendFactor(data=temp,
position="bottomright",
pal=mypal,
labelStyle = 'font-size=9px',
labels=temp$event_name, # the command works if I remove this line
values=~temp$event_name,title = "Event")

Add New Color Palettes for class intervals

https://cran.r-project.org/web/packages/classInt/classInt.pdf

Allow Split Encodings for Size and Color

numPal <- colorNumeric('viridis', quakes$depth)
symbols <- makeSizeIcons(
  values = exp(quakes$mag),
  shape = 'plus',
  color = 'black',
  baseSize = 10,
  fillColor = numPal(quakes$depth),
  opacity = .5
)

leaflet() %>%
  addTiles() %>%
  addMarkers(data = quakes,
             icon = icons(iconUrl = symbols),
             lat = ~lat, lng = ~long) %>%
  addLegendSize(
    values = quakes$mag,
    baseSize = 10,
    color = 'black',
    fillColor = 'black',
    title = 'Magnitude',
    shape = 'plus',
    orientation = 'horizontal',
    opacity = .5,
    fillOpacity = .3,
    breaks = 5) %>%
  addLegendNumeric(pal = numPal, values = quakes$depth, title = 'Depth')

icons not rendering in addLegendAwesomeIcon()

I can't seem to get leaflegend to display icons used in AwesomeMarkers. There are open issues with certain Font Awesome icons and I've implemented the workaround at rstudio/leaflet#691 for getting the icon to show on the map but I can't figure out how to make them show up in addLegendAwesomeMarkers(). I'm primarily an R user and know next to nothing about HTML/CSS. Is there something I can pass to addControl() in addLegendAwesomeMarkers(...) that can use the text representation of the icon?

Thanks!

Reprex:

library(shiny)
library(leaflet)
library(leaflegend)
library(fontawesome)


# dummy data
set.seed(123)
d <- tibble(lat=rnorm(2), lng=rnorm(2), col=c('gray','red')) 

iconList1 <- awesomeIconList(
  gray=makeAwesomeIcon(icon='fish', library='fa', markerColor = 'lightgray', iconColor = 'black'),
  red=makeAwesomeIcon(icon='fish', library='fa', markerColor='red', iconColor='black')
)

# no fish icon
d %>% 
  leaflet() %>% 
  addTiles() %>% 
  addAwesomeMarkers(icon=~iconList1[col]) %>% 
  addLegendAwesomeIcon(iconSet=iconList1)

# Shiny finds the icon in fa library
shiny::icon("fish",lib='font-awesome')

# Proposed solution at: https://github.com/rstudio/leaflet/issues/691 using text argument with fontawesome.
iconList2 <- awesomeIconList(
  gray=makeAwesomeIcon(icon='fish', library='fa', text=fontawesome::fa("fish"), markerColor = 'lightgray', iconColor = 'black'),
  red=makeAwesomeIcon(icon='fish', library='fa', text=fontawesome::fa("fish"), markerColor='red', iconColor='black')
)

# icon shows in marker but not legend
d %>% 
  leaflet() %>% 
  addTiles() %>% 
  addAwesomeMarkers(icon=~iconList2[col]) %>% 
  addLegendAwesomeIcon(iconSet=iconList2)

Columns in Legend

hi @tomroh thanks for your package.
Is there any way to use a column view (e.g. two columns) in the legend?

I have a layer with a high number of levels (64). I used the addLegendFactor but I would like to show the legend using a four columns view.
Thanks

Add "addSymbols" and "addSymbolsSize"

• decide on 1 or 2 functions
• limit to first 7 shapes
• use addMarkers
• how to pass args
• add test

fix AddLegendSize error message

if pal is missing and fillColor is missing the error is not obvious that fillColor is missing

Adding argument to change the 'between' in legends

In leaflet there is a function labelFormat() that allows users to change the separator in legends using the between argument. I cannot seem to get this same functionality to work with leaflegend. Would it be possible to add that feature? Thanks.

Adding Custom Images/Symbols

The ability to use custom images is not available with makeSizeIcons
but it is possible with icons & sizeNumeric.

height <- sizeNumeric(quakes$depth, baseSize = 20)
width <- sizes * 38 / 95
symbols <- icons(
  iconUrl = 'http://leafletjs.com/examples/custom-icons/leaf-green.png',
  iconWidth = width,
  iconHeight = height)
leaflet(quakes) %>%
  addTiles() %>%
  addMarkers(icon = symbols,
             lat = ~lat, lng = ~long) %>%
  addLegendImage(images ="http://leafletjs.com/examples/custom-icons/leaf-green.png",
                 labels = "test",width = 38, height = 95,
                 title = htmltools::tags$div('Leaf',
                 style = 'font-size: 24px; text-align: center;'),
                 position = 'topright')

Add NA to addLegendNumeric and ability to override labels

From #60:

-[ ] add NA flag if there is NAs
-[ ] add ability to override numeric labels

Bins function does not work properly

Bins argument does not set the required number of ticks. It would be great to have exact number than approximate.

Group names not unique over many maps - addLayersControl gets confused in Quarto

Hi Thomas,

thank you very much for a very useful leaflet library. Thank you for your time and effort in developing leaflegend !

I think I've found an issue with leaflegand. I'm rendering many maps (tens of them) within one Quarto document.
I use a standard function to output one of many thousands of leaflet maps over many geographies.

I've noticed that the group names when refenced in a leaflegend object appear shared over all chunks?
This means that leaflegend works really great in a single map, but over subsequent maps in Quarto documents, the controls don't work or the groups cannot be reliably interacted within an addLayersControl - which appears an issue to me.

Please see the simplest example below I could make to demonstrate this unexpected behaviour.
See how the lower map's controls affect the layers in the separate map above when this QMD is rendered.
When more and more maps are added beyond these, the layersControl simply doesn't respond at all.
I've tried many different workarounds over the last few hours and haven't succeeded in finding a scalable solution to resolve the issue. Please can you advise?

many thanks,
ivan

---

title: "Test6"
author: "BI"
date: "04/10/2023"
execute:
echo: false
format:
html:
fig-width: 12
fig-height: 10
code-fold: true
embed-resources: false
css: styles.css
grid:
sidebar-width: 220px
body-width: 1400px
margin-width: 150px
gutter-width: 1.5rem

#| include: true
#| layout-ncol: 1
#| fig.width: 12
#| fig.height: 10
#| class-output: output



library(leaflet)
library(leaflegend)
set.seed(21)
data("gadmCHE")
gadmCHE@data$x <- sample(c('A', 'B', 'C'), nrow(gadmCHE@data), replace = TRUE)
factorPal <- colorFactor(c('#1f77b4', '#ff7f0e' , '#2ca02c'), gadmCHE@data$x)
n <- 10
awesomeMarkers <- data.frame(
  marker = sample(c('Font Awesome', 'Ionic', 'Glyphicon'), n, replace = TRUE),
  lng = runif(n, gadmCHE@bbox[1,1], gadmCHE@bbox[1,2]),
  lat = runif(n, gadmCHE@bbox[2,1], gadmCHE@bbox[2,2])
)
n2 <- 30
symbolMarkers <- data.frame(
  x = runif(n2, 0, 100),
  y = runif(n2, 10, 30),
  lng = runif(n2, gadmCHE@bbox[1,1], gadmCHE@bbox[1,2]),
  lat = runif(n2, gadmCHE@bbox[2,1], gadmCHE@bbox[2,2])
)
numericPal <- colorNumeric(hcl.colors(10, palette = 'zissou'),
                           symbolMarkers$y)
iconSet <- awesomeIconList(
  `Font Awesome` = makeAwesomeIcon(icon = "font-awesome", library = "fa",
                                   iconColor = 'rgb(192, 255, 0)',
                                   markerColor = 'lightgray',
                                   squareMarker = TRUE, iconRotate = 30
  ),
  Ionic = makeAwesomeIcon(icon = "ionic", library = "ion",
                          iconColor = 'gold', markerColor = 'gray',
                          squareMarker = FALSE),
  Glyphicon = makeAwesomeIcon(icon = "plus-sign", library = "glyphicon",
                              iconColor = '#ffffff',
                              markerColor = 'black', squareMarker = FALSE)
)
leaflet() |>
  addTiles() |>
  addPolygons(data = gadmCHE, color = ~factorPal(x), fillOpacity = .5,
              opacity = 0, group = 'Polygons') |>
  addLegendFactor(pal = factorPal, shape = 'polygon', fillOpacity = .5,
                  opacity = 0, values = ~x, title = 'addLegendFactor',
                  position = 'topright', data = gadmCHE, group = 'Polygons') |>
  addAwesomeMarkers(data = awesomeMarkers, lat = ~lat, lng = ~lng,
                    icon = ~iconSet[marker],
                    group = 'Awesome Icons') |>
  addLegendAwesomeIcon(iconSet = iconSet, title = 'addLegendAwesomeIcon',
                       position = 'bottomleft',
                       group = 'Awesome Icons') |>
  addSymbolsSize(data = symbolMarkers, fillOpacity = .7, shape = 'plus',
                 values = ~x, lat = ~lat, lng = ~lng, baseSize = 20,
                 fillColor = ~numericPal(y), color = 'black',
                 group = 'Symbols') |>
  addLegendSize(pal = numericPal, shape = 'plus', color = 'black',
                fillColor = 'transparent', baseSize = 20, fillOpacity = .7,
                values = ~x, orientation = 'horizontal',
                title = 'addSizeLegend', position = 'bottomright',
                group = 'Symbols', data = symbolMarkers) |>
  addLegendNumeric(pal = numericPal, values = ~y, title = 'addLegendNumeric',
                   orientation = 'horizontal', fillOpacity = .7, width = 150,
                   height = 20, position = 'bottomright', group = 'Symbols',
                   data = symbolMarkers) |>
  addLayersControl(overlayGroups = c('Polygons', 'Awesome Icons', 'Symbols'),
                   position = 'topleft',
                   options = layersControlOptions(collapsed = TRUE))

#| include: true
#| layout-ncol: 1
#| fig.width: 12
#| fig.height: 10
#| class-output: output



library(leaflet)
library(leaflegend)
set.seed(21)
data("gadmCHE")
gadmCHE@data$x <- sample(c('A', 'B', 'C'), nrow(gadmCHE@data), replace = TRUE)
factorPal <- colorFactor(c('#1f77b4', '#ff7f0e' , '#2ca02c'), gadmCHE@data$x)
n <- 10
awesomeMarkers <- data.frame(
  marker = sample(c('Font Awesome', 'Ionic', 'Glyphicon'), n, replace = TRUE),
  lng = runif(n, gadmCHE@bbox[1,1], gadmCHE@bbox[1,2]),
  lat = runif(n, gadmCHE@bbox[2,1], gadmCHE@bbox[2,2])
)
n2 <- 30
symbolMarkers <- data.frame(
  x = runif(n2, 0, 100),
  y = runif(n2, 10, 30),
  lng = runif(n2, gadmCHE@bbox[1,1], gadmCHE@bbox[1,2]),
  lat = runif(n2, gadmCHE@bbox[2,1], gadmCHE@bbox[2,2])
)
numericPal <- colorNumeric(hcl.colors(10, palette = 'zissou'),
                           symbolMarkers$y)
iconSet <- awesomeIconList(
  `Font Awesome` = makeAwesomeIcon(icon = "font-awesome", library = "fa",
                                   iconColor = 'rgb(192, 255, 0)',
                                   markerColor = 'lightgray',
                                   squareMarker = TRUE, iconRotate = 30
  ),
  Ionic = makeAwesomeIcon(icon = "ionic", library = "ion",
                          iconColor = 'gold', markerColor = 'gray',
                          squareMarker = FALSE),
  Glyphicon = makeAwesomeIcon(icon = "plus-sign", library = "glyphicon",
                              iconColor = '#ffffff',
                              markerColor = 'black', squareMarker = FALSE)
)
leaflet() |>
  addTiles() |>
  addPolygons(data = gadmCHE, color = ~factorPal(x), fillOpacity = .5,
              opacity = 0, group = 'Polygons') |>
  addLegendFactor(pal = factorPal, shape = 'polygon', fillOpacity = .5,
                  opacity = 0, values = ~x, title = 'addLegendFactor',
                  position = 'topright', data = gadmCHE, group = 'Polygons') |>
  addAwesomeMarkers(data = awesomeMarkers, lat = ~lat, lng = ~lng,
                    icon = ~iconSet[marker],
                    group = 'Awesome Icons') |>
  addLegendAwesomeIcon(iconSet = iconSet, title = 'addLegendAwesomeIcon',
                       position = 'bottomleft',
                       group = 'Awesome Icons') |>
  addSymbolsSize(data = symbolMarkers, fillOpacity = .7, shape = 'plus',
                 values = ~x, lat = ~lat, lng = ~lng, baseSize = 20,
                 fillColor = ~numericPal(y), color = 'black',
                 group = 'Symbols') |>
  addLegendSize(pal = numericPal, shape = 'plus', color = 'black',
                fillColor = 'transparent', baseSize = 20, fillOpacity = .7,
                values = ~x, orientation = 'horizontal',
                title = 'addSizeLegend', position = 'bottomright',
                group = 'Symbols', data = symbolMarkers) |>
  addLegendNumeric(pal = numericPal, values = ~y, title = 'addLegendNumeric',
                   orientation = 'horizontal', fillOpacity = .7, width = 150,
                   height = 20, position = 'bottomright', group = 'Symbols',
                   data = symbolMarkers) |>
  addLayersControl(overlayGroups = c('Polygons', 'Awesome Icons', 'Symbols'),
                   position = 'topleft',
                   options = layersControlOptions(collapsed = TRUE))

Add number format to size legend

addLegendSize

Add a legend that can create size breaks with makeSymbol.

Borders around shapes

Great package! Will definitely use it in tmap.

Question: how can I add borders around the shapes?

Add warning to LegendImage if passing only one Symbol

Leaflet Group Support

I wished there was support for Leaflet groups, to be able to show/hide the legend using leaflet layer control.

But since this uses leaflet::addControl(), that might not be possible.

I'll try to see if it can be done via Javascript.

Add leaflet recipes sheet

Add Symbols List to Readme

Pad embedded svg

when passing stroke-width, the stroke goes outside the bounds of height and width

Stroke Sizing

Outlines of circles are slightly cutoff

Add Color Quantile

Note from leaflet:

# I don't have a precise understanding of how quantiles are meant to map to colors.
  # If you say probs = seq(0, 1, 0.25), which has length 5, does that map to 4 colors
  # or 5? 4, right?
  colorFunc <- colorFactor(palette, domain = 1:(length(probs) - 1),
    na.color = na.color, alpha = alpha, reverse = reverse)

add addLegendIcon

• convert icon or icon list object to HTML and css

Add control on min and max size of symbols

Hello,
I don't know if it's possible (or easy), but it would be nice to have more control over the legend size. For example, instead of just the "baseSize" argument, having "minSize" and "maxSize" arguments would be great.

Horizontal addLegendNumeric Has Poor Alignment Between Gradient and Labels

I am using addLegendNumeric in a dynamic Shiny dashboard environment where the title may extend further than the set width. Everything adjusts accordingly with the exception of the color gradient. Is there a way to allow for dynamic widths?

Code:

  addLegendNumeric(
      layerId = 'polyLegend',
      position = 'topleft', 
      pal = pal,
      values = dat2$value,
      tickWidth = 2,
      tickLength = 6,
      naLabel = 'No Data',
      orientation = 'horizontal',
      width = 150,
      height = 20,
      title = data_title,
      numberFormat = if (unique(dat2$fmt) == 'int'){
          function(x) {
              prettyNum(x, big.mark = ",", scientific = FALSE, digits = 1)
              }
          } else {
              function(x) {
                  paste0(round(x * 100, 1), "%")
              }
              }
      ) 

Output:

Add Symbols

• line symbol
• polygon symbol

Underscores in group layer functionality does not work for legends

library(leaflet)
library(leaflegend)
leaflet() %>%
  addTiles() %>%
  addMarkers(data = quakes, group = 'mg_aadf_edges') %>%
  addLegendBin(
    pal = binPal,
    values = quakes$mag,
    position = 'bottomleft',
    title = 'addLegendBin',
    group = 'mg_aadf_edges'
  ) %>%
  addLayersControl(overlayGroups = c('mg_aadf_edges'),
    position = 'bottomright'
  )

add embedded svg to addLegendImage

instead of passing a file, create an exception for passing svg.

New feature to have Stacked or nested bubbles sizeson legend when plotting bubbles in tmap

See r-tmap/tmap#777.

Add more svg shapes

• star
• diamond
• plus
• cross

group layer functionality for addLegendImage not working

Here is the code snippet

addLegendImage(
images = c("http://leafletjs.com/examples/custom-icons/leaf-green.png"),
labels = "",
labelStyle = "font-size: 12px; horizontal-align: middle;",
width = 350,
height = 350,
group ="AllTime"
) %>%

addLayersControl(
overlayGroups =c("AllTime",
"TimeA: Li850/MA55: UV.BC",
"TimeB: Li850/MA55: UV.BC",
...
),
options = layersControlOptions(collapsed = F)
)

As you can see in the attached screenshot, even when the group "AllTime" is deselected, the image remains

addLegendNumeric needs to check shape args

use match.arg on shape