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()

[dempsey-CMAR]

Has anyone found a solution to this? I am running into the same issue (map is greyed out when I switch back to it from another tab) using leaflet version 2.2.2 and flexdashboard version 0.6.2.

[CCheCastaldo]

@dempsey-CMAR I don't think this package is under active development any longer

[dempsey-CMAR]

Ok - thanks @CCheCastaldo!

[gadenbuie]

This package isn't under active development, but we do keep an eye on it and maintain it. Unfortunately, like Carson, I can't reproduce the issue in Chrome, Safari or Firefox with leaflet 2.2.2 and flexdashboard 0.6.2.

The maps do jump around a bit when switching between tabs. While it'd be nice if it were smoother, that might not be something we can control -- it's the leaflet.js library reacting to a resize event, which is required because the map goes from hidden to visible when you return to the tab. So what I see locally resembles the video shared above, but the maps display correctly when returning to the tab.

It's also possible that the example in the initial post doesn't fully capture the problem that others are seeing. If anyone can share an example that reproduces the issue we'll look into it!

[dempsey-CMAR]

The example below demonstrates the issue on my machine. A few things I noticed:

• When I comment out Map 2 and Map 3, I can toggle between Map 1 and Empty Tab with no problems.
• When I comment out Map 3, Map 1 and Map 2 open fine, BUT if I toggle to Map 2 then back to Map 1, Map 1 will be glitchy. The circle marker is no longer visible and most of the map is blank. Map 2 stays fine.
• Similarly, with all Maps un-commented, Map 1 and Map 2 are glitchy, but Map 3 is fine.
• If I go directly from one of the Maps to Empty tab, then back to the same map, it looks fine.

**Edit: sorry, I can't figure out how to paste the RMarkdown code here without the editor showing the formatted text instead of just the code

**Edit 2: Sort of fixed the formatting. If you copy the code, you will need to remove a \ at the end of each code chunk.

---
title: "Demo Leaflet Bug"
output:
  flexdashboard::flex_dashboard:
    orientation: rows
runtime: shiny
---

```{r setup, echo=FALSE, include=FALSE}
library(leaflet)
\```

Example
=======================================

Col {.tabset}
-------------------------------------

### Map 1
```{r}
renderLeaflet({
  dat1 <- data.frame(
  latitude = 44.568, longitude = -63.554, station = "example")
  
  leaflet() |>
    addProviderTiles(providers$CartoDB.Positron) |>
    addCircleMarkers(
      data = dat1,
      lng = ~longitude, 
      lat = ~latitude, 
      label = ~station
    ) 
})
\```

### Map 2
```{r}
renderLeaflet({
  dat2 <- data.frame(
    latitude = 44.613, longitude = -63.530, station = "example")
  
  leaflet() |>
    addProviderTiles(providers$CartoDB.Positron) |>
    addCircleMarkers(
      data = dat2,
      lng = ~longitude, 
      lat = ~latitude, 
      label = ~station
    ) 
})
\```

### Map 3
```{r}
renderLeaflet({
  dat3 <- data.frame(
    latitude = 44.704, longitude = -63.649, station = "example")
  
  leaflet() |>
    addProviderTiles(providers$CartoDB.Positron) |>
    addCircleMarkers(
      data = dat3,
      lng = ~longitude, 
      lat = ~latitude, 
      label = ~station
    ) 
})
\```

### Empty Tab