How to adjust the size of popup image in leaflet map in flexdashboard?

Question

There is a similar question for R shiny here:Control the size of popupImage from leaflet in r shiny

But I am using flexdashboard. I have no background in CSS. How can I adjust the size? Sample code below:

library(leaflet)
library(mapview)
leaflet() %>%
  addProviderTiles(providers$Esri.WorldStreetMap) %>% 
  addRectangles(
    lng1 = bbox_north2$p1$long, lat1 = bbox_north2$p1$lat,
    lng2 = bbox_north2$p2$long, lat2 = bbox_north2$p2$lat,
    fillColor = "red", stroke = FALSE,
    popup = popupImage(here::here("products", "north1.png"), width = 800, height = 600, embed = TRUE)

When setting width = 800, the popup displays larger, but a portion of it is greyed out.

Answer 1

Disclaimer: mapview developer here.

First of all, please note that the popup*() functions from mapview have been moved to a more light-weight package called leafpop. Though on CRAN, for this problem we need the development version from github which can be found here. - Uncomment the remotes::install_githib() call in the example below to get the latest version.

There have been numerous issues with the mapview popup functions that have lead me to rewrite most of them (including popupImage()). The rewriting introduces a new API design which is necessary as we need to have access to the map object. So for your issue at hand, the following should remedy your problem:

# remotes::install_github("r-spatial/leafpop")
library(leaflet)
library(leafpop)

img = "/path/to/some/image.png"

# does not work properly - image is clipped in y
leaflet() %>%
  addTiles() %>%
  addPolygons(data = franconia[1, ], popup = popupImage(img, width = 400))

# works
leaflet() %>%
  addTiles() %>%
  addPolygons(data = franconia[1, ], group = "fran") %>%
  addPopupImages(image = img, group = "fran", width = 400)

Basically, you first create the (data) layer with the respective leaflet::add*() function (in the example case above addPolygons()) and then register the images as popups using addPopupImges() identifying the layer with the group argument. This should enable you to set whatever width and height you want (though I think the maxwidth value is 2000 pixels).