ImageOverlay doesn't show local image

[Ammar-K]

Hi, thank you for the great package.

I was able to use ImageOverlay to show overlay image as a background. the only issue i have is that ImageOverlay show the image only if it's hosted online, i can't use a local image as the background

I'm using the following code for that

library(leaflet)
#> Warning: package 'leaflet' was built under R version 3.5.1
library(mapview)
#> Warning: package 'mapview' was built under R version 3.5.2
library(sf)
#> Warning: package 'sf' was built under R version 3.5.2
#> Linking to GEOS 3.6.1, GDAL 2.2.3, PROJ 4.9.3

p1 <- rbind(c(430,560), c(577,560),c(577,445), c(430,445), c(430,560))
p2 <- rbind(c(1,1), c(1,2), c(2,2), c(1,1))
pol <-st_polygon(list(p1))

bounds <- c(-26.5, -25, 1021.5, 1023)
leaflet(options = leafletOptions(
  crs = leafletCRS(crsClass = "L.CRS.Simple"),
  minZoom = -5,
  maxZoom = 5)) %>%
  fitBounds(bounds[1], bounds[2], bounds[3], bounds[4]) %>%
  setMaxBounds(bounds[1], bounds[2], bounds[3], bounds[4]) %>%
  htmlwidgets::onRender("
  function(el, t) {
    var myMap = this;
    var bounds = myMap.getBounds();
    var image = new L.ImageOverlay(
                      url='https://upload.wikimedia.org/wikipedia/commons/6/60/RefineryFlow.png',
                      bounds);
    image.addTo(myMap);
  }") %>% addMouseCoordinates() %>%
  addRectangles(lng1 =430 ,lat1 =560 ,lng2 =577 ,lat2 = 445,
                popup = "Area: EG Tank <br> Classification: Danger 3",
                fillColor = "#b70000", color = "#b70000",
                highlightOptions =highlightOptions(color = "white", weight = 2,
                                                   bringToFront = TRUE)) %>%
  addRectangles(lng1 =430 ,lat1 = 432, lng2 =577 , lat2 =300  ,  popup = "Area: EG Tank <br> Classification: Danger 3", fillColor = "#f7da02", color ="#f7da02" ) 

^{Created on 2019-06-05 by the reprex package (v0.3.0)}

by simply changing the url to local file I'm getting a question mark in the background. like here

library(leaflet)
#> Warning: package 'leaflet' was built under R version 3.5.1
library(mapview)
#> Warning: package 'mapview' was built under R version 3.5.2
library(sf)
#> Warning: package 'sf' was built under R version 3.5.2
#> Linking to GEOS 3.6.1, GDAL 2.2.3, PROJ 4.9.3

p1 <- rbind(c(430,560), c(577,560),c(577,445), c(430,445), c(430,560))
p2 <- rbind(c(1,1), c(1,2), c(2,2), c(1,1))
pol <-st_polygon(list(p1))

bounds <- c(-26.5, -25, 1021.5, 1023)
leaflet(options = leafletOptions(
  crs = leafletCRS(crsClass = "L.CRS.Simple"),
  minZoom = -5,
  maxZoom = 5)) %>%
  fitBounds(bounds[1], bounds[2], bounds[3], bounds[4]) %>%
  setMaxBounds(bounds[1], bounds[2], bounds[3], bounds[4]) %>%
  htmlwidgets::onRender("
  function(el, t) {
    var myMap = this;
    var bounds = myMap.getBounds();
    var image = new L.ImageOverlay(
                      url='plot.PNG',
                      bounds);
    image.addTo(myMap);
  }") %>% addMouseCoordinates() %>%
  addRectangles(lng1 =430 ,lat1 =560 ,lng2 =577 ,lat2 = 445,
                popup = "Area: EG Tank <br> Classification: Danger 3",
                fillColor = "#b70000", color = "#b70000",
                highlightOptions =highlightOptions(color = "white", weight = 2,
                                                   bringToFront = TRUE)) %>%
  addRectangles(lng1 =430 ,lat1 = 432, lng2 =577 , lat2 =300  ,  popup = "Area: EG Tank <br> Classification: Danger 3", fillColor = "#f7da02", color ="#f7da02" ) 

^{Created on 2019-06-05 by the reprex package (v0.3.0)}

I want to use a local image instead of URL, please help. many thanks

[schloerke]

If the leaflet is hosted on a local machine, you can use a fully defined local path.

Something like file:///full/path/to/file/here/plot.PNG. If you open the image in the browser, you can copy the fully defined path from the location bar.

[Ammar-K]

thank you @schloerke for your help i have tried the full path url='file:///C:/Users/Cloud/Documents/R/DOW_FEI/plot.PNG', but it didn't work, I have used forward slash since I'm on a windows machine.

[schloerke]

I adjusted your code to use a local image file and it works on my machine 😕 .

---

Where are you doing this? (FF, IE11, RStudio?) (Mine was mac, chrome)

Assuming in a browser... Can you please right click and choose "inspect element". Once the debugger is open, can you refresh the page and report what errors are being displayed?

I'm wondering if it can't find the image, or if the file protocol is not allowed.

[Ammar-K]

@schloerke many thanks I'm using windows, chrome you are right i get this error when inspecting it in chrome "Not allowed to load local resource: file:///C:/Users/Cloud/Documents/R/DOW_FEI/plot.PNG" I think this error not related to leaflet anymore, but any help will be appreciated. cool pic by the way :)

[Ammar-K]

Ok, I have tried saving it as an HTML and it worked. sorry for the troubles.

[schloerke]

Thanks!

---

Just to be sure, your leaflet object is opening a local file, correct? What is the url for your leaflet image? A local file should be able to open a local file. (An http or https protocol will not be able to open a local file.)

[nonlinear1234]

Hi Ammar-K, could you clarify what you mean by "tried saving it as an HTML" ?? Are you referring to saving the shiny app as HTML or the image itself as HTML? I'm stuck with the same problem for a while now and would really appreciate some help. Thank you .

[Ammar-K]

Hi @nonlinear1234 in my case I didn't use Shiny, it was a simple HTML widget (you can check the code in the first post), and yeah by saving to HTML I meant to export the output from the code to local html (by simply clicking export and select "Save as web page" in Rstudio)

[nonlinear1234]

Thank you for your response and clarification. I have been trying to quite unsuccessfully do the same in a reactive context on a leaflet - shiny application. I am able to display a single image but it doesn't work when Shiny has to select an image based on user input. Does the package enable that @schloerke ??

Thank you again @Ammar-K

[schloerke]

@nonlinear1234 Can you open a new issue with a reprex? It will help me help you much faster.

[nonlinear1234]

@schloerke , I am unsure of whether it's a Leaflet issue, Shiny issue or that of leafpop/mapview. Would it be okay to open an issue under here? Thank you.

[schloerke]

https://github.com/rstudio/leaflet/issues/new works great