Disappearing Barcharts when using leaflet with flexdashboard

[john.smith]

Hi,

Im not sure if this question belongs in the shiny or RMarkdown category. Please move it if there are problems. This is probably something daft but i have been staring at it now for a couple of hours.

I have a flexdashboard with 2 menu items. When i include a map in both tabs my bar graphs from plotly disappear. If i simply leave my bar graphs as ggplot objects they appear in my flexdashboard. If i remove the second map all the charts appear again. Can anyone see where i have made a mistake. Apologies for the length of code. It only makes sense if you plug it into RStudio and save it as a .Rmd

Thank you for your help

---
title: "Reproducible Example"
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: scroll
    orientation: rows
---

```{r setup, include=FALSE}
library(nycflights13)
library(tidyverse)
library(leaflet)
library(plotly)
library(leaflet.extras)
library(flexdashboard)


map_data <- flights %>% 
  slice(1:1000) %>% 
  inner_join(airports, by = c('origin'='faa')) %>%
  select(flight, origin, dest, orig_lat = lat, orig_lon = lon) %>% 
  inner_join(airports, by = c('dest'='faa')) %>% 
  select(flight, origin, dest, orig_lat, orig_lon,
         dest_lat = lat, dest_lon = lon)

```

Airport View {data-navmenu="Report View"}
=====================================

Row {data-height=600}
-----------------------------------------------------------------------

### Outbound Maps

The Total Number of airports for this report is `r length(unique(airports$name))`

```{r}

# We generate layers based on the airports
ob_data <- map_data %>% 
  split(., .$origin)

objleaf <- leaflet() %>% 
  addTiles() 

names(ob_data) %>%
  purrr::walk(function(df) {
    objleaf <<- objleaf %>%
      addMarkers(data=ob_data[[df]],
                 lng=~orig_lon, lat=~orig_lat,
                 popup=~as.character(origin),
                 group = df,
                 clusterOptions = markerClusterOptions(removeOutsideVisibleBounds = F),
                 labelOptions = labelOptions(noHide = F, direction = 'auto')) 
  })

objleaf %>%
  addLayersControl(
    overlayGroups = names(ob_data),
    options = layersControlOptions(collapsed = FALSE)
  ) %>% 
  addResetMapButton() 

```

Row
-----------------------------------------------------------------------
### Random charts for Outbound

```{r}
x <- map_data %>% 
  group_by(origin) %>% 
  count() %>% 
  ggplot(aes(x=origin, y=n)) +
  geom_col() +
  coord_flip()

plotly::ggplotly(x)
```



Airport View {data-navmenu="Report View"}
=====================================

Row
-----------------------------------------------------------------------
### Inbound Maps

The Total Number of airports for this report is `r length(unique(airports$name))`

```{r}

# We generate layers based on the airports
ib_data <- map_data %>% 
  split(., .$dest)

objleaf <- leaflet() %>% 
  addTiles() 

names(ib_data) %>%
  purrr::walk(function(df) {
    objleaf <<- objleaf %>%
      addMarkers(data=ib_data[[df]],
                 lng=~dest_lon, lat=~dest_lat,
                 popup=~as.character(dest),
                 group = df,
                 clusterOptions = markerClusterOptions(removeOutsideVisibleBounds = F),
                 labelOptions = labelOptions(noHide = F, direction = 'auto')) 
  })

objleaf %>%
  addLayersControl(
    overlayGroups = names(ib_data),
    options = layersControlOptions(collapsed = FALSE)
  ) %>% 
  addResetMapButton() 

```

Row
-----------------------------------------------------------------------
### Make Some Random Charts for IB

```{r}

y <- map_data %>% 
  group_by(dest) %>% 
  count() %>% 
  ggplot(aes(x=dest, y=n)) +
  geom_col() +
  coord_flip()

plotly::ggplotly(y)

```

[jdb]

I'm not exactly sure whether this is a plotly or leaflet bug. I'm able to fix the problem if I add a call to ggplotly using a blank ggplot object. Maybe @cpsievert might have a better understanding of why.

---
title: "Reproducible Example - JDB"
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: scroll
    orientation: rows
---

```{r setup, include=FALSE}
library(nycflights13)
library(tidyverse)
library(leaflet)
library(plotly)
library(leaflet.extras)
library(flexdashboard)

map_data <- flights %>% 
  slice(1:1000) %>% 
  inner_join(airports, by = c('origin'='faa')) %>%
  select(flight, origin, dest, orig_lat = lat, orig_lon = lon) %>% 
  inner_join(airports, by = c('dest'='faa')) %>% 
  select(flight, origin, dest, orig_lat, orig_lon,
         dest_lat = lat, dest_lon = lon)
```

Airport View {data-navmenu="Report View"}
=====================================

Row {data-height=600}
-----------------------------------------------------------------------

### Outbound Maps

The Total Number of airports for this report is `r length(unique(airports$name))`

```{r, include = FALSE}
# Running a call to ggplotly prior to leaflet seems to fix the problem.
plotly::ggplotly(ggplot()) 
```

```{r}
# We generate layers based on the airports
ob_data <- map_data %>% 
  split(., .$origin)

objleaf <- leaflet() %>% 
  addTiles() 

names(ob_data) %>%
  purrr::walk(function(df) {
    objleaf <<- objleaf %>%
      addMarkers(data=ob_data[[df]],
                 lng=~orig_lon, lat=~orig_lat,
                 popup=~as.character(origin),
                 group = df,
                 clusterOptions = markerClusterOptions(removeOutsideVisibleBounds = F),
                 labelOptions = labelOptions(noHide = F, direction = 'auto')) 
  })

objleaf %>%
  addLayersControl(
    overlayGroups = names(ob_data),
    options = layersControlOptions(collapsed = FALSE)
  ) %>% 
  addResetMapButton() 
```

Row
-----------------------------------------------------------------------
### Random charts for Outbound

```{r}
x <- map_data %>% 
  group_by(origin) %>% 
  count() %>% 
  ggplot(aes(x=origin, y=n)) +
  geom_col() +
  coord_flip()

plotly::ggplotly(x)
```

Airport View {data-navmenu="Report View"}
=====================================

Row
-----------------------------------------------------------------------
### Inbound Maps

The Total Number of airports for this report is `r length(unique(airports$name))`

```{r}
# We generate layers based on the airports
ib_data <- map_data %>% 
  split(., .$dest)

objleaf <- leaflet() %>% 
  addTiles() 

names(ib_data) %>%
  purrr::walk(function(df) {
    objleaf <<- objleaf %>%
      addMarkers(data=ib_data[[df]],
                 lng=~dest_lon, lat=~dest_lat,
                 popup=~as.character(dest),
                 group = df,
                 clusterOptions = markerClusterOptions(removeOutsideVisibleBounds = F),
                 labelOptions = labelOptions(noHide = F, direction = 'auto')) 
  })

objleaf %>%
  addLayersControl(
    overlayGroups = names(ib_data),
    options = layersControlOptions(collapsed = FALSE)
  ) %>% 
  addResetMapButton() 
```

Row
-----------------------------------------------------------------------
### Make Some Random Charts for IB

```{r}
y <- map_data %>% 
  group_by(dest) %>% 
  count() %>% 
  ggplot(aes(x=dest, y=n)) +
  geom_col() +
  coord_flip()

plotly::ggplotly(y)
```

[cpsievert]

Interesting, I think this is a leaflet bug. Running the original example results in a leaflet JS error:

Would you please file a GitHub issue here? Sign in to GitHub · GitHub

[jdb]

I can also confirm that the above error also happens in my modified file:

[john.smith]

Hi @jdb

I marked your answer as the fix as it helps me in the short term. Thank you very much for the help and I'm glad it wasn't a symptom of ongoing madness from me

Hi @cpsievert

I added the report to github. If you need any more information from me or need me to test something I am at your disposal.

Thanks again for both of your time