Decide on Usage

[DanielJDufour]

WORK IN PROGRESS

Requirements

This functionality does not necessarily have to exist within the class(es) we create, but should be available

• change opacity
• create composite image of multiple cogs (one for each band)
• create custom render function (so people can do NDVI, analysis, etc.)
• support GeoTIFF files loaded in memory (uploaded in browser?) maybe as separate source

Relevant OpenLayers Classes

• Image.js: assumes an untiled image
• Raster.js: Recolor images. Could be used for band arithmetic (like NDVI). example
• IIF: Example of creating a layer from a remote service, but depends on data coming from just get request without bytes header example
• UrlTile - base class for sources that have data broken up into tiles. doesn't include functionality for requesting bytes though
• TileImage: Assumes URL loading and XYZ access
• Tile.js: Gives you XYZ and requires you figure out what pixels fall within that square

here's different possibilities for usage

TileLayer

Create COG Source by Extending Tile.js
Use TileLayer like https://openlayers.org/en/latest/examples/iiif.html?q=tile

import COG from 'ol/source/COG';
import TileLayer from 'ol/layer/Tile';

var layer = new TileLayer({
    source: new COG({
        attributions: 'Planet',
        url: 'https://s3-us-west-2.amazonaws.com/planet-disaster-data/hurricane-harvey/SkySat_Freeport_s03_20170831T162740Z3.tif'
    })
})

TileLayer (with NDVI)

import COG from 'ol/source/COG';
import TileLayer from 'ol/layer/Tile';
import RasterSource from 'ol/source/Raster';

var cog = new COG({
    attributions: 'Planet',
    url: 'https://...some-derived-ag.tif'
});
var raster = new Raster({
  sources: [cog],
  operation: function(pixels, data) {
    const value = pixels[0];
    if (value > 120) {
      return [0,0,0,0.5];
  } else {
      return [255, 255, 255, 0.5];
  }
});

var map = new Map({
  layers: [
    new ImageLayer({
      sources: [raster]
    })
  ]
});

COG Source Usage

Different from static usage in that, can put projection from remote, but can over-ride default

Automatically determines its extent, but can over-ride with imageExtent

import COGSource from 'ol/source/COG';

var source = new COGSource({
    attributions: 'Planet',
    url: 'https://s3-us-west-2.amazonaws.com/planet-disaster-data/hurricane-harvey/SkySat_Freeport_s03_20170831T162740Z3.tif'
});

Alternative

ImageLayer appears to be synchronous once the file is ready...whereas with COGs we would have
to asynchronously fetch data as map updates

new ImageLayer({
    opacity: 0.7,
    source: new Raster({
        sources: [cog],
        operationType: 'pixel',
        operation: function(pixels, data) {
            var pixel = pixels[0];
            return [pixel[0] + 10, pixel[1] + 10, pixel[2] + 10, 0.7];
        }
    })
})

Basic Usage

import 'ol/ol.css';
import Map from 'ol/Map';
import COGSource from 'ol/source/COG';
import COGLayer from 'ol/layer/GeoTIFF';

var layer = new COGLayer({
    source: new COGSource({
        attributions: 'Planet',
        url: 'https://s3-us-west-2.amazonaws.com/planet-disaster-data/hurricane-harvey/SkySat_Freeport_s03_20170831T162740Z3.tif'
    })
});

map = new Map({
    layers: [layer],
    target: 'map'
});

Change Opacity

Opacity functionality could use default opacity functionality from base OL Layer class https://openlayers.org/en/latest/apidoc/module-ol_layer_Layer-Layer.html

var layer = new COGLayer({
    opacity: 0.7
    source: new COGSource({
        attributions: 'Planet',
        url: 'https://s3-us-west-2.amazonaws.com/planet-disaster-data/hurricane-harvey/SkySat_Freeport_s03_20170831T162740Z3.tif'
    })
});

Get Extent of COG

var source  = new COGSource({
    attributions: 'Planet',
    url: 'https://s3-us-west-2.amazonaws.com/planet-disaster-data/hurricane-harvey/SkySat_Freeport_s03_20170831T162740Z3.tif'
});
var layer = new COGLayer({
    source
});
var extent = await source.getExtent();

Custom Rendering

var layer = new COGLayer({
    source: new COGSource({
        attributions: 'Planet',
        url: 'https://s3-us-west-2.amazonaws.com/planet-disaster-data/hurricane-harvey/SkySat_Freeport_s03_20170831T162740Z3.tif'
    }),
    style: (values) => {
        const [ r, g, b ] = values;
        return `rgb(${r + g / 2}, 0, 0)`;  
    }
});