feat: add COG support for MapLibre

apps/examples/src/App.vue

@@ -15,6 +15,8 @@ import ExampleMaplibreRaw from '@/examples/Example-Maplibre.vue?raw'
 import ExampleMaplibre from '@/examples/Example-Maplibre.vue'
 import ExampleGeoTIFF from '@/examples/Example-GeoTIFF.vue'
 import ExampleGeoTIFFRaw from '@/examples/Example-GeoTIFF.vue?raw'
+import ExampleMaplibreCOG from '@/examples/Example-MaplibreCOG.vue'
+import ExampleMaplibreCOGRaw from '@/examples/Example-MaplibreCOG.vue?raw'
 import { onMounted, ref } from 'vue'
 import hljs from 'highlight.js'
 import '@geospatial-sdk/elements'
@@ -105,6 +107,13 @@ onMounted(() => {
     >
       <ExampleGeoTIFF></ExampleGeoTIFF>
     </ExampleContainer>
+    <ExampleContainer
+      example-name="Example 9: Maplibre COG"
+      example-id="example09"
+      :source-code="ExampleMaplibreCOGRaw"
+    >
+      <ExampleMaplibreCOG></ExampleMaplibreCOG>
+    </ExampleContainer>
   </div>
 </template>
 

apps/examples/src/examples/Example-MaplibreCOG.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { createMapFromContext } from '@geospatial-sdk/maplibre'
+import { type MapContext } from '@geospatial-sdk/core'
+
+const mapRoot = ref<HTMLElement>()
+
+onMounted(async () => {
+  const context: MapContext = {
+    layers: [
+      {
+        type: 'xyz',
+        url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
+      },
+      {
+        type: 'geotiff',
+        url: 'https://labs.geomatico.es/maplibre-cog-protocol/data/image.tif',
+      }
+    ],
+    view: {
+      center: [1.83369, 41.5937],
+      zoom: 14
+    }
+  }
+
+  await createMapFromContext(context, {
+    container: mapRoot.value as HTMLElement
+  })
+})
+</script>
+
+<template>
+  <div ref="mapRoot" class="w-full h-full"></div>
+</template>

packages/maplibre/lib/map/create-map.test.ts

@@ -2,6 +2,7 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import {
   MAP_CTX_LAYER_GEOJSON_FIXTURE,
   MAP_CTX_LAYER_GEOJSON_REMOTE_FIXTURE,
+  MAP_CTX_LAYER_GEOTIFF_FIXTURE,
   MAP_CTX_LAYER_OGCAPI_FIXTURE,
   MAP_CTX_LAYER_WFS_FIXTURE,
   MAP_CTX_LAYER_WMS_FIXTURE,
@@ -370,6 +371,38 @@ describe("MapContextService", () => {
       });
     });
 
+    describe("GeoTIFF", () => {
+      beforeEach(async () => {
+        layerModel = MAP_CTX_LAYER_GEOTIFF_FIXTURE;
+        style = (await createLayer(layerModel)) as PartialStyleSpecification;
+      });
+      it("create a raster layer and source", () => {
+        const sourceId = "123456";
+        const sourcesIds = Object.keys(style.sources);
+        expect(sourcesIds.length).toBe(1);
+        expect(sourcesIds[0]).toBe(sourceId);
+
+        const source = style.sources[sourceId] as RasterSourceSpecification;
+        expect(source.type).toBe("raster");
+        expect(source.url).toBe(
+          "cog://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",
+        );
+        expect(source.tileSize).toBe(256);
+      });
+      it("create a layer with correct properties", () => {
+        expect(style.layers.length).toBe(1);
+        const layer = style.layers[0] as RasterLayerSpecification;
+        const metadata = layer.metadata as LayerMetadataSpecification;
+
+        expect(layer.id).toBe("123456");
+        expect(layer.type).toBe("raster");
+        expect(layer.source).toBe("123456");
+        expect(layer.paint?.["raster-opacity"]).toBe(1);
+        expect(layer.layout?.visibility).toBe("visible");
+        expect(metadata.layerHash).toBeTypeOf("string");
+      });
+    });
+
     describe("WMTS", () => {
       beforeEach(async () => {
         layerModel = MAP_CTX_LAYER_WMTS_FIXTURE;

packages/maplibre/lib/map/create-map.ts

@@ -5,7 +5,8 @@ import {
   ViewByZoomAndCenter,
 } from "@geospatial-sdk/core";
 
-import { LayerSpecification, Map, MapOptions } from "maplibre-gl";
+import { addProtocol, LayerSpecification, Map, MapOptions } from "maplibre-gl";
+import { cogProtocol } from "@geomatico/maplibre-cog-protocol";
 import { FeatureCollection, Geometry } from "geojson";
 import {
   OgcApiEndpoint,
@@ -22,6 +23,8 @@ import {
   PartialStyleSpecification,
 } from "../maplibre.models.js";
 
+let cogProtocolRegistered = false;
+
 const featureCollection: FeatureCollection<Geometry | null> = {
   type: "FeatureCollection",
   features: [],
@@ -153,6 +156,36 @@ export async function createLayer(
         ],
       };
     }
+    case "geotiff": {
+      if (!cogProtocolRegistered) {
+        addProtocol("cog", cogProtocol);
+        cogProtocolRegistered = true;
+      }
+      const sourceId = layerId;
+      return {
+        sources: {
+          [sourceId]: {
+            type: "raster",
+            url: `cog://${layerModel.url}`,
+            tileSize: 256,
+          },
+        },
+        layers: [
+          {
+            id: layerId,
+            type: "raster",
+            source: sourceId,
+            paint: {
+              "raster-opacity": layerModel.opacity ?? 1,
+            },
+            layout: {
+              visibility: layerModel.visibility === false ? "none" : "visible",
+            },
+            metadata,
+          },
+        ],
+      };
+    }
     case "wmts": {
       console.warn(`WMTS layers are not yet supported in Maplibre`, layerModel);
       return null;

packages/maplibre/package.json

@@ -27,10 +27,12 @@
     "build": "tsc"
   },
   "devDependencies": {
-    "maplibre-gl": "^5.19.0"
+    "maplibre-gl": "^5.19.0",
+    "@geomatico/maplibre-cog-protocol": "^0.8.0"
   },
   "peerDependencies": {
-    "maplibre-gl": "^5.19.0"
+    "maplibre-gl": "^5.19.0",
+    "@geomatico/maplibre-cog-protocol": "^0.8.0"
   },
   "dependencies": {
     "@geospatial-sdk/core": "^0.0.5-alpha.2"