COG and addRasterRGB

[Tartomas]

Hi leafem Team! I'm wondering how can I try a COG RGB image (S2 or drone) base on your solution of leafem:::addCog. I have already work around single bands but I cant find any example using COG with RGB and other parameters like bands selection layers or stretching.

I have a multi band 9 layers of sentinel 2

sr = 'https://storage.googleapis.com/terramodels-prod/raster/BLACK_GLACIER/ANDES/SR/SR_S2SR_T19HCD_2019-01-01.tif'

leaflet(options = leafletOptions(attributionControl = FALSE)) %>% 
  setView(lng =-70.09841, lat = -33.037, zoom = 13) %>% 
  addTiles(group = "osm") %>% 
  addMapPane("cog", zIndex = 500) %>%
  leafem:::addCOG(
    url = sr, 
    group = "RGB", opacity = 0.7, 
    options = list(pane = "cog"), 
    resolution = 16,
    autozoom = FALSE,
    rgb = TRUE
    # , colorOptions = colorOptions(
    #   palette = grDevices::hcl.colors(3, "Inferno")
    #   , breaks = seq(0, 1, 0.2)
    #   , domain = c(0, 100)
    #   , na.color = "#ff00ff88"
    # )
    # , pixelValuesToColorFn = JS(js_scale)
  ) %>%

  # addMouseCoordinates() %>%
  addLayersControl(
    baseGroups = c("esri")
    , overlayGroups =  c("RGB")
  )

Best regards!

[tim-salabim]

Hi, addCOG is still very experimental. I'll put more work into this soon. In the meantime, can you share a multilayer example url that is not cors blocked (or if it's your resource set rules to allow cors)?

[Tartomas]

Hi Ti, thanks for your quick response.

Here you have a reprex using a public GCP bucket. I have set cors arguments as:

cors set up in GCP bucket

cat cors-bucket.json
[
    {
      "origin": ["*"],
      "responseHeader": ["Authorization", "Content-Range", "Accept", "Content-Type", "Origin", "Range"],
      "method": ["GET","POST"],
      "maxAgeSeconds": 300
    }
]

gsutil cors set cors-bucket.json gs://public-cog
gsutil cors get gs://public-cog

[{"maxAgeSeconds": 300, "method": ["GET", "POST"], "origin": ["*"], "responseHeader": ["Authorization", "Content-Range", "Accept", "Content-Type", "Origin", "Range"]}]

using QGIS

Here is a QGIS representation of the S2 Image with B11, B3 and B2 composite

Loading the NDSI index as add raster layer

Usign addCog NDSI & RGB

1. This is the code for NDSI index single layer
2. Trying example with RGB
3. Together in a single leaflet map

library(leafem)
library(leaflet)

# url of images ####
ndsi <- 'https://storage.googleapis.com/public-cog/NDSI_S2SR_T19HCD_2019-01-01.tif'
sr <- 'https://storage.googleapis.com/public-cog/SR_S2SR_T19HCD_2019-01-01.tif'
# Test NDSI ####

min_scale = 0; max_scale = 1
js_scale = paste0("function (values) {
                    var scale = chroma.scale(['white', '#22c7e8']).domain([", min_scale, ",", max_scale, "]);
                    var val = values[0];
                    if (val === 0) return;
                    if (val < 0) return;
                    return scale(val).hex();
                    }")

leaflet(options = leafletOptions(attributionControl = FALSE)) %>% 
  setView(lng =-70.09635, lat =  -33.01703, zoom = 13) %>% 
  addProviderTiles("Esri.WorldImagery", group = "esri") %>%
  addMapPane("cog", zIndex = 500) %>%
  leafem:::addCOG(
    url = ndsi
    , group = "NDSI"
    , opacity = 0.7
    , options = list(pane = "cog")
    # , resolution = 96
    , autozoom = FALSE
    , colorOptions = colorOptions(
      palette = grDevices::hcl.colors(3, "Inferno")
      , breaks = seq(0, 1, 0.2)
      , domain = c(0, 100)
      , na.color = "#ff00ff88"
    )
    , pixelValuesToColorFn = JS(js_scale)
  ) %>%
  addMouseCoordinates() %>%
  addLayersControl(
    baseGroups = c("esri")
    , overlayGroups =  c("NDSI")
  )

# Try with surface reflectance ####

leaflet(options = leafletOptions(attributionControl = FALSE)) %>% 
  setView(lng =-70.09635, lat =  -33.01703, zoom = 13) %>% 
  addTiles(group = "osm") %>% 
  addMapPane("cog", zIndex = 500) %>%
  leafem:::addCOG(
    url = sr, 
    group = "RGB", #opacity = 0.7, 
    options = list(pane = "cog"), 
    resolution = 2,
    autozoom = FALSE,
    rgb = TRUE
  ) %>%
  addLayersControl(
    baseGroups = c("esri")
    , overlayGroups =  c("RGB")
  )

# Together RGB and NDSI

leaflet(options = leafletOptions(attributionControl = FALSE)) %>% 
  setView(lng =-70.09635, lat =  -33.01703, zoom = 13) %>% 
  addProviderTiles("Esri.WorldImagery", group = "esri") %>%
  addMapPane("cog", zIndex = 500) %>%
  leafem:::addCOG(
    url = ndsi
    , group = "NDSI"
    , opacity = 0.7
    , options = list(pane = "cog")
    # , resolution = 96
    , autozoom = FALSE
    , colorOptions = colorOptions(
      palette = grDevices::hcl.colors(3, "Inferno")
      , breaks = seq(0, 1, 0.2)
      , domain = c(0, 100)
      , na.color = "#ff00ff88"
    )
    , pixelValuesToColorFn = JS(js_scale)
  ) %>%
  leafem:::addCOG(
    url = sr, 
    group = "RGB", opacity = 0.7, 
    options = list(pane = "cog"), 
    #resolution = 2,
    autozoom = FALSE,
    rgb = TRUE
  ) %>%
  addMouseCoordinates() %>%
  addLayersControl(
    baseGroups = c("esri")
    , overlayGroups =  c("NDSI",'RGB')
  )

[Tartomas]

@tim-salabim I get it done with RGEE wrapper explain here: #https://github.com/r-spatial/rgee/issues/235#issuecomment-1188745712 Nevertheless there is a real cold start using GEE API which I would like to avoid and this feature of addCog is an enhancement for the leafem package for remote sensing data.