Mapview support for COGs

[przell]

Are there any plans to support COGs in mapview. Our use case would be passing the url, or urls per band, to the COG directly to mapview? Have you considered leaflet extensions for COGs (georasterlayer for leaflet or stac-layer)?
Reading COGs with stars is possible and could be a workaround:

library(stars)
url = "/vsicurl/http://s3.eu-central-1.wasabisys.com/eumap/lcv/lcv_landcover.hcl_lucas.corine.rf_p_30m_0..0cm_2019_eumap_epsg3035_v0.1.tif"
gdal_utils("info", url)
r = read_stars(url)
plot(r)

[tim-salabim]

Servus,
I have a draft version of leafem:::addCOG which is currently not exported. Could you try if that works?

[przell]

I tried as follows... not sure if the call is correct though. It gives me an empty map only showing the open street map base layer.

url = "/vsicurl/http://s3.eu-central-1.wasabisys.com/eumap/lcv/lcv_landcover.hcl_lucas.corine.rf_p_30m_0..0cm_2019_eumap_epsg3035_v0.1.tif"
leaflet() %>% addTiles() %>% leafem:::addCOG(url = url)

[tim-salabim]

If you delete the "/vsicurl/" part of the link, things should work, I think.
At least, the browser console error is very clear then: EPSG:3035 is not supported by the current version of the JS lib...

So, unless you can find a COG in 4326 or 3857 I think we're out of luck (with the current implementation). I think there may have been updates upstream to support arbitrary projections in georaster-layer-for-leaflet but I need to dig into it a little more.

Maybe @DanielJDufour can shed some light on if this is supposed to work with georaster-layer-for-leaflet?

[DanielJDufour]

👋 hi all! Hope you are having a nice autumn.

Is mapview using the newest version of georaster-layer-for-leaflet? One of the newer versions added support for most projections.

I created another example which we can use to test this COG. Please see here:

https://geotiff.github.io/georaster-layer-for-leaflet-example/examples/load-cog-via-url-param.html?url=http%3A%2F%2Fs3.eu-central-1.wasabisys.com%2Feumap%2Flcv%2Flcv_landcover.hcl_lucas.corine.rf_p_30m_0..0cm_2019_eumap_epsg3035_v0.1.tif

You can see that it looks off when you first load it, but when you zoom in, it looks better.

I'm not sure what's to explain why it's off when zoomed out. I'll have to dive in.

[DanielJDufour]

@tim-salabim , nvm. It's something else. I'll submit a PR to leafem soon.

[tim-salabim]

@DanielJDufour thanks for your efforts! No, we're using a rather ancient version of georaster-layer-for-leaflet. I should be able to find some time tomorrow to update the dependency and test with the above example.

[DanielJDufour]

This "should" be addressed with r-spatial/leafem#48

[tim-salabim]

Thanks @DanielJDufour !
I also had to update georaster.min.js. It now works much better.

library(stars)
library(leaflet)
library(leafem)

url = "http://s3.eu-central-1.wasabisys.com/eumap/lcv/lcv_landcover.hcl_lucas.corine.rf_p_30m_0..0cm_2019_eumap_epsg3035_v0.1.tif"

leaflet() %>% 
  addTiles(group = "osm") %>% 
  addProviderTiles("Esri.WorldImagery", group = "esri") %>%
  addMapPane("cog", zIndex = 500) %>%
  setView(lng = 11.35, lat = 46.5, zoom = 12) %>%
  leafem:::addCOG(
    url = url
    , group = "corine"
    , opacity = 0.8
    , options = list(pane = "cog")
    , resolution = 128
    , autozoom = FALSE
  ) %>%
  addMouseCoordinates() %>%
  addLayersControl(
    baseGroups = c("osm", "esri")
    , overlayGroups = "corine"
  )

## test some others
url = 'http://s3.eu-central-1.wasabisys.com/eumap/aq/aq_pm25_et.eml_m_1km_na_2018.03.01..2018.03.31_eumap_epsg3035_v0.1prebeta.tif'
url = 'http://s3.eu-central-1.wasabisys.com/eumap/adm/adm_county_nuts.osm_c_30m_0..0cm_2021_eumap_epsg3035_v0.1.tif'

leaflet() %>% 
  addTiles(group = "osm") %>% 
  addProviderTiles("Esri.WorldImagery", group = "esri") %>%
  addMapPane("cog", zIndex = 500) %>%
  leafem:::addCOG(
    url = url
    , group = "cog-layer"
    , opacity = 0.7
    , options = list(pane = "cog")
    , resolution = 96
    , autozoom = TRUE
  ) %>%
  addMouseCoordinates() %>%
  addLayersControl(
    baseGroups = c("osm", "esri")
    , overlayGroups = "cog-layer"
  )

@przell it is still very alpha, as we currently cannot control coloring, for example. Still, I am closing this here, as all further dev needs to happen in leafem so please open an issue there if needed. Once this is all working as expected in leafem, I will provide a wrapper in mapview so that mapview("http://url/to/cog.tif") will work.

[przell]

I've tried to reproduce the examples above. I've updated mapview, leafem and leaflet to the latest CRAN version.
I still get empty maps though.
@tim-salabim could you share your SessionInfo?

url = "http://s3.eu-central-1.wasabisys.com/eumap/lcv/lcv_landcover.hcl_lucas.corine.rf_p_30m_0..0cm_2019_eumap_epsg3035_v0.1.tif"
url = 'http://s3.eu-central-1.wasabisys.com/eumap/aq/aq_pm25_et.eml_m_1km_na_2018.03.01..2018.03.31_eumap_epsg3035_v0.1prebeta.tif'
url = 'http://s3.eu-central-1.wasabisys.com/eumap/adm/adm_county_nuts.osm_c_30m_0..0cm_2021_eumap_epsg3035_v0.1.tif'
url = "https://geotiff.github.io/georaster-layer-for-leaflet-example/examples/load-cog-via-url-param.html?url=http%3A%2F%2Fs3.eu-central-1.wasabisys.com%2Feumap%2Flcv%2Flcv_landcover.hcl_lucas.corine.rf_p_30m_0..0cm_2019_eumap_epsg3035_v0.1.tif"

leaflet() %>% 
  addTiles(group = "osm") %>% 
  addProviderTiles("Esri.WorldImagery", group = "esri") %>%
  addMapPane("cog", zIndex = 500) %>%
  leafem:::addCOG(
    url = url
    , group = "cog-layer"
    , opacity = 0.7
    , options = list(pane = "cog")
    , resolution = 96
    , autozoom = TRUE
  ) %>%
  addMouseCoordinates() %>%
  addLayersControl(
    baseGroups = c("osm", "esri")
    , overlayGroups = "cog-layer"
  )

sessionInfo

> sessionInfo()
R version 4.0.5 (2021-03-31)
Platform: x86_64-pc-linux-gnu (64-bit)
Running under: Ubuntu 18.04.4 LTS

Matrix products: default
BLAS:   /usr/lib/x86_64-linux-gnu/blas/libblas.so.3.7.1
LAPACK: /usr/lib/x86_64-linux-gnu/lapack/liblapack.so.3.7.1

locale:
 [1] LC_CTYPE=C.UTF-8       LC_NUMERIC=C           LC_TIME=C.UTF-8        LC_COLLATE=C.UTF-8     LC_MONETARY=C.UTF-8    LC_MESSAGES=C.UTF-8   
 [7] LC_PAPER=C.UTF-8       LC_NAME=C              LC_ADDRESS=C           LC_TELEPHONE=C         LC_MEASUREMENT=C.UTF-8 LC_IDENTIFICATION=C   

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] leaflet_2.0.4.1 leafem_0.1.6    stars_0.5-3     sf_1.0-3        abind_1.4-5    

loaded via a namespace (and not attached):
 [1] Rcpp_1.0.7              pillar_1.6.4            compiler_4.0.5          base64enc_0.1-3         class_7.3-18           
 [6] tools_4.0.5             digest_0.6.28           jsonlite_1.7.2          lattice_0.20-41         lifecycle_1.0.1        
[11] tibble_3.1.5            png_0.1-7               pkgconfig_2.0.3         rlang_0.4.12            DBI_1.1.1              
[16] crosstalk_1.1.1         yaml_2.2.1              parallel_4.0.5          fastmap_1.1.0           terra_1.4-11           
[21] e1071_1.7-9             raster_3.5-2            dplyr_1.0.7             leaflet.providers_1.9.0 htmlwidgets_1.5.3      
[26] generics_0.1.1          vctrs_0.3.8             classInt_0.4-3          grid_4.0.5              tidyselect_1.1.1       
[31] glue_1.4.2              R6_2.5.1                fansi_0.5.0             sp_1.4-5                purrr_0.3.4            
[36] magrittr_2.0.1          codetools_0.2-18        ellipsis_0.3.2          htmltools_0.5.2         units_0.7-2            
[41] assertthat_0.2.1        utf8_1.2.2              KernSmooth_2.23-18      proxy_0.4-26            lwgeom_0.2-8           
[46] crayon_1.4.2           

[tim-salabim]

You need to install leafem from github

[przell]

Hi @tim-salabim and @DanielJDufour,
thanks for the quick fixes. I've finally verified that it works with the github version of leafem. We are planning to include a COG viewer in the openEO R-Client. Do you have any plans to release the changes to the CRAN versions of leafem and a wrapper for mapview soon?

[tim-salabim]

Np plans, no. Until when would you need it updated?

[tim-salabim]

I've just updated georaster-for-leaflet to the (supposedly) latest version (form https://unpkg.com/georaster-layer-for-leaflet@3.5.0/dist/georaster-layer-for-leaflet.min.js).

@DanielJDufour I still see some (projection) issues with your COG example. I am assuming that the issue of "looking off" at low zoom levels is still a lingering one?

library(leaflet)
library(leafem)

url = "https://georaster-layer-for-leaflet.s3.amazonaws.com/GHS_POP_E2015_GLOBE_R2019A_4326_9ss_V1_0.tif"

leaflet() %>% 
  addTiles(group = "osm") %>% 
  addProviderTiles("Esri.WorldImagery", group = "esri") %>%
  addMapPane("cog", zIndex = 500) %>%
  leafem:::addCOG(
    url = url
    , group = "cog-layer"
    , opacity = 0.7
    , options = list(pane = "cog")
    , resolution = 96
    , autozoom = TRUE
    # , colorOptions = colorOptions(
    #   palette = hcl.colors(3, "Inferno")
    #   , breaks = seq(0, 100, 1)
    #   , domain = c(0, 100)
    #   , na.color = "#ff00ff88"
    # )
    , pixelValuesToColorFn = JS(
      "function (values) {
             var scale = chroma.scale(['brown', 'orange', 'red']).domain([0,100,1000]);
             var population = values[0];
             if (population === -200) return;
             if (population < 0) return;
             return scale(population).hex();
       }"
    )
  ) %>%
  addMouseCoordinates() %>%
  addLayersControl(
    baseGroups = c("osm", "esri")
    , overlayGroups = "cog-layer"
  )

[DanielJDufour]

Hey, @tim-salabim . Sorry about that. I'll take a look. Could you provide a link to the basemap that you are using? Just so I can replicate as closely as possible this scenario when debugging. Thank you!

[tim-salabim]

The one you see in the image above should be

var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});

[mdsumner]

is there an open issue on the georaster-for-leaflet side @DanielJDufour ?

certainly this cog is well behaved, I'm keen to explore the js side a bit ;)

[przell]

We've just reused the code snippet from above for a demo at the LPS, while you are working on the integration into mapview etc. We used it with COGs generated by openEO platform and it worked! Thanks for that!

https://github.com/openEOPlatform/LPS_presentations/blob/main/demos/WWU_Web_Editor_Rclient/view_cog.R

https://github.com/openEOPlatform/LPS_presentations/blob/main/demos/WWU_Web_Editor_Rclient/LPS_RClient_Demo_2022.Rmd#L305