Plots not rendering correctly in HTML R Markdown tabset documents

[jeffreyptruong]

Hi mapdeck team,

I've been trying to embed some mapdeck plots in a HTML R Markdown document. The maps do not appear to render correctly after the first tab within a tabset layout.

The first plot renders normally:

The second plot however seems clipped:

The attached txt file includes the code: MapdeckTabDocument.txt

Cheers,

Jeff

[SymbolixAU]

Can you add the code as a code-chunk to your issue please?

[jeffreyptruong]

Added is the code below as requested:

---
title: "Tab layout"
output:
  html_document
---

```{r, include=FALSE}
#---------------------------------------------------------------------------------------------------
### Libraries
library(tidyverse)
library(mapdeck)

#---------------------------------------------------------------------------------------------------
### Constants
#Mapbox token
key = ""

#---------------------------------------------------------------------------------------------------
###Importing and tidying data
#Setting up Arc Demo Plot
url <- 'https://raw.githubusercontent.com/plotly/datasets/master/2011_february_aa_flight_paths.csv'
flights <- read.csv(url)
flights$id <- seq_len(nrow(flights))
flights$stroke <- sample(1:3, size = nrow(flights), replace = T)

#Setting up Paths Demo Plot
url <- 'https://raw.githubusercontent.com/plotly/datasets/master/2011_february_aa_flight_paths.csv'
flights <- read.csv(url)
flights$id <- seq_len(nrow(flights))
flights$stroke <- sample(1:3, size = nrow(flights), replace = T)

#---------------------------------------------------------------------------------------------------
###Visualising
MapdeckArcDemoPlot <- mapdeck( token = key, style = 'mapbox://styles/mapbox/dark-v9', pitch = 45 ) %>%
  add_arc(
    data = flights
    , layer_id = "arc_layer"
    , origin = c("start_lon", "start_lat")
    , destination = c("end_lon", "end_lat")
    , stroke_from = "airport1"
    , stroke_to = "airport2"
    , stroke_width = "stroke"
  )

MapdeckPathDemoPlot <- mapdeck( token = key, style = mapdeck_style("dark"), pitch = 45 ) %>%
  add_line(
    data = flights
    , layer_id = "line_layer"
    , origin = c("start_lon", "start_lat")
    , destination = c("end_lon", "end_lat")
    , stroke_colour = "airport1"
    , stroke_width = "stroke"
  )

Mapdeck plots {.tabset}

ArcDemoPlot

MapdeckArcDemoPlot

PathDemoPlot

MapdeckPathDemoPlot

[SymbolixAU]

Thanks, I can run your code, but I'm not seeing the same behaviour as you

I'll keep this issue open because I think it's worth investigating, so happy to hear any ideas you have too.

[jeffreyptruong]

I've tried running the code on multiple machines (Windows and Ubuntu) and in all instances the clipped version is produced. I thought it could be browser related but testing across multiple browsers also resulted in clipped results.

I don't have a lot of background on the rendering process but I've noticed clipping seems to occur to the order which the maps are rendered.

When I refresh the HTML file then quickly swap to the second tab before the first tab fully renders, the second tab is no longer clipped while the first tab becomes clipped.

[SymbolixAU]

Do you get any errors or warnings in the javascript console in the browser?

In chrome press Ctrl + shift + C (windows) / Cmd + shift + C (Mac)

[jeffreyptruong]

There does not seem to be errors showing:

[SymbolixAU]

Could you give the latest dev version a try - install instructions are here ?

[jeffreyptruong]

I just tested out the dev version and it seems to be working well 👍

[SymbolixAU]

well that's a good sign. No idea why it's fixed though...