@geospatial-sdk/maplibre 0.0.5-dev.48 → 0.0.5-dev.50

package/lib/map/apply-context-diff.ts

@@ -1,13 +1,60 @@
-import { MapContextDiff } from "@geospatial-sdk/core";
-import { Map } from "maplibre-gl";
+import { MapContextDiff, MapContextLayer } from "@geospatial-sdk/core";
+import type { Map } from "maplibre-gl";
 import { createLayer } from "./create-map.js";
 import {
-  generateLayerId,
-  getBeforeId,
+  canDoIncrementalUpdate,
+  getFirstLayerIdAtPosition,
   getLayersAtPosition,
-  removeLayersFromSource,
+  getLayersFromContextLayer,
+  updateLayerProperties,
 } from "../helpers/map.helpers.js";
 
+/**
+ * This will either update the layers in the map or recreate them;
+ * the returned promise resolves when the update is done
+ * @param map
+ * @param layerModel
+ * @param previousLayerModel
+ * @param layerPosition
+ */
+export async function updateLayerInMap(
+  map: Map,
+  layerModel: MapContextLayer,
+  previousLayerModel: MapContextLayer,
+  layerPosition: number,
+): Promise<void> {
+  // if an incremental update is possible, do it to avoid costly layer recreation
+  if (canDoIncrementalUpdate(previousLayerModel, layerModel)) {
+    // we can find the existing layers by using the hash or id of the layerModel
+    const mlUpdatedLayers = getLayersFromContextLayer(map, layerModel);
+    for (const layer of mlUpdatedLayers) {
+      updateLayerProperties(map, layer, layerModel, previousLayerModel);
+    }
+    return;
+  }
+
+  const mlLayersToRemove = getLayersAtPosition(map, layerPosition);
+  const sourcesToRemove: string[] = [];
+  for (const layer of mlLayersToRemove) {
+    if (layer.source && !sourcesToRemove.includes(layer.source)) {
+      sourcesToRemove.push(layer.source);
+    }
+    map.removeLayer(layer.id);
+  }
+  for (const sourceId of sourcesToRemove) {
+    map.removeSource(sourceId);
+  }
+  const styleDiff = await createLayer(layerModel);
+  if (!styleDiff) return;
+  const beforeId = getFirstLayerIdAtPosition(map, layerPosition);
+  Object.keys(styleDiff.sources).forEach((sourceId) =>
+    map.addSource(sourceId, styleDiff.sources[sourceId]),
+  );
+  styleDiff.layers.map((layer) => {
+    map.addLayer(layer, beforeId);
+  });
+}
+
 /**
  * Apply a context diff to an MapLibre map
  * @param map
@@ -16,14 +63,14 @@ import {
 export async function applyContextDiffToMap(
   map: Map,
   contextDiff: MapContextDiff,
-): Promise<void> {
+): Promise<Map> {
   // removed layers (sorted by descending position)
   if (contextDiff.layersRemoved.length > 0) {
     const removed = contextDiff.layersRemoved.sort(
       (a, b) => b.position - a.position,
     );
     for (const layerRemoved of removed) {
-      const mlLayers = getLayersAtPosition(map, layerRemoved.position);
+      const mlLayers = getLayersFromContextLayer(map, layerRemoved.layer);
       if (mlLayers.length === 0) {
         console.warn(
           `[Warning] applyContextDiffToMap: no layer found at position ${layerRemoved.position} to remove.`,
@@ -40,32 +87,56 @@ export async function applyContextDiffToMap(
 
   // insert added layers
   const newLayers = await Promise.all(
-    contextDiff.layersAdded.map((layerAdded) =>
-      createLayer(layerAdded.layer, layerAdded.position),
-    ),
+    contextDiff.layersAdded.map((layerAdded) => createLayer(layerAdded.layer)),
   );
-  newLayers.forEach((style: any, index: any) => {
+  newLayers.forEach((style, index) => {
+    if (!style) return;
     const position = contextDiff.layersAdded[index].position;
-    const beforeId = getBeforeId(map, position);
+    const beforeId = getFirstLayerIdAtPosition(map, position);
     Object.keys(style.sources).forEach((sourceId) =>
       map.addSource(sourceId, style.sources[sourceId]),
     );
-    style.layers.map((layer: any) => {
+    style.layers.map((layer) => {
       map.addLayer(layer, beforeId);
     });
   });
 
+  // handle reordered layers (sorted by ascending new position)
+  if (contextDiff.layersReordered.length > 0) {
+    const reordered = contextDiff.layersReordered.sort(
+      (a, b) => a.newPosition - b.newPosition,
+    );
+
+    // collect all layers to be moved
+    const mlLayersToMove = reordered.map((layerReordered) =>
+      getLayersFromContextLayer(map, layerReordered.layer),
+    );
+
+    // move layers
+    for (let i = 0; i < reordered.length; i++) {
+      const layerReordered = reordered[i];
+      const mlLayers = mlLayersToMove[i];
+      const beforeId = getFirstLayerIdAtPosition(
+        map,
+        layerReordered.newPosition + 1,
+      );
+
+      if (mlLayers[0].id === beforeId) {
+        // layer is already at the right position
+        continue;
+      }
+
+      // then we add the moved the layer to its new position
+      for (const layer of mlLayers) {
+        map.moveLayer(layer.id, beforeId);
+      }
+    }
+  }
+
   // recreate changed layers
   for (const layerChanged of contextDiff.layersChanged) {
-    const { layer, position } = layerChanged;
-    const sourceId = generateLayerId(layer);
-    removeLayersFromSource(map, sourceId);
-    const beforeId = getBeforeId(map, position);
-    createLayer(layer, position).then((styleDiff) => {
-      styleDiff.layers.map((layer: any) => {
-        map.addLayer(layer, beforeId);
-      });
-    });
+    const { layer, previousLayer, position } = layerChanged;
+    await updateLayerInMap(map, layer, previousLayer, position);
   }
 
   if (typeof contextDiff.viewChanges !== "undefined") {
@@ -86,4 +157,6 @@ export async function applyContextDiffToMap(
       );
     }
   }
+
+  return map;
 }

package/lib/map/create-map.test.ts

@@ -5,6 +5,8 @@ import {
   MAP_CTX_LAYER_OGCAPI_FIXTURE,
   MAP_CTX_LAYER_WFS_FIXTURE,
   MAP_CTX_LAYER_WMS_FIXTURE,
+  MAP_CTX_LAYER_WMTS_FIXTURE,
+  MAP_CTX_LAYER_XYZ_FIXTURE,
 } from "@geospatial-sdk/core/fixtures/map-context.fixtures.js";
 import { LayerGeojsonWithData, MapContextLayer } from "@geospatial-sdk/core";
 import { createLayer } from "./create-map.js";
@@ -13,14 +15,13 @@ import {
   GeoJSONSourceSpecification,
   RasterLayerSpecification,
 } from "@maplibre/maplibre-gl-style-spec";
+import { FEATURE_COLLECTION_POLYGON_FIXTURE_4326 } from "@geospatial-sdk/core/fixtures/geojson.fixtures.js";
 import {
-  FEATURE_COLLECTION_LINESTRING_FIXTURE_4326,
-  FEATURE_COLLECTION_POLYGON_FIXTURE_4326,
-} from "@geospatial-sdk/core/fixtures/geojson.fixtures.js";
-import { PartialStyleSpecification } from "../maplibre.models.js";
+  LayerMetadataSpecification,
+  PartialStyleSpecification,
+} from "../maplibre.models.js";
 import {
   CircleLayerSpecification,
-  LayerSpecification,
   LineLayerSpecification,
   RasterSourceSpecification,
 } from "maplibre-gl";
@@ -29,10 +30,15 @@ describe("MapContextService", () => {
   describe("#createLayer", () => {
     let layerModel: MapContextLayer, style: PartialStyleSpecification;
 
+    beforeEach(() => {
+      // This makes it so that every layerId/sourceId will be "123456"
+      vi.spyOn(Math, "random").mockReturnValue(0.123456);
+    });
+
     describe("WMS", () => {
       beforeEach(async () => {
-        (layerModel = MAP_CTX_LAYER_WMS_FIXTURE),
-          (style = await createLayer(layerModel, 0));
+        layerModel = MAP_CTX_LAYER_WMS_FIXTURE;
+        style = (await createLayer(layerModel)) as PartialStyleSpecification;
       });
       it("create a tile layer", () => {
         expect(style).toBeTruthy();
@@ -42,7 +48,7 @@ describe("MapContextService", () => {
         expect(sourcesIds.length).toBe(1);
         const id = sourcesIds[0];
         const source = style.sources[id] as RasterSourceSpecification;
-        expect(id).toBe("1046815418");
+        expect(id).toBe("123456");
         expect(source.tiles).toEqual([
           "https://www.datagrandest.fr/geoserver/region-grand-est/ows?REQUEST=GetMap&SERVICE=WMS&layers=commune_actuelle_3857&styles=&format=image%2Fpng&transparent=true&version=1.1.1&height=256&width=256&srs=EPSG%3A3857&BBOX={bbox-epsg-3857}",
         ]);
@@ -52,17 +58,36 @@ describe("MapContextService", () => {
         expect(style.layers.length).toBe(1);
 
         const layer = style.layers[0] as RasterLayerSpecification;
-        expect(layer.id).toBe("1046815418");
-        expect(layer.source).toBe("1046815418");
-        expect(layer.type).toBe(`raster`);
+        const metadata = layer.metadata as LayerMetadataSpecification;
+
+        expect(layer.id).toBe("123456");
+        expect(layer.type).toBe("raster");
+        expect(layer.source).toBe(layer.id);
+        expect(metadata.layerId).toBeUndefined();
+        expect(metadata.layerHash).toBeTypeOf("string");
+        expect(layer.paint?.["raster-opacity"]).toBe(0.5);
+        expect(layer.layout?.visibility).toBe("none");
+      });
+
+      describe("with an id", () => {
+        beforeEach(async () => {
+          layerModel = { ...MAP_CTX_LAYER_WMS_FIXTURE, id: "my-test-layer" };
+          style = (await createLayer(layerModel)) as PartialStyleSpecification;
+        });
+        it("create a layer with layer id in metadata", () => {
+          const layer = style.layers[0] as RasterLayerSpecification;
+          const metadata = layer.metadata as LayerMetadataSpecification;
+          expect(metadata.layerHash).toBeUndefined();
+          expect(metadata.layerId).toBe("my-test-layer");
+        });
       });
     });
+
     describe("GEOJSON", () => {
       describe("with inline data", () => {
         beforeEach(async () => {
           layerModel = MAP_CTX_LAYER_GEOJSON_FIXTURE;
-          style = await createLayer(layerModel, 0);
-          Math.random = vi.fn(() => 0.027404);
+          style = (await createLayer(layerModel)) as PartialStyleSpecification;
         });
         it("create a VectorLayer", () => {
           expect(style).toBeTruthy();
@@ -70,23 +95,35 @@ describe("MapContextService", () => {
         it("create a source", () => {
           const sourcesIds = Object.keys(style.sources);
           expect(sourcesIds.length).toBe(1);
-          expect(sourcesIds[0]).toBe("2792250259");
+          expect(sourcesIds[0]).toBe("123456");
         });
         it("create 3 layers", () => {
           expect(style.layers).toBeTruthy();
           expect(style.layers.length).toBe(3);
 
-          let layer = style.layers[0] as RasterLayerSpecification;
-          expect(layer.id).toBe("2792250259-fill");
-          expect(layer.source).toBe("2792250259");
+          const sourceId = "123456";
+          const fillLayer = style.layers[0] as FillLayerSpecification;
+          const metadata = fillLayer.metadata as LayerMetadataSpecification;
 
-          layer = style.layers[1] as RasterLayerSpecification;
-          expect(layer.id).toBe("2792250259-line");
-          expect(layer.source).toBe("2792250259");
+          expect(fillLayer.id).toBe(`${sourceId}-fill`);
+          expect(fillLayer.source).toBe(sourceId);
+          expect(metadata.layerId).toBeUndefined();
+          expect(metadata.layerHash).toBeTypeOf("string");
+          expect(fillLayer.paint?.["fill-opacity"]).toBe(0.8);
+          expect(fillLayer.layout?.visibility).toBe("visible");
 
-          layer = style.layers[2] as RasterLayerSpecification;
-          expect(layer.id).toBe("2792250259-circle");
-          expect(layer.source).toBe("2792250259");
+          const lineLayer = style.layers[1] as LineLayerSpecification;
+          expect(lineLayer.id).toBe(`${sourceId}-line`);
+          expect(lineLayer.source).toBe(sourceId);
+          expect(lineLayer.paint?.["line-opacity"]).toBe(0.8);
+          expect(lineLayer.layout?.visibility).toBe("visible");
+
+          const circleLayer = style.layers[2] as CircleLayerSpecification;
+          expect(circleLayer.id).toBe(`${sourceId}-circle`);
+          expect(circleLayer.source).toBe(sourceId);
+          expect(circleLayer.paint?.["circle-opacity"]).toBe(0.8);
+          expect(circleLayer.paint?.["circle-stroke-opacity"]).toBe(0.8);
+          expect(circleLayer.layout?.visibility).toBe("visible");
         });
 
         it("set correct source properties", () => {
@@ -100,14 +137,15 @@ describe("MapContextService", () => {
         it("set correct layer properties", () => {
           const layer = style.layers[0] as FillLayerSpecification;
           expect(layer.type).toBe(`fill`);
-          expect(layer.paint["fill-color"]).toBe("rgba(255,255,255,0.4)");
+          expect(layer.paint?.["fill-color"]).toBe("rgba(255,255,255,0.4)");
+          expect(layer.paint?.["fill-opacity"]).toBe(0.8);
         });
       });
       describe("with inline data as string", () => {
         beforeEach(async () => {
           layerModel = { ...MAP_CTX_LAYER_GEOJSON_FIXTURE };
           layerModel.data = JSON.stringify(layerModel.data);
-          style = await createLayer(layerModel, 0);
+          style = (await createLayer(layerModel)) as PartialStyleSpecification;
         });
         it("create a VectorLayer", () => {
           expect(style).toBeTruthy();
@@ -133,8 +171,9 @@ describe("MapContextService", () => {
         it("set correct layer properties", () => {
           const layer = style.layers[0] as FillLayerSpecification;
           expect(layer.type).toBe(`fill`);
-          expect(layer.paint["fill-color"]).toBe("rgba(255,255,255,0.4)");
-          expect(layer.paint["fill-opacity"]).toBeUndefined();
+          expect(layer.paint?.["fill-color"]).toBe("rgba(255,255,255,0.4)");
+          expect(layer.paint?.["fill-opacity"]).toBe(0.8);
+          expect(layer.layout?.visibility).toBe("visible");
         });
       });
       describe("with invalid inline data as string", () => {
@@ -146,7 +185,7 @@ describe("MapContextService", () => {
             url: undefined,
             data: "blargz",
           } as LayerGeojsonWithData;
-          style = await createLayer(layerModel, 0);
+          style = (await createLayer(layerModel)) as PartialStyleSpecification;
         });
         it("create a VectorLayer", () => {
           expect(style).toBeTruthy();
@@ -156,7 +195,7 @@ describe("MapContextService", () => {
         });
         it("create an empty VectorSource source", () => {
           expect(style.sources).toEqual({
-            "3631250040": {
+            "123456": {
               data: {
                 features: [],
                 type: "FeatureCollection",
@@ -173,9 +212,9 @@ describe("MapContextService", () => {
                 ok: true,
                 json: () =>
                   Promise.resolve(FEATURE_COLLECTION_POLYGON_FIXTURE_4326),
-              }),
+              } as Response),
             );
-            style = await createLayer(layerModel, 0);
+            style = (await createLayer(layerModel))!;
           });
           it("create a VectorLayer", () => {
             expect(style).toBeTruthy();
@@ -183,6 +222,7 @@ describe("MapContextService", () => {
           it("create a source", () => {
             const sourcesIds = Object.keys(style.sources);
             expect(sourcesIds.length).toBe(1);
+            expect(sourcesIds[0]).toBe("123456");
           });
           it("create 3 layers", () => {
             expect(style.layers).toBeTruthy();
@@ -203,16 +243,18 @@ describe("MapContextService", () => {
           it("set correct layer properties", () => {
             const layer = style.layers[0] as FillLayerSpecification;
             expect(layer.type).toBe(`fill`);
-            expect(layer.paint["fill-color"]).toBe("rgba(255,255,255,0.4)");
-            expect(layer.paint["fill-opacity"]).toBeUndefined();
+            expect(layer.paint?.["fill-color"]).toBe("rgba(255,255,255,0.4)");
+            expect(layer.paint?.["fill-opacity"]).toBe(1);
+            expect(layer.layout?.visibility).toBe("visible");
           });
         });
       });
     });
+
     describe("WFS", () => {
       beforeEach(async () => {
-        (layerModel = MAP_CTX_LAYER_WFS_FIXTURE),
-          (style = await createLayer(layerModel, 1));
+        layerModel = MAP_CTX_LAYER_WFS_FIXTURE;
+        style = (await createLayer(layerModel)) as PartialStyleSpecification;
       });
       it("create a vector layer", () => {
         expect(style).toBeTruthy();
@@ -222,7 +264,7 @@ describe("MapContextService", () => {
         expect(sourcesIds.length).toBe(1);
         const id = sourcesIds[0];
         const source = style.sources[id] as GeoJSONSourceSpecification;
-        expect(id).toBe("985400327");
+        expect(id).toBe("123456");
         expect(source.data).toEqual(
           "https://www.datagrandest.fr/geoserver/region-grand-est/ows?service=WFS&version=1.1.0&request=GetFeature&outputFormat=application%2Fjson&typename=ms%3Acommune_actuelle_3857&srsname=EPSG%3A3857&bbox=10%2C20%2C30%2C40%2CEPSG%3A3857&maxFeatures=10000",
         );
@@ -231,35 +273,36 @@ describe("MapContextService", () => {
         expect(style.layers).toBeTruthy();
         expect(style.layers.length).toBe(3);
 
-        let layer: LayerSpecification = style
-          .layers[0] as FillLayerSpecification;
-        expect(layer.id).toBe("985400327-fill");
-        expect(layer.source).toBe("985400327");
-        expect(layer.metadata.sourcePosition).toBe(1);
+        const sourceId = "123456";
+        const fillLayer = style.layers[0] as FillLayerSpecification;
+        const metadata = fillLayer.metadata as LayerMetadataSpecification;
 
-        layer = style.layers[1] as LineLayerSpecification;
-        expect(layer.id).toBe("985400327-line");
-        expect(layer.source).toBe("985400327");
-        expect(layer.metadata.sourcePosition).toBe(1);
+        expect(fillLayer.id).toBe(`${sourceId}-fill`);
+        expect(fillLayer.source).toBe(sourceId);
+        expect(metadata.layerId).toBeUndefined();
+        expect(metadata.layerHash).toBeTypeOf("string");
+        expect(fillLayer.paint?.["fill-opacity"]).toBe(0.5);
+        expect(fillLayer.layout?.visibility).toBe("visible");
 
-        layer = style.layers[2] as CircleLayerSpecification;
-        expect(layer.id).toBe("985400327-circle");
-        expect(layer.source).toBe("985400327");
-        expect(layer.metadata.sourcePosition).toBe(1);
+        const lineLayer = style.layers[1] as LineLayerSpecification;
+        expect(lineLayer.id).toBe(`${sourceId}-line`);
+        expect(lineLayer.source).toBe(sourceId);
+        expect(lineLayer.paint?.["line-opacity"]).toBe(0.5);
+        expect(lineLayer.layout?.visibility).toBe("visible");
+
+        const circleLayer = style.layers[2] as CircleLayerSpecification;
+        expect(circleLayer.id).toBe(`${sourceId}-circle`);
+        expect(circleLayer.source).toBe(sourceId);
+        expect(circleLayer.paint?.["circle-opacity"]).toBe(0.5);
+        expect(circleLayer.paint?.["circle-stroke-opacity"]).toBe(0.5);
+        expect(circleLayer.layout?.visibility).toBe("visible");
       });
     });
+
     describe("OGCAPI", () => {
       beforeEach(async () => {
-        global.fetch = vi.fn(() =>
-          Promise.resolve({
-            ok: true,
-            json: () =>
-              Promise.resolve(FEATURE_COLLECTION_LINESTRING_FIXTURE_4326),
-          }),
-        );
-
-        (layerModel = MAP_CTX_LAYER_OGCAPI_FIXTURE),
-          (style = await createLayer(layerModel, 0));
+        layerModel = MAP_CTX_LAYER_OGCAPI_FIXTURE;
+        style = (await createLayer(layerModel)) as PartialStyleSpecification;
       });
       it("create a vector layer", () => {
         expect(style).toBeTruthy();
@@ -269,7 +312,7 @@ describe("MapContextService", () => {
         expect(sourcesIds.length).toBe(1);
         const id = sourcesIds[0];
         const source = style.sources[id] as GeoJSONSourceSpecification;
-        expect(id).toBe("504003385");
+        expect(id).toBe("123456");
         expect(source.data).toEqual(
           "https://demo.ldproxy.net/zoomstack/collections/airports/items?f=json",
         );
@@ -277,10 +320,62 @@ describe("MapContextService", () => {
       it("create 3 layers", () => {
         expect(style.layers).toBeTruthy();
         expect(style.layers.length).toBe(3);
+
+        const sourceId = "123456";
         const layer = style.layers[0] as FillLayerSpecification;
-        expect(layer.id).toBe("504003385-fill");
-        expect(layer.source).toBe("504003385");
-        expect(layer.metadata.sourcePosition).toBe(0);
+        const metadata = layer.metadata as LayerMetadataSpecification;
+
+        expect(layer.id).toBe(`${sourceId}-fill`);
+        expect(layer.source).toBe(sourceId);
+        expect(metadata.layerId).toBeUndefined();
+        expect(metadata.layerHash).toBeTypeOf("string");
+        expect(layer.paint?.["fill-opacity"]).toBe(1);
+        expect(layer.layout?.visibility).toBe("visible");
+      });
+    });
+
+    describe("XYZ", () => {
+      beforeEach(async () => {
+        layerModel = MAP_CTX_LAYER_XYZ_FIXTURE;
+        style = (await createLayer(layerModel)) as PartialStyleSpecification;
+      });
+      it("create a layer and source", () => {
+        const sourceId = "123456";
+
+        expect(style).toEqual({
+          layers: [
+            {
+              id: sourceId,
+              layout: {
+                visibility: "visible",
+              },
+              metadata: {
+                layerHash: "3863171382",
+              },
+              paint: {
+                "raster-opacity": 1,
+              },
+              source: sourceId,
+              type: "raster",
+            },
+          ],
+          sources: {
+            [sourceId]: {
+              tileSize: 256,
+              tiles: ["https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png"],
+              type: "raster",
+            },
+          },
+        });
+      });
+    });
+
+    describe("WMTS", () => {
+      beforeEach(async () => {
+        layerModel = MAP_CTX_LAYER_WMTS_FIXTURE;
+      });
+      it("does not support this layer type", async () => {
+        expect(await createLayer(layerModel)).toBe(null);
       });
     });
   });