How to Render Custom Map Tiles Created with Gdal2Tiles in Leaflet for R

How to render custom map tiles created with gdal2tiles in Leaflet for R?

Figured it out. You have to use a "www" folder inside your Shiny directory. So in the question, I just had the folder "Tiles" and all of the tiled folders listed inside of it (0 - 7). Instead, move the Tiles folder inside a www directory (in my example, they are further moved into a folder called "map").

So instead of the above structure Tiles > x, it needs to be www > map > Tiles > x

leaflet() %>%
    addTiles(urlTemplate = "map/Tiles/{z}/{x}/{y}.png",
             option = tileOptions(tms = T, minZoom = 5, maxZoom = 9))

Render custom tiles in R leaflet from local directory (i.e. not from a git repository)

Add a ResourcePath inside server and it'll work, no need for the www folder anywhere. Source.

server <- function(input, output, session) {
    addResourcePath("mytiles", "C:/Users/.../mapTiles")
    output$map <- renderLeaflet({
      leaflet() %>% 
        addTiles(urlTemplate = "/mytiles/{z}/{x}/{y}.png")
    })

Rendering large tile dataset

I have a solution from the package's Github repo issues page. For anyone who may experience issues in the future, it turns out that the flag tms=TRUE is required in tileOptions. I thank Barret Schloerke for his help with this. His full (working) code is copied below and can be found here on Github.

library(leaflet)
library(rgdal)
library(leaflet.extras)
library(mapview)

leaflet() %>%
  addMouseCoordinates() %>%

  # Set high zoom level as I have only created tiles at zoom level 6 for a quick example. If you can get this to display, it'll be tough to discern as it's quite zoomed out!

  # This should center the view somewhere over the UK where my tiles have been created  
  setView(0, 51.5135085, zoom = 6) %>%
  # Added toner provider tiles as the white background makes it easier to see my custom tiles
  addProviderTiles(group = "Toner", providers$Stamen.Toner) %>%
  addTiles(group="test", urlTemplate = "https://simon-tarr.github.io/tilestest/tiles/{z}/{x}/{y}.png",
           options = tileOptions(tms = TRUE, minZoom = 6, maxZoom = 6)) %>% 
  addLayersControl(
    overlayGroups = c("test"),
    options = layersControlOptions(collapsed = FALSE)

  )

R: Using addResourcePath for rendering local leaflet tiles

In my case, I create my own tiles via gdal2tiles, which takes your data and automatically creates a {z}/{x}/{y}.png folder structure. Please see this link for a nice tutorial and what i mean about the file structure;

+---14
|   +---8185
|     +---5460.png
|     +---5461.png
|     +---etc.png
|   \---8186

# I use the following server (see how my addTiles has a folder structure)
server <- function(input, output,session) {
   addResourcePath("mytiles", "C:/.../tiles")
   output$tilemap <- renderLeaflet({
     leaflet() %>%
       setView(lng = -4.4, lat = 52, zoom = 12) %>%
       addTiles(urlTemplate = "mytiles/{z}/{x}/{y}.png")

   })
}

Now, as you are downloading tiles from Google Maps to your hard drive, you'll want a slightly different approach as the files are downloaded in a {z}_{x}_{y}.png format, and not produced into a file structure like gdal creates;

+---11_1098_671.png
etc.

so you need to adjust your addTiles code to reflect this, using underscores, like the Google filenames;

server <- function(input, output,session) {
  addResourcePath("mytiles", "C:/.../OSM")
  output$tilemap <- renderLeaflet({
    leaflet() %>%
      setView(lng = 13.194773, lat = 52.431635, zoom = 11) %>%
      addTiles(urlTemplate = "mytiles/{z}_{x}_{y}.png")

  })

}

Lastly, my setView arguments are in a different order to yours but i'm not sure whether that makes a difference or not.

Using custom map image tiles in LeafletJS?

You are looking for a TileLayer. In this TileLayer, you give the URL for the to-be-fetched images to leaflet with a template like this:

http://{s}.somedomain.com/blabla/{z}/{x}/{y}.png

When you are at the specified zoom, x and y level, Leaflet will automatically fetch the tiles on the URL you gave.

Depending on the image you want to show, the bigger part of the work will however be in the tile generation. Tiles by default have a 256x256px size (can be changed in the TileLayer options), and if you are using geodata the used projection is Mercator projection. It may take some time to get the tile ids right. Here is an example on how the tile ids work.

---

Related Topics