cloud optimized geotiff (COG) as data source

[wiesehahn]

Are COGs supported by maplibe gl js?

I can not find any information which explicitly stated that its either possible or not.

For Raster source tiles are mentioned and Image source is for unreferenced images I guess.

[HarelM]

I don't think so.
Having said that, you can use addProtocol for stuff that are not supported out of the box.

[wiesehahn]

Is there a reason it is not possible out of the box to add COGs as data source?

I am not that deep in the topic, but as far as I understand the advantage of COGs is its internal tiling and the capability of serverless streaming among others. So it looks like its made for adding it as source to webmaps.

What am I missing?

[jimjam-slam]

I'm still getting my head MapLibre, but if COG support isn't an immediate priority, I'd love to collaborate with others on a plugin to add it using addProtocol 🥳

EDIT: As I understand it, the georaster-layer-for-leaflet plugin, alongside the georaster library, can make requests of COGs in a similar fashion (although I haven't taken a good look at them yet).

[acalcutt]

There was some information about using COGs in maplibre linked in this interview with MIERUNE ( https://maplibre.org/news/2022-06-10-mierune-announcement/ )

This was the article in Japanese
https://qiita.com/Kanahiro/items/70b3b8b11bd26cbaf30e

Translated to English
https://qiita-com.translate.goog/Kanahiro/items/70b3b8b11bd26cbaf30e?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=en&_x_tr_pto=wapp

[wiesehahn]

I would really appreciate to see a simple implementation which displays some COG with maplibre in the examples.

[frafra]

It would be great to have a library similar to PMTiles, but for COG; in the meanwhile, here are some resources:

• https://qiita.com/Kanahiro/items/70b3b8b11bd26cbaf30e#typescript
• https://github.com/blacha/lerc-cog-maplibre

[wiesehahn]

While there are some examples how to add COGs to maplibre out there I think it would be nice to add an "official" example to the examples (https://maplibre.org/maplibre-gl-js/docs/examples/).

There are already examples to add a WMS source and add a raster tile source, but COGs are getting more widely adopted from day to day.

E.g. Open Layers has a whole bunch of examples about COGs (https://openlayers.org/en/latest/examples/index.html?q=cog).

[HarelM]

If you build an example, I'll be happy to review it and add it to the examples in the docs site.
Building an example now is super simple, all you have to do is create an html page that displays the example you want to show in the tests/examples folder and create an image for it.
I don't have any COGs data nor the understanding of how to read or parse it, but using addProtocol should be simple I hope.
We added a few examples and test around addProtocol which should help.
If you are serious about creating an example, I'll be happy to guide you through the process.

[nicokant]

Hi, at NINA we are working on COG support on MapLibre, right now it's very simple, doesn't have great performances and assumes that the input COG meets some requirements.
Here is the PR that implements it: NINAnor/nina-map-explorer#4
We are also interested in adding it to the maplibre-gl-js library or alternatively to publish it as an npm package.

[HarelM]

• Remove callbacks, cancelable and simplify addProtocol #3433

[wipfli]

Would it be possible to include this inside maplibre-gl-js or you think it would be better to create an external package?

I think it would be best if it could be an external package. Maybe this will need some work on MapLibre to expose more functionality to plugins, but we are open to that in general I think...

[nicokant]

I've created a separated repository, and I'm trying to implement it as a plugin, it's still a work in progress so it's missing examples, tests and is not published on NPM. I plan soon to add some example and release it on NPM.
https://github.com/NINAnor/maplibre-gl-cog/

As for v4 support, it's definitely something we want to support, but with less priority than publishing on NPM and providing examples/documentation

[HarelM]

v4 is breaking addProtocol implementation so if you publish it before 4 is released, you'll need to either support both or decide how to deal with the breaking changes. Just saying. :-)

[nicokant]

The idea is to support both the protocol versions, I've seen that also maplibre-contour decided to have the same approach.

The package is published on npm: https://www.npmjs.com/package/@ninanor/maplibre-gl-cog

We are open for PRs and feedbacks!

[nicokant]

After a few experiments with COGs and Maplibre I would recommend to serve cloud optimized geotiffs using TiTiler, it's basically a python service that renders COGs on the fly by tile, using this you can render COGs as a zxy tiles. Moreover you don't need to pre-process your raster to apply a specific colormap, titiler supports changing the colormap on the fly as well.

[wiesehahn]

can you explain a little more why you do not recommend your previous solution as in maplibre-gl-cog?

[nicokant]

The strongest reason is applying colors, with my previous solution you need to create a cloud optimized geotiff pre-applying color to the whole raster, and if you have a single band raster you still need to normalize it and "manually" (I used some gdal scripts) create the other bands to mimic a 4 band PNG. Also the data type of the raster needs to be considered as the result needs to be an integer data type with a specific number of bits. You can also see in the README some examples of how I did that. This requires a lot of computation, and if you need different color maps applied you also will need to pre-compute them and to store multiple files.
The nice thing about TiTiler is that it uses COG ability to fetch single tiles to apply computation on-the-fly that can be cached, so you can have dynamic color maps applied to your rasters, but you can also write custom algorithms that can be very efficient because they work on a single tile rather than the whole raster.
TiTiler also provides a TileJSON endpoint, so using it with maplibre is straightforward and don't require custom protocols or custom code. TiTiler itself doesn't need a database and can be started as a standalone service, we use nginx to actually serve the COG files.

We are using this solution in production, check for example this link: https://maps.nina.no/datasets/NorwegianEcologicalNetworks. In this case the layers are rendered using a custom algorithm that tries to enhance contrast in the colormap to enhance local differences rather than using a global min/max. You can see that zooming in/out change how the colors are applied.

[reyemtm]

@nicokant did you look at the openlayers COG implementation? They have very robust COG support. The issue of course with using titiler is having to stand up a whole server (not sure if you have using serverless in your map above or not). OL has support for mosaics, RGB, color ramps which work on each tile, etc. Though it relies heavily on other libraries inside OL for creating the final image.

[reyemtm]

It seemed like you were on the right track with your library - at least it would be a start for exploring COGs without a server.

[nicokant]

I haven't actually looked at the OL implementation, it could be probably ported to maplibre but it would require probably some effort to make it work.

You can actually fork the repository and work on that if you want, I guess others could also benefit from this :)

Since titiler is actually serveless, and the result of applying colormaps can be cached (also serverside, not only in the browser) and you can easily extend it with custom algorithms using python and all the python libraries to manipulate images and numpy, for our needs it does not worth investing time to reimplement the same behavior in javascript

[reyemtm]

So the titiler instance you are running in the app above is running on serverless? Do you find that the performance meets your needs? I did not check load times for the raster tiles on that site but just curious. It sounds like it is and that performance is not the #1 reason you are using it… The trick in OL is that it already has functionality for manipulating images and just uses a very similar method to what you have put together here to then feed into that image pipeline.

…

On Apr 29, 2024, at 11:25 AM, Niccolò Cantù ***@***.***> wrote: I haven't actually looked at the OL implementation, it could be probably ported to maplibre but it would require probably some work to make it work. You can actually fork the repository and work on that if you want, I guess others could also benefit from this :) Since titiler is actually serveless, and the result of applying colormaps can be cached (also serverside, not only in the browser) and you can easily extend it with custom algorithms using python and all the python libraries to manipulate images and numpy, for our needs it does not worth investing time to reimplement the same behavior in javascript — Reply to this email directly, view it on GitHub <#1246 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABQ2HUJ4KC66IYJ62FH7JGDY7ZQ63AVCNFSM5WZQUSA2U5DIOJSWCZC7NNSXTOKENFZWG5LTONUW63SDN5WW2ZLOOQ5TSMRWGQ2DQNQ>. You are receiving this because you commented.