从 r shiny 中的传单控制 popupImage 的大小

Question

我很难控制由 popupImage（mapview 包）生成的图像的大小。下面是一个可重现的闪亮示例，其中我有一个带有弹出窗口的标记。当我设置 width = 300 时，弹出窗口显示正确，但我想显示更大的图像。
width = 300

设置width = 500时，弹窗显示变大，但部分变灰，增加了滚动条
width=500.

怎样才能width = 500正确显示图像？

我弄乱了 css 标签，遍历了我在 Whosebug 上可以找到的所有内容，并检查了 GitHub 文档。

library(shiny)
library(leaflet)
library(dplyr)
library(mapview)

img = "https://cdn.sstatic.net/Sites/Whosebug/img/error-lolcat-problemz.jpg"

ui <- fluidPage(
  titlePanel("example"),
  sidebarLayout(
    sidebarPanel(width=2),# closes sidebar panel
  mainPanel(
    tags$style(type = "text/css", "#map {height: calc(85vh) !important;}"),
    leafletOutput(outputId = "map") 
))) 

server <- function(session, input, output) { 

output$map <- renderLeaflet({
  leaflet() %>% setView(lng= -96.83875, lat = 29.58518, zoom = 9)%>%
    addProviderTiles("Stamen.Toner") %>%
    addMarkers(lng= -96.83875, lat = 29.58518, popup = popupImage(img, embed= TRUE, width = 300))
  })}  

# Run app ----
shinyApp(ui, server)

Answer 1

弹出窗口所在的 div-wrapper，显然默认宽度为 301px。你可以用一些 css 来改变它。

library(shiny)
library(leaflet)
library(dplyr)
library(mapview)

img = "https://cdn.sstatic.net/Sites/Whosebug/img/error-lolcat-problemz.jpg"

csscode = HTML("
.leaflet-popup-content {
  width: 500px !important;
}")

ui <- fluidPage(
  titlePanel("example"),
  tags$head(tags$style(csscode)),
  sidebarLayout(
    sidebarPanel(width=2),# closes sidebar panel

    mainPanel(
      tags$style(type = "text/css", "#map {height: calc(85vh) !important;}"),
      leafletOutput(outputId = "map") 
    ))) 

server <- function(session, input, output) { 

  output$map <- renderLeaflet({
    leaflet() %>% setView(lng= -96.83875, lat = 29.58518, zoom = 9)%>%
      addProviderTiles("Stamen.Toner") %>%
      addMarkers(lng= -96.83875, lat = 29.58518,popup=popupImage(img,embed=TRUE,width=500))
  })}  

# Run app ----
shinyApp(ui, server)

从 r shiny 中的传单控制 popupImage 的大小

Control the size of popupImage from leaflet in r shiny

r

popup

android-mapview

leaflet

shiny