Search code examples
rleafletr-markdownblogdown

Browser inconsistency with the leaflet::addMapPane() function

I have a problem integrating leaflet maps in my blogdown website whenever using the addMapPane() function to create different panes. The problem is that, when using Safari, everything works fine, but when using Chrome, the tiles won't show at all.

This specific example can be viewed here (Please, open it with both Safari and Chrome to appreciate the difference).

One could isolate the problem easily by knitting this very simple Rmd document :

---
title: Browsers inconsistency with tiles
output: html_document
---

```{r}
library(leaflet)
leaflet(
  width = "100%"
) %>%
  addMapPane(
    name = "test",
    zIndex = 500L
  ) %>%
  addTiles(
    options = tileOptions(
      pane = "test"
    )
  )
```

When using Safari, the html page renders like below.

safari_html

This is the expected output, everything works fine. However, when opening the exact same html in Chrome, I see the following:

chrome_html

As one would see, the tiles are not rendering with Chrome. Since the browser seems to create the problem, I guess it could be css related, but I have no idea how to confirm this or (still better) fix this.

Anyone have a clue about this?

Solution

  • Add this css to your document:

    img.leaflet-tile {
    max-width: none !important;
    max-height: none !important;
}

    I don't know why it is working in Safari and why not in Firefox & Chrome but it has to do with this css class, because it is not applied:

    .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;
}