Overlay Static Images on R Leaflet htmlwidget

Question

It it possible to overlay an image to R leaflet maps - or perhaps in the leaflet html - that would stay fixed overtop the map itself?

That is, the image wouldn't be rendered on the map itself, but fixed in the viewport of the browser, so that when you pan or zoom, it would stay the same size in the same position.

For example, I would want to overlay this image, fixed to the top-left of a map rendered with the following R code:

library(htmlwidgets)
library(leaflet)

m <- leaflet() %>%
  addTiles() %>%
  addMarkers(lng=174.768, lat=-36.852, popup="The birthplace of R")

saveWidget(m, file = "m.html", selfcontained = F)

score 4 · Accepted Answer · answered Oct 17 '17 at 21:00

You can do this with addLogo() from package mapview.

library(htmlwidgets)
library(leaflet)
library(mapview)

img <- "https://www.r-project.org/logo/Rlogo.svg"

m <- leaflet() %>%
  addTiles() %>%
  addMarkers(lng=174.768, lat=-36.852, popup="The birthplace of R") %>%
  addLogo(img, url = "https://www.r-project.org/logo/")

m

score 1 · Answer 2 · answered Oct 17 '17 at 18:52

In the html, you can add a with a high z-index - which places the inside above the htmlwidget.

For the example above, including the following html above the htmlwidget container overlays the image.

<div style="position:fixed;top:0px;left:0px;z-index:11000;">
<img src="https://www.r-project.org/logo/Rlogo.svg"/>
</div>

score 0 · Answer 3 · answered Oct 17 '17 at 22:31

I know this is a leaflet question but I wanted to see if it worked with googelway and add_overlay() - and it does:

library(googleway)

map_key <- 'my_map_key'

google_map(key = map_key ) %>%
    add_overlay(north = -36.852, east = 174.768, west = 174.668, south = -36.952,
            overlay_url = "https://www.r-project.org/logo/Rlogo.svg")

Overlay Static Images on R Leaflet htmlwidget

3 Answers3