leaflet.extra2 addSidebyside does not display basemap when is embedded in R Markdown

[csaybar]

Hi @trafficonese. First off, I would like to say thank you for all your effort in the development of this amazing package! :clap: :clap:

Description: When creating a Markdown file (.Rmd) that embeds a leaflet map that uses addSidebyside the basemap (e.g. addTiles & addProviderTiles) does not appear.

To Reproduce

reproducible example

---
title: "demo_01"
author: "csaybar"
date: "12/17/2020"
output: html_document
---

```{r}
library(sp)
library(leaflet)
library(leaflet.extras2)

leaflet(quakes) %>%
  addMapPane("left", zIndex = 0) %>%
  addMapPane("right", zIndex = 0) %>%
  addTiles(group = "base", layerId = "baseid",
           options = pathOptions(pane = "right")) %>%
  addProviderTiles(providers$CartoDB.DarkMatter, group="carto", layerId = "cartoid",
                   options = pathOptions(pane = "left")) %>%
  addCircleMarkers(data = breweries91[1:15,], color = "blue", group = "blue",
                   options = pathOptions(pane = "left")) %>%
  addCircleMarkers(data = breweries91[15:20,], color = "yellow", group = "yellow") %>%
  addCircleMarkers(data = breweries91[15:30,], color = "red", group = "red",
                   options = pathOptions(pane = "right")) %>%
  addLayersControl(overlayGroups = c("blue","red", "yellow")) %>%
  addSidebyside(layerId = "sidecontrols",
                rightId = "baseid",
                leftId = "cartoid")

Expected behavior Display the basemaps and the sidebar when the leaflet map is embedded in R Notebook files.

When I run the example before in R no problems appear :)

Relevant additional information about the system

R version 4.0.2 (2020-06-22) Platform: x86_64-pc-linux-gnu (64-bit) Running under: Ubuntu 20.10

Matrix products: default BLAS: /usr/lib/x86_64-linux-gnu/blas/libblas.so.3.9.0 LAPACK: /usr/lib/x86_64-linux-gnu/lapack/liblapack.so.3.9.0

locale: [1] LC_CTYPE=en_US.UTF-8 LC_NUMERIC=C LC_TIME=de_AT.UTF-8
[4] LC_COLLATE=en_US.UTF-8 LC_MONETARY=de_AT.UTF-8 LC_MESSAGES=en_US.UTF-8
[7] LC_PAPER=de_AT.UTF-8 LC_NAME=C LC_ADDRESS=C
[10] LC_TELEPHONE=C LC_MEASUREMENT=de_AT.UTF-8 LC_IDENTIFICATION=C

attached base packages: [1] stats graphics grDevices utils datasets methods base

other attached packages: [1] leaflet.extras2_1.1.0.9000 leaflet_2.0.3 sp_1.4-4

loaded via a namespace (and not attached): [1] rstudioapi_0.11 magrittr_1.5 knitr_1.30 lattice_0.20-41
[5] R6_2.5.0 rlang_0.4.8 fansi_0.4.1 tools_4.0.2
[9] grid_4.0.2 pkgbuild_1.1.0 xfun_0.18 tinytex_0.26
[13] cli_2.1.0 withr_2.3.0 crosstalk_1.1.0.1 htmltools_0.5.0
[17] remotes_2.2.0 yaml_2.2.1 digest_0.6.27 assertthat_0.2.1
[21] rprojroot_1.3-2 crayon_1.3.4 processx_3.4.4 callr_3.5.1
[25] htmlwidgets_1.5.2 ps_1.4.0 curl_4.3 glue_1.4.2
[29] evaluate_0.14 rmarkdown_2.5.2 compiler_4.0.2 leaflet.providers_1.9.0 [33] backports_1.1.10 prettyunits_1.1.1 jsonlite_1.7.1

Relevant additional information about the browser

• Version 1.17.75 Chromium: 87.0.4280.88 (Official Build) (64-bit)
• Version 84.0 (64-bit) Firefox

There are no errors appearing in the browser console.

[trafficonese]

Hey, indeed thats very interesting, but I am not sure if that is really a leaflet.extras2 bug. It seems that Tiles on a certain pane dont work. Removing all leaflet.extras2 code, the problem still appears.

---
title: "demo_01"
output: html_document
---

```{r}
library(sp)
library(leaflet)

leaflet(quakes) %>%
  addMapPane("right", zIndex = 0) %>%
  addTiles(group = "base", layerId = "baseid",
           options = pathOptions(pane = "right"))

[tim-salabim]

https://github.com/r-spatial/mapview/issues/349 also contains a link to an issue opened with the markdown people...

[trafficonese]

Great, thank you @tim-salabim , I knew that issue came up already somewhere, but didnt remember where.

[csaybar]

Thanks @trafficonese and @tim-salabim for your clues :v: :v:. Finally I was able to solve the problem ... partially. Unfortunately, my knowledge in JS is limited to fully understand the problem, but it seems that there is a conflict between leaflet-side-by-side and this line of code in markdown. https://github.com/rstudio/rmarkdown/blob/433e726ff5aee9cd14a285f756af814c44929c8d/inst/rmd/h/default.html#L212

If I remove it, leaflet.extra2 and mapview will work perfectly! :)

https://github.com/csaybar/rmarkdown/blob/193047afab503399f57c414bad30054c39e1ebcd/inst/rmd/h/default.html#L213

See this reproducible example:

Install rmarkdown

remotes::install_github("csaybar/rmarkdown")

Run the demo sidebar.Rmd.zip

Any idea how to finally solve this bug :bug:?

[trafficonese]

This should work now with the current dev version of leaflet, thanks to this PR https://github.com/rstudio/leaflet/pull/770