Disappearing Barcharts when using leaflet with flexdashboard

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)

```

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

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? https://github.com/rstudio/leaflet/issues/new

1 Like

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

flexdashboard

1 Like

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 :slight_smile:

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

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.