ModelTransformation example

examples/cog-modeltransformation.html

@@ -0,0 +1,11 @@
+---
+layout: example.html
+title: COG with ModelTransformation
+shortdesc: COG with ModelTransformation.
+docs: >
+  Example of using a COG with ModelTransformation.
+  A ModelTransformation may rotate or skew the tile grid relative to the reported projection.
+  This can be reprojected to that or any other supported projection.
+tags: "cog, projection, ModelTransformation"
+---
+<div id="map" class="map"></div>

examples/cog-modeltransformation.js

@@ -0,0 +1,35 @@
+import GeoTIFF from '../src/ol/source/GeoTIFF.js';
+import Map from '../src/ol/Map.js';
+import OSM from '../src/ol/source/OSM.js';
+import TileLayer from '../src/ol/layer/WebGLTile.js';
+import proj4 from 'proj4';
+import {fromEPSGCode, register} from '../src/ol/proj/proj4.js';
+
+register(proj4);
+
+const cogSource = new GeoTIFF({
+  sources: [
+    {
+      url: 'https://umbra-open-data-catalog.s3.amazonaws.com/sar-data/tasks/Tanna%20Island,%20Vanuatu/9c76a918-9247-42bf-b9f6-3b4f672bc148/2023-02-12-21-33-56_UMBRA-04/2023-02-12-21-33-56_UMBRA-04_GEC.tif',
+      nodata: 0,
+    },
+  ],
+});
+
+const map = new Map({
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: new OSM(),
+    }),
+    new TileLayer({
+      source: cogSource,
+      opacity: 0.8,
+    }),
+  ],
+  view: cogSource
+    .getView()
+    .then((viewConfig) =>
+      fromEPSGCode(viewConfig.projection.getCode()).then(() => viewConfig)
+    ),
+});