2

I am having difficulties to control the size of the image resulting from popupImage (mapview package). Below is a reproducible shiny example where I have a single marker with a popup. When I set width = 300, the popup displays correctly, but I would like to display a bigger image.
width = 300

When setting width = 500, the popup displays larger, but a portion of it is greyed out and a scroll bar is added.
width=500.

How can I get width = 500 to display the image correctly?

I've messed around with css tags, worked through everything I could find on stackoverflow, and examined the GitHub documents. 

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

img = "https://cdn.sstatic.net/Sites/stackoverflow/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)
SeGa
  • 9,454
  • 3
  • 31
  • 70
olybear82
  • 25
  • 5

1 Answers1

1

The div-wrapper where the popup is, has a width of 301px as default apparently. You can change it with some css. 

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

img = "https://cdn.sstatic.net/Sites/stackoverflow/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)
SeGa
  • 9,454
  • 3
  • 31
  • 70
  • Thanks @SeGa, I'm at the infancy of my html/css learning. Quick question, in the above example how do I find the "selector" "leaflet-popup-content". I follow the other syntax. Thanks. – olybear82 Feb 06 '19 at 15:50
  • What exactly do you mean by finding the selector? This (`.leaflet-popup-content`) is already a selector. But if you want to find others, open the app in the browser, right click on the element you want to inspect and click 'Inspect element'. This will open a new window with all the html/css. By hovering over the html, the elemnt will be highlighted aswell, which makes it really easy. Btw, you can also upvote my answer, this will give us both some credit points ;) – SeGa Feb 06 '19 at 15:58
  • 1
    Thanks for your time @SeGa, I'm to new to register an upvote. Makes sense, I was able to find it, need more experience interacting with html! – olybear82 Feb 06 '19 at 16:07