Version 0.6.* bug. Multiple Leaflet maps will no longer display correctly when alternating back and forth.

[actuarial-lonewolf]

Hi,

I'm developing a Shiny Flexdashboard with multiple Leaftlet maps in separate pages.
I expect the user to first see page 1, then move to page 2.
In the event the users goes back to page 1, the map 1 display will be broken with most of the map greyed out.

That buggy behavior is while using Flexdashboard 0.6.0 / 0.6.1.
In previous Flexdashbord version (0.5.2), the display is working correctly.

Note that this behavior is consistent while using either Leaflet 2.1.1 or 2.1.2, or any browser.

Code:

---
title: "Multiple Pages"
output: flexdashboard::flex_dashboard
runtime: shiny
---

```{r setup, include=FALSE}
library(flexdashboard)
library(leaflet)
```
Page 1
=====================================  
    
### Map 1
    
```{r}
 renderLeaflet({ leaflet() %>% addTiles() %>% addMarkers(lng=174.768, lat=-36.852, popup="The birthplace of R")  })
```
   
Page 2
=====================================     

### Map 2

```{r}
 renderLeaflet({ leaflet() %>% addTiles() %>% addMarkers(lng=-77.036560, lat=38.897957, popup="White House")})
```

[cpsievert]

I can't seem to replicate this with flexdashboard 0.6.1 / leaflet 2.1.2 / Chrome 113.0.5672.126.

Would you mind sharing a screen recording of the behavior you're seeing?

[actuarial-lonewolf]

Sure, please see here: https://youtu.be/TVvkPbXNi-0

It just so happen that I updated Chrome in-between my tests, so video is done on Version 114.0.5735.91. (latest).

I've tried on three different computers, that have all different setups with regards to Windows version, browser versions, language, ..., they all exhibit the same behavior.

[actuarial-lonewolf]

As a side note:

I have a partial workaround which is to detect whenever the user switches page. Using information from here..

Through a observeEvent( input$active_tab, ..., when the user changes tab, I call leafletProxy('mymap') which "refreshes" the map.

However, my Flexdashboard not only uses pages, but uses the Storyboard layout as well, with maps being within various frames of the Storyboard.

Now, I have not found any way to identify whenever the user switches Frame in the storyboard, to have a fully working workaround. Would you know how to identify such case?

[CCheCastaldo]

I am having the identical problem as @actuarial-lonewolf. However I don't want to reset the map when moving back to it but instead for the map to be just as I left it. Is this possible? This bug has my application dead in the water right now. Also, I am not switching between maps on different tabs but between a map and a plotly.

[CCheCastaldo]

I can also confirm that this behavior does not happen in version 0.5.2 but does happen in 0.6 fo flexdashboard

[hdolinh]

+1 I am also having the same issue with a tabset

[ConsultBuckner]

try this
map.invalidateSize()