Leaflet map width after maximizing box

[marcin-karlinski]

Hi. First of all, thank you for a great package.

Recently, when working on a dashboard, I encountered an issue of Leaflet map not working (seemingly) correctly with bs4Dash box. Seems that after the box is maximized, leaflet map is not updating to reflect the new container width. I think this is a similar issue to this one: rstudio/leaflet#248. Tried a solution provided by Joe Cheng, but couldn't make it work (I'm not good at Javascript unfortunately).

Not completely sure if this is an issue with bs4Dash or not, but any help would be appreciated.

A reproducible example:

library(shiny)
library(bs4Dash)
library(leaflet)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    box(
      title = "Map",
      collapsible = TRUE,
      height = "80vh",
      width = 6,
      maximizable = TRUE,
      leafletOutput("map1", height = "100%")
    )
  )
)

server <- function(input, output, session) {
  output$map1 <- renderLeaflet({
    leaflet() %>% 
      setView(19.08, 60.25, zoom = 4) %>% 
      addTiles()
  })
  
}

shinyApp(ui, server)

[AshesITR]

See #146

library(shiny)
library(bs4Dash)
library(leaflet)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$head(
      tags$script(
        "$(function() {
          $('[data-card-widget=\"maximize\"]').on('click', function() {
            $('#map1').trigger('resize');
          });
        });
        "
      )
    ),
    box(
      title = "Map",
      collapsible = TRUE,
      height = "80vh",
      width = 6,
      maximizable = TRUE,
      leafletOutput("map1", height = "100%")
    )
  )
)

server <- function(input, output, session) {
  output$map1 <- renderLeaflet({
    leaflet() %>%
      setView(19.08, 60.25, zoom = 4) %>%
      addTiles()
  })

}

shinyApp(ui, server)