How do I include images in Leaflet popup labels in R?

Question

I am trying to include an image in a popup label in Leaflet in R, but the images are not rendering. See the code below:

### Set wd
setwd("path/to/directory")

### Load Libraries
library(dplyr)
library(leaflet)
library(mapview)


### Create Data
dat<-data.frame(name="x",other_var="y",lat=33,lon=-84)

### Create Label
lab <- sprintf(
  "<img src=“test_image.jpg” width=“100” 1024px />
  <br/>
  <strong>Name:</strong> %s
  <br/><strong>Other Variable Here:</strong> %s",
  dat$name, 
  dat$other_var
) %>% lapply(htmltools::HTML)

### Create Map
leaflet %>%
  leaflet() %>%
  addTiles() %>%
  addMarkers(
    data= dat,
    lng = ~lon,
    lat = ~lat,
    popup = lab
    
  )

I used the image found here as a test image and downloaded it into my local directory.

When I ran the code, I get the following:

Edit: I'll also add the session information:

> sessionInfo()
R version 3.5.1 (2018-07-02)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows >= 8 x64 (build 9200)

Matrix products: default

locale:
[1] LC_COLLATE=English_United States.1252  LC_CTYPE=English_United States.1252    LC_MONETARY=English_United States.1252
[4] LC_NUMERIC=C                           LC_TIME=English_United States.1252    

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] mapview_2.6.3 leaflet_2.0.2 dplyr_0.8.5  

loaded via a namespace (and not attached):
 [1] Rcpp_1.0.3         pillar_1.4.3       compiler_3.5.1     later_0.8.0        class_7.3-14       base64enc_0.1-3   
 [7] tools_3.5.1        digest_0.6.18      jsonlite_1.6.1     viridisLite_0.3.0  satellite_1.0.1    lifecycle_0.2.0   
[13] tibble_3.0.0       lattice_0.20-35    pkgconfig_2.0.2    png_0.1-7          rlang_0.4.5        DBI_1.1.0         
[19] shiny_1.2.0        cli_2.0.2          rstudioapi_0.11    crosstalk_1.0.0    yaml_2.2.0         e1071_1.7-0.1     
[25] raster_2.8-19      vctrs_0.2.4        htmlwidgets_1.3    webshot_0.5.1      classInt_0.4-2     stats4_3.5.1      
[31] grid_3.5.1         tidyselect_1.0.0   glue_1.4.0         sf_0.9-0           R6_2.2.2           fansi_0.4.0       
[37] sp_1.3-1           purrr_0.3.3        magrittr_1.5       units_0.6-2        scales_1.1.1       promises_1.0.1    
[43] codetools_0.2-15   ellipsis_0.3.0     htmltools_0.4.0    assertthat_0.2.1   colorspace_1.3-2   mime_0.6          
[49] xtable_1.8-3       httpuv_1.4.5.1     KernSmooth_2.23-15 munsell_0.5.0      crayon_1.3.4

score 2 · Answer 1 · answered Jan 15 '21 at 23:09

Viewing local files need a workaround. Look here for more insights.

Here's a working example.

Choose a folder and set the path in the path variable. Then put in the folder the R script code and the image. Once you run it, get to the folder an run the index.html file. If all is ok, you should get something like the one on the pic.

### Set wd
path = "folder/path/" #<- set you local path

### Load Libraries
library(dplyr)
library(leaflet)
library(mapview)

### Create Data
dat<-data.frame(name="x",other_var="y",lat=33,lon=-84)

### Create Label
lab <- sprintf(
  "<img src='star.png' width='20'/>
  <br/>
  <strong>Name:</strong> %s
  <br/><strong>Other Variable Here:</strong> %s",
  dat$name, 
  dat$other_var
) %>% lapply(htmltools::HTML)

## helper functions ##
saveas <- function(map, file){
  class(map) <- c("saveas",class(map))
  attr(map,"filesave")=file
  map
}

print.saveas <- function(x, ...){
  class(x) = class(x)[class(x)!="saveas"]
  htmltools::save_html(x, file=attr(x,"filesave"))
}
## helper functions ##

### Create Map
leaflet %>%
  leaflet() %>%
  addTiles() %>%
  addMarkers(
    data= dat,
    lng = ~lon,
    lat = ~lat,
    popup = lab
  ) %>% saveas(paste0(path,"index.html"))

How do I include images in Leaflet popup labels in R?

1 Answers1