Leaflet Basemaps on Panes not visible

[trafficonese]

When a basemap is assigned to a leaflet pane, it will not appear in the final HTML file. See the original issue: r-spatial/mapview#349

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

I hope that it's a simple CSS-problem, as when I include the following CSS-snippet, the basemap shows up.

.leaflet-layer  {
    min-width: 400px;
}
.leaflet-tile-container {
    width: 100%;
}

---

By filing an issue to this repo, I promise that

• I have fully read the issue guide at https://yihui.org/issue/.
• I have provided the necessary information about my issue.
  • If I'm asking a question, I have already asked it on Stack Overflow or RStudio Community, waited for at least 24 hours, and included a link to my question there.
  • If I'm filing a bug report, I have included a minimal, self-contained, and reproducible example, and have also included xfun::session_info('rmarkdown'). I have upgraded all my packages to their latest versions (e.g., R, RStudio, and R packages), and also tried the development version: remotes::install_github('rstudio/rmarkdown').
  • If I have posted the same issue elsewhere, I have also mentioned it in this issue.
• I have learned the Github Markdown syntax, and formatted my issue correctly.

I understand that my issue may be closed if I don't fulfill my promises.

[cderv]

Hi,

I can reproduce the issue but I am not sure this is something to be fixed with rmarkdown. I don't see which configuration in the 📦 conflicts with leaflet.

Have you asked already in leaflet ? Maybe this is something to handle in there.

@jcheng5 @schloerke would you have an idea about how to help on this ? Is this more a leaflet issue ?
It does not seem to be an issue in a shiny app.

Here is a reprex with Rmd:

• test.Rmd content

---
title: leaflet missing css
output: html_document
params:
  css: FALSE
---

Are we using the css ? `r ifelse(params$css, "yes", "no")`

```{asis, echo = params$css}
We have included this css:
```

```{css, echo = params$css, eval = params$css}
.leaflet-layer  {
    min-width: 400px;
}
.leaflet-tile-container {
    width: 100%;
}
```

# Leaflet output

```{r}
library(leaflet)
leaflet() %>%
  addMapPane("right", zIndex = 0) %>%
  addTiles(group = "base", layerId = "baseid", options = tileOptions(pane = "right"))
```

1. Issue with the leaflet appearance: run rmarkdown::render("test.Rmd")
2. Adding the CSS fix it it seems: run rmarkdown::render("test.Rmd", params = list(css = TRUE))

[trafficonese]

Thanks for the quick response. No I have not opened an issue in leaflet. I was not sure where the bug was coming from and since I don't really understand the whole markdown process, I thought it would happen there.

And thank you for creating nice markdown in here. I was unable to do so as it always rendered the markdown as code.

[cderv]

Thanks for the quick response. No I have not opened an issue in leaflet. I was not sure where the bug was coming from and since I don't really understand the whole markdown process, I thought it would happen there.

You did the right thing, I ping leaflet maintainers to have their thoughts on this because I am not sure what to do inside rmarkdown as it is leaflet specific css. But it is nice to have a workaround.

And thank you for creating nice markdown in here. I was unable to do so as it always rendered the markdown as code.

The trick is explained in our issue guide (https://yihui.org/issue/#please-format-your-issue-correctly) - you can look for it for next time! 😉

[cderv]

Re-reading this now with fresh eye, I think this not related to rmarkdown directly.

From this comment in original issue r-spatial/mapview#349 (comment), I understand that
this works

library(leaflet)
leaflet() %>%
  addMapPane("tile", zIndex = 0) %>%
  addTiles(group = "base", layerId = "baseid", options = tileOptions(pane = "tile"))

whereas this doesn't

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

By comparing CSS rules between those two calls, the format will have the tile images inside .leaflet-tile-pane div

<div class="leaflet-pane leaflet-tile-pane" style="z-index: 0;">
	<div class="leaflet-layer " style="z-index: 1; opacity: 1;">
		<div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 18; transform: translate3d(0px, 112px, 0px) scale(1);">
           <img alt="" role="presentation" src="http://a.tile.openstreetmap.org/0/0/0.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(208px, 0px, 0px); opacity: 1;">
           <img alt="" role="presentation" src="http://a.tile.openstreetmap.org/0/0/0.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-48px, 0px, 0px); opacity: 1;">
           <img alt="" role="presentation" src="http://a.tile.openstreetmap.org/0/0/0.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(464px, 0px, 0px); opacity: 1;"></div>
	</div>
</div>

whereas the latter will be

<div class="leaflet-pane leaflet-right-pane" style="z-index: 0;">
	<div class="leaflet-layer " style="z-index: 1; opacity: 1;">
		<div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 18; transform: translate3d(0px, 112px, 0px) scale(1);">
            <img alt="" role="presentation" src="http://a.tile.openstreetmap.org/0/0/0.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(208px, 0px, 0px); opacity: 1;">
            <img alt="" role="presentation" src="http://a.tile.openstreetmap.org/0/0/0.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-48px, 0px, 0px); opacity: 1;">
           <img alt="" role="presentation" src="http://a.tile.openstreetmap.org/0/0/0.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(464px, 0px, 0px); opacity: 1;"></div>
	</div>
</div>

Only the class of outer div will change.

And in the former we have this rule that applies

.leaflet-container .leaflet-overlay-pane svg, .leaflet-container .leaflet-marker-pane img, .leaflet-container .leaflet-shadow-pane img, .leaflet-container .leaflet-tile-pane img, .leaflet-container img.leaflet-image-layer {
    max-width: none !important;
    max-height: none !important;
}

which won't apply on .leaflet-right-pane

This rules make the tile appears or not.

It comes from leaflet itself
https://github.com/Leaflet/Leaflet/blob/e9bc85952d955347bbfd0a2d7909fdc51f08a48a/dist/leaflet.css#L52-L61

It is there to be sure that img will show even if max-width is configured, which is the case in a R Markdown document. So I would say one case is missing in leaflet JS library.

We could patch in one of the layer but I would say this is a bug in leaflet JS.

@jcheng5 @schloerke do you already patch leaflet CSS somehow in the R package ?

[schloerke]

@cderv Great diagnostic!

Yes, we have patch CSS content put in https://github.com/rstudio/leaflet/blob/main/inst/htmlwidgets/lib/rstudio_leaflet/rstudio_leaflet.css

Do you mind submitting a PR? Thank you!

[cderv]

Perfect that was the hint I needed. Thank you ! I'll submit a PR.

[cderv]

This has been merged on leaflet's side to this should be fixed in next leaflet version.

Thanks for the report.

[github-actions]

This old thread has been automatically locked. If you think you have found something related to this, please open a new issue by following the issue guide (https://yihui.org/issue/), and link to this old issue if necessary.