Add support for COG and STAC

[giswqs]

• Mapbox: https://docs.mapbox.com/mapbox-gl-js/example/map-tiles/
• MapLibre: https://maplibre.org/maplibre-gl-js-docs/example/map-tiles
• Cesium: Add support for custom pattern XYZ tiles for Raster overlay CesiumGS/cesium-unreal#863

[artttt]

I had a quick go at modifying your code for openlayers to open a COG.

I've been waiting for years for a tool like ipyleaflet that can display large raster without having to run a tile server. Seems like it is finally not too far fetched an idea.

function loadScript(src) {
    return new Promise((resolve, reject) => {
        let script = Object.assign(document.createElement("script"), {
            type: "text/javascript",
            async: true,
            src: src,
        });
        script.addEventListener("load", resolve);
        script.addEventListener("error", reject);
        document.body.appendChild(script);
    });
}
 await loadScript("https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js");
 await loadScript("https://cdn.jsdelivr.net/npm/[email protected]/dist-browser/geotiff.js");


export function render(view) {
    // Header
    let center = view.model.get("center");
    center.reverse();
    let zoom = view.model.get("zoom");
    let width = view.model.get("width");
    let height = view.model.get("height");

    const div = document.createElement("div");
    div.style.width = width;
    div.style.height = height;

    const source = new ol.source.GeoTIFF({
      sources: [
        {
          url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/36/Q/WD/2020/7/S2A_36QWD_20200701_0_L2A/TCI.tif',
        },
      ],
    });
    
    // Map content
    var map = new ol.Map({
        target: div,
        layers: [
        new ol.layer.WebGLTile({
          source: source,
        }),
        ],
        view: source.getView(),
    });
    view.el.appendChild(div);
}

[giswqs]

Nice! Can you submit a pull request for this?

[artttt]

Maybe if i take it further.
This is pretty hacky as i'm not experienced with javascript. It's a fairly basic mix of your code and this openlayers example.

https://openlayers.org/en/latest/examples/cog.html

[giswqs]

Another postential solution
https://github.com/stac-utils/stac-layer

[artttt]

The readme of that makes it sound like it can only show a cog overview. I may have mis understood.
This makes sense as all the cog implementations for leaflet I've found have that limitation.

OpenLayers seems to have very good cog handling.

[giswqs]

I have been using the TiTiler demo endpoint (https://titiler.xyz) for rendering COG/STAC. It incurres charges on their end. I would like to avoid using it if possible. We need a solution for rendering COG/STAC without a server.

[artttt]

I'm aware of that service.
I use
https://github.com/banesullivan/localtileserver
Which works ok.
I wrote (badly) a similar tool way back in 2017, and was wishing for a better way to view rasters in Jupyter for a few years before that. I'm obviously patient. 😃

[giswqs]

Leafmap supports both TiTiler (for remote COG) and localtileserver (for local COG).

import leafmap
url = 'https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2018-02-16/pine-gulch-fire20/1030010076004E00.tif'
m = leafmap.Map()
m.add_cog_layer(url)
m

It seems the localtileserver remote COG is not working at the moment. I am considering switch from the TiTiler demo point to localtileserver once the issue is fixed. However, we still need TiTiler to render STAC assets. I am not aware any other python package that can render STAC assets without a tile server.
banesullivan/localtileserver#172