R Leaflet Popup Image

Question

I am trying to make my booklet map generated by R, include images in marker popups in a dynamic way - for example,

library(leaflet) pts <- data.frame(Latitude = 30, Longitude = 30, file = "thing") leaflet() %>% addTiles %>% addCircleMarkers(data = pts, lng =~Longitude, lat = ~Latitude, popup =~ paste0("<img src = './", file, ".jpg'>")) 

The above produces a bad image (you are old in the image). Looking at the source makes it look as if it should work ... not sure what is wrong here.

 {"lineCap":null,"lineJoin":null,"clickable":true,"pointerEvents":null, "className":"","stroke":true,"color":"#03F","weight":5,"opacity":0.5,"fill":true," fillColor":"#03F","fillOpacity":0.2,"dashArray":null},null,null, "<img src = './thing.jpg'>"]}],"limits":{"lat":[30,30],"lng":[30,30]}},"evals":[]} 

Answer 1

If you can use svg instead of jpg , it should work. See my answer here .

EDIT / UPDATE:
It is possible to embed image files that are not local. Consider the following, where we add the R logo from Wikipedia.

 library(leaflet) pts <- data.frame(Latitude = 30, Longitude = 30, file = "thing") file <- 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Rlogo.png/274px-Rlogo.png' leaflet() %>% addTiles %>% addCircleMarkers(data = pts, lng =~Longitude, lat = ~Latitude, popup = paste0("<img src = ", file, ">")) 

This works great.

For local files, this is a little more complicated than the leaflet or, better, the base htmltools , expects relative paths to the specified image file from the location index.html , which is stored in the temporary folder that is created when the widget is created. Therefore, we cannot know in advance where to save our images in advance. @Spacedman provided some functions for storing leaflet cards in a user-specified folder, so we can use them to create our working map, for example,

 library (leaflet) 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")) } file <- '/path/to/folder/image.png' pts <- data.frame(Latitude = 30, Longitude = 30, file = "thing") m <- leaflet() %>% addTiles %>% addCircleMarkers(data = pts, lng =~Longitude, lat = ~Latitude, popup = paste0("<img src = ", file, ">")) saveas(m, "/path/to/folder/index.html") 

We save index.html in the same folder as png , so now if we open index.html in a browser, the popup should display png just fine. This should also work with jpg files.

Note that this still will not show the desired pop-up behavior in the RStudio viewer. Perhaps this will be possible by encoding images on base64. I will delve into this when I find the time.

UPDATE 2: The mapview development version now has dedicated functions for this:

• popupImage() for embedding local or remote images
• popupGraph() for nesting gratings , ggplot2 or htmlwidgets .

The mapview development version can be installed using

 devtools::install_github("environmentalinformatics-marburg/mapview", ref = "develop"