leaflet side-by-side for 2 raster images in R

Question

{leaflet.extras2} implements the leaflet side-by-side plugin and provides this minimal example:

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")

However, when adapting to two `raster` images, I encounter the error:

Error in addRasterImage(., r2, colors = pal2, options = pathOptions(pane = "right"),  : 
  unused argument (options = pathOptions(pane = "right"))

Here is a reproducible example:

library(raster)
library(leaflet)
library(leaflet.extras2)
library(rcartocolor)

# example raster data
r1 <- r2 <- raster(system.file("external/test.grd", package = "raster"))

# color palettes
pal1 <- colorNumeric(carto_pal(name = "OrYel"), 
                     values(r1), na.color = "transparent")
pal2 <- colorNumeric(carto_pal(name = "BluYl"), 
                     values(r2), na.color = "transparent")

# side by side map
leaflet() %>% 
  addMapPane("left",  zIndex = 0) %>%
  addMapPane("right", zIndex = 0) %>%
  addTiles(group = "base", layerId = "baseid",
           options = pathOptions(pane = "right")) %>%
  addTiles(group = "carto", layerId = "cartoid",
           options = pathOptions(pane = "left")) %>%
  addRasterImage(r1, colors = pal1, 
                 options = pathOptions(pane = "right"), group = "r1") %>%
  addRasterImage(r2, colors = pal2, 
                 options = pathOptions(pane = "right"), group = "r2") %>%
  addLayersControl(overlayGroups = c("r1", "r2")) %>% 
  addSidebyside(layerId = "sidecontrols",
                rightId = "baseid",
                leftId  = "cartoid")

Having trouble following your use of `options=pathOptions`, that only appear like they'd be recognized in circleMarkers and polyLines, where `pathOption` are known function arguments. — Chris, Mar 30 '22 at 00:14
@Rich Pauloo: It worked for me if I removed `options = pathOptions(pane = "right")` — Tung, Mar 30 '22 at 00:26
Thanks for the attention Chris and Tung. You're right that we don't need `pathOptions` for raster images, but take a closer look at the min ex. You can toggle on each layer and see that they perfectly overlap. I'm looking for a slider to phase between two rasters, like what's implemented here: https://github.com/r-spatial/slideview, however, I can't seem to make the starter example work. Maybe I'm asking side-by-side to do something it's not designed to do? — Rich Pauloo, Mar 30 '22 at 07:30

Radovan Miletić · Accepted Answer · 2022-09-08T13:52:31.950

The solution is pointed here by @RexParsons.
You will need addRasterImage's options = leafletOptions(pane = "") that will be added to {leaflet} on next release.
Step 1: for now you can install raster-options:

remotes::install_github("rstudio/leaflet", ref="joe/feature/raster-options")

Step 2: Session -> Restart R

Step 3: add options = leafletOptions(pane = ""):

leaflet() |> 
  addMapPane("right", zIndex = 0) |> 
  addMapPane("left",  zIndex = 0) |>
  addTiles(group = "base", layerId = "baseid1", options = pathOptions(pane = "right")) |> 
  addTiles(group = "base", layerId = "baseid2", options = pathOptions(pane = "left")) |> 
  addRasterImage(x = r1, colors = pal1, options = leafletOptions(pane = "right"), group = "r1") |> 
  addRasterImage(x = r2, colors = pal2, options = leafletOptions(pane = "left"), group = "r2") |> 
  addLayersControl(overlayGroups = c("r1", "r2")) |>  
  addSidebyside(layerId = "sidecontrols",
                rightId = "baseid1",
                leftId  = "baseid2")

Output:

Option 2 (with addProviderTiles):

leaflet() |> 
  addMapPane("right", zIndex = 0) |> 
  addMapPane("left",  zIndex = 0) |>
  addTiles(group = "base", layerId = "baseid", options = pathOptions(pane = "right")) |>
  addProviderTiles(providers$CartoDB, group="carto", layerId = "cartoid", options = pathOptions(pane = "left")) |> 
  addRasterImage(x = r1, colors = pal1, options = leafletOptions(pane = "right"), group = "r1") |> 
  addRasterImage(x = r2, colors = pal2, options = leafletOptions(pane = "left"), group = "r2") |> 
  addLayersControl(overlayGroups = c("r1", "r2")) |>  
  addSidebyside(layerId = "sidecontrols",
                rightId = "baseid",
                leftId  = "cartoid")

Output:

Does it work for you?

<-- Partial answer to the @oatmilkyway's question below -->
Someone need to find a way to (conditionally) add/remove the leaflet.extras2::addSidebyside's layerId's, as one of possible solutions (if already exists, please let me know).

leaflet() |> 
  addMapPane("right", zIndex = 0) |> 
  addMapPane("left", zIndex = 0) |>
  addTiles(group = "Base map", layerId = "baseid1", options = pathOptions(pane = "right")) |> 
  addTiles(group = "Base map", layerId = "baseid2", options = pathOptions(pane = "left")) |> 
  addProviderTiles(provider = providers$Esri.WorldImagery, group = "Satellite map", layerId = "satelliteid1", options = pathOptions(pane = "right")) |>
  addProviderTiles(provider = providers$Esri.WorldImagery, group = "Satellite map", layerId = "satelliteid2", options = pathOptions(pane = "left")) |>
  addRasterImage(x = r1, colors = pal1, options = leafletOptions(pane = "right"), group = "raster image 1") |> 
  addRasterImage(x = r2, colors = pal2, options = leafletOptions(pane = "left"), group = "raster image 2") |> 
  addLayersControl(baseGroups = c("Base map", "Satellite map"),
                   overlayGroups = c("raster image 1", "raster image 2")) |>  
  addSidebyside(layerId = "sidecontrols2", rightId = "satelliteid1", leftId  = "satelliteid2") |>
  addSidebyside(layerId = "sidecontrols", rightId = "baseid1", leftId  = "baseid2")

leaflet() |> 
  addMapPane("right", zIndex = 0) |> 
  addMapPane("left", zIndex = 0) |>
  addTiles(group = "Base and Carto Positron maps", layerId = "baseid", options = pathOptions(pane = "right")) |>
  addProviderTiles(provider = providers$CartoDB.Positron, group = "Base and Carto Positron maps", layerId = "cartoid", options = pathOptions(pane = "left")) |>
  addProviderTiles(provider = providers$Esri.WorldImagery, group = "Satellite and Toner Lite maps", layerId = "satelliteid", options = pathOptions(pane = "right")) |>
  addProviderTiles(provider = providers$Stamen.TonerLite, group = "Satellite and Toner Lite maps", layerId = "tonerlightid", options = pathOptions(pane = "left")) |>
  addRasterImage(x = r1, colors = pal1, options = leafletOptions(pane = "right"), group = "raster image 1") |> 
  addRasterImage(x = r2, colors = pal2, options = leafletOptions(pane = "left"), group = "raster image 2") |>
  addLayersControl(baseGroups = c("Base and Carto Positron maps", "Satellite and Toner Lite maps"),
                   overlayGroups = c("raster image 1", "raster image 2"),
                   options = layersControlOptions(collapsed = FALSE)) |> 
  addSidebyside(layerId = "sidecontrols2", rightId = "satelliteid", leftId  = "tonerlightid") |>
  addSidebyside(layerId = "sidecontrols", rightId = "baseid", leftId  = "cartoid")

Output:

Although this is a clunky answer at best, I hope it may help you.

Great documentation! Do you know how to add a control layer to change the basemap that affects both left and right panes simultaneously? For example, have a Positron basemap and an aerial image basemap, and the user selects which ones they want, and both left and right panes update to that basemap? — oatmilkyway, Aug 17 '22 at 19:25
Sorry for the late response @oatmilkyway, I was "out of office". See above for partial answer. — Radovan Miletić, Sep 08 '22 at 13:52

leaflet side-by-side for 2 raster images in R

However, when adapting to two raster images, I encounter the error:

1 Answers1

However, when adapting to two `raster` images, I encounter the error: