Add tutorials for webmapping support (Openlayers, Leaflet, ...)

[olivierdalang]

Hi !

It's not really clear if COG are supported using widespread webmapping libraries (openlayers, leaflet, ...) or not. From what I could understand, it's perfectly feasible, but there's no implementation of COG layers (neither native, nor as extensions, and neither for ol nor for leaflet)

Following some links, I could find this : https://eox.at/2018/01/visualizing-geotiff-tiles-with-openlayers/ which initally looks like it, but then it seems it doesn't use HTTP GET range requests feature but still a pretiled geotiffs.

It's quite surprising as integrating with Openlayers or Leaflet is a very common scenario and looks like a perfect match for COG !

Cheers,

Olivier

[vincentsarago]

Hi @olivierdalang thanks for opening this issue.

COG could easily be supported by web mapping libraries but I'm not aware of any one with native support. There is a lot of happening for Javascript COG parsing over https://github.com/geotiffjs/geotiff.js.

I'm not sure what is the request then @olivierdalang, if you have content that could be added to the page feel free to share it here or open a PR and I'll be more than happy to review

[olivierdalang]

Thanks for the reply. The request is just to write about current COG support with common web mapping libraries, as currently it's simply absent from the website, and it takes quite a lot of research to understand where we're at with that.

Something like this (expanding just a little on what you said) :

COG could easily be supported by common web mapping libraries but
currently none offers native support or ready to use extensions.
Have a look at https://github.com/geotiffjs/geotiff.js for generic
javascript support, and let us know if you're working on some
implementations for some javascript webmapping library.

I guess if there was a readily available solution for that, COG would be much much more common, as it simplifies serving rasters drastically.

[jpaudoin]

Hi @olivierdalang About EOX libraries, and their COG explorer, you don't directly see the COG in action, because it is underneath. Storing GeoTIFF images in COG format is the best way to provide OGC services like WMS/WMTS on top of those images. And then WMTS (which it's tiled, that true) can be used for layered display purpose. So the HTTP range mechanism is hidden somewhere in the code of the WMTS service. Getting back to libraries, for Sentinel images, GDAL is usually used to cope with COG images. Cheers!

[cholmes]

@jpaudoin - COG explorer actually calls the geotiff directly and uses range requests - see the network tab:

@olivierdalang - it's a good suggestion to communicate openlayers / leaflet info on the website. And to actually see if we can advance COG to the point where there is an easy tutorial for each.

[m-mohr]

As far as I know there's a Leaflet extension for COGs by @DanielJDufour at https://github.com/GeoTIFF/georaster-layer-for-leaflet

Unfortunately, OpenLayers has no extension yet, but maybe we can work on something here: https://github.com/GeoTIFF/ol-geotiff

Edit: It seems there's also this: https://github.com/IvanSanchez/openlayers/tree/webgl-wip (not sure it includes COGs)

[DanielJDufour]

There's two examples of georaster-layer-for-leaflet that might be of interest:

• Loading a Cloud Optimized GeoTIFF via a script tag. You can view the source code here and the live demo here.
• Combining two Cloud Optimized GeoTIFF files together to create an NDVI map. You can view the source code here and the live demo here.