@geospatial-sdk/maplibre 0.0.5-dev.57 → 0.0.5-dev.59

package/dist/helpers/map.helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"map.helpers.d.ts","sourceRoot":"","sources":["../../lib/helpers/map.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,GAAG,EAAsB,MAAM,aAAa,CAAC;AAC/E,OAAO,EACL,OAAO,EACP,qBAAqB,EACrB,0BAA0B,EAC1B,4BAA4B,EAC7B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEtD,OAAO,EAGL,eAAe,EAChB,MAAM,sBAAsB,CAAC;AAW9B;;;;;GAKG;AACH,wBAAgB,6BAA6B,CAC3C,UAAU,EAAE,qBAAqB,EACjC,OAAO,EAAE,iBAAiB,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,MAAM,EACpD,QAAQ,EAAE,0BAA0B,GACnC,OAAO,CA+BT;AAED,wBAAgB,yBAAyB,CACvC,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,eAAe,GAC1B,4BAA4B,EAAE,CAkBhC;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,MAAM,GACf,4BAA4B,EAAE,CAoBhC;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,MAAM,GACf,MAAM,GAAG,SAAS,CAoBpB;AAYD;;;GAGG;AACH,wBAAgB,sCAAsC,CACpD,UAAU,EAAE,eAAe,UAG5B;AAED;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,GACxB,OAAO,CAKT;AAED;;GAEG;AACH,wBAAgB,eAAe,WAE9B;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CACnC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,kBAAkB,EACzB,UAAU,EAAE,eAAe,EAC3B,kBAAkB,EAAE,eAAe,QA+BpC"}
+{"version":3,"file":"map.helpers.d.ts","sourceRoot":"","sources":["../../lib/helpers/map.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,GAAG,EAAsB,MAAM,aAAa,CAAC;AAC/E,OAAO,EACL,OAAO,EACP,qBAAqB,EACrB,0BAA0B,EAC1B,4BAA4B,EAC7B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACtD,OAAO,EAIL,eAAe,EAChB,MAAM,sBAAsB,CAAC;AAY9B;;;;;GAKG;AACH,wBAAgB,6BAA6B,CAC3C,UAAU,EAAE,qBAAqB,EACjC,OAAO,EAAE,iBAAiB,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,MAAM,EACpD,QAAQ,EAAE,0BAA0B,GACnC,OAAO,CAiCT;AAED,wBAAgB,yBAAyB,CACvC,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,eAAe,GAC1B,4BAA4B,EAAE,CAkBhC;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,MAAM,GACf,4BAA4B,EAAE,CAoBhC;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,MAAM,GACf,MAAM,GAAG,SAAS,CAoBpB;AAYD;;;GAGG;AACH,wBAAgB,sCAAsC,CACpD,UAAU,EAAE,eAAe,UAG5B;AAED;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,GACxB,OAAO,CAKT;AAED;;GAEG;AACH,wBAAgB,eAAe,WAE9B;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CACnC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,kBAAkB,EACzB,UAAU,EAAE,eAAe,EAC3B,kBAAkB,EAAE,eAAe,QA+BpC"}

package/dist/helpers/map.helpers.js

@@ -1,5 +1,5 @@
-import { contextStyleToMaplibreLayers } from "./style.helpers.js";
-import { getHash, } from "@geospatial-sdk/core";
+import { defaultStyle, getHash, } from "@geospatial-sdk/core";
+import { openLayersStyleToMapLibreLayers } from "@geospatial-sdk/style";
 function getOpacityPaintPropNames(layerType) {
     switch (layerType) {
         case "circle":
@@ -16,10 +16,10 @@ function getOpacityPaintPropNames(layerType) {
  */
 export function createDatasetFromGeoJsonLayer(layerModel, geojson, metadata) {
     const sourceId = generateLayerId();
-    const partialLayers = contextStyleToMaplibreLayers(layerModel.style);
-    const layers = partialLayers.map((layer) => ({
+    const partialLayers = openLayersStyleToMapLibreLayers(layerModel.style ?? defaultStyle);
+    const layers = partialLayers.map((layer, index) => ({
         ...layer,
-        id: `${sourceId}-${layer.type}`,
+        id: `${sourceId}-${index}`,
         source: sourceId,
         paint: {
             ...layer.paint,

package/dist/map/apply-context-diff.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"apply-context-diff.d.ts","sourceRoot":"","sources":["../../lib/map/apply-context-diff.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAUvC;;;;;;;GAOG;AACH,wBAAsB,gBAAgB,CACpC,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,eAAe,EAC3B,kBAAkB,EAAE,eAAe,EACnC,aAAa,EAAE,MAAM,GACpB,OAAO,CAAC,IAAI,CAAC,CA+Bf;AAED;;;;GAIG;AACH,wBAAsB,qBAAqB,CACzC,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,cAAc,GAC1B,OAAO,CAAC,GAAG,CAAC,CAgGd"}
+{"version":3,"file":"apply-context-diff.d.ts","sourceRoot":"","sources":["../../lib/map/apply-context-diff.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAUvC;;;;;;;GAOG;AACH,wBAAsB,gBAAgB,CACpC,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,eAAe,EAC3B,kBAAkB,EAAE,eAAe,EACnC,aAAa,EAAE,MAAM,GACpB,OAAO,CAAC,IAAI,CAAC,CA+Bf;AAED;;;;GAIG;AACH,wBAAsB,qBAAqB,CACzC,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,cAAc,GAC1B,OAAO,CAAC,GAAG,CAAC,CAoGd"}

package/dist/map/apply-context-diff.js

@@ -109,6 +109,13 @@ export async function applyContextDiffToMap(map, contextDiff) {
                 duration: 1000,
             });
         }
+        else if (viewChanges && "center" in viewChanges) {
+            const { center, zoom } = viewChanges;
+            if (center)
+                map.setCenter(center);
+            if (zoom !== undefined)
+                map.setZoom(zoom);
+        }
     }
     return map;
 }

package/lib/helpers/map.helpers.ts

@@ -6,12 +6,13 @@ import {
   LayerSpecificationWithSource,
 } from "../maplibre.models.js";
 import { FeatureCollection, Geometry } from "geojson";
-import { contextStyleToMaplibreLayers } from "./style.helpers.js";
 import {
+  defaultStyle,
   getHash,
   MapContextBaseLayer,
   MapContextLayer,
 } from "@geospatial-sdk/core";
+import { openLayersStyleToMapLibreLayers } from "@geospatial-sdk/style";
 
 function getOpacityPaintPropNames(layerType: string): string[] {
   switch (layerType) {
@@ -34,10 +35,12 @@ export function createDatasetFromGeoJsonLayer(
   metadata: LayerMetadataSpecification,
 ): Dataset {
   const sourceId = generateLayerId();
-  const partialLayers = contextStyleToMaplibreLayers(layerModel.style);
-  const layers = partialLayers.map((layer) => ({
+  const partialLayers = openLayersStyleToMapLibreLayers(
+    layerModel.style ?? defaultStyle,
+  );
+  const layers = partialLayers.map((layer, index) => ({
     ...layer,
-    id: `${sourceId}-${layer.type}`,
+    id: `${sourceId}-${index}`,
     source: sourceId,
     paint: {
       ...layer.paint,

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

@@ -325,6 +325,34 @@ describe("applyContextDiffToMap (mocked Map)", () => {
     );
   });
 
+  it("calls setCenter and setZoom for viewChanges with center and zoom", async () => {
+    diff = {
+      layersAdded: [],
+      layersChanged: [],
+      layersRemoved: [],
+      layersReordered: [],
+      viewChanges: { center: [2.35, 48.86], zoom: 12 },
+    };
+    await applyContextDiffToMap(map, diff);
+    expect(map.setCenter).toHaveBeenCalledWith([2.35, 48.86]);
+    expect(map.setZoom).toHaveBeenCalledWith(12);
+    expect(map.fitBounds).not.toHaveBeenCalled();
+  });
+
+  it("calls setCenter without setZoom when only center is provided", async () => {
+    diff = {
+      layersAdded: [],
+      layersChanged: [],
+      layersRemoved: [],
+      layersReordered: [],
+      viewChanges: { center: [2.35, 48.86] },
+    };
+    await applyContextDiffToMap(map, diff);
+    expect(map.setCenter).toHaveBeenCalledWith([2.35, 48.86]);
+    expect(map.setZoom).not.toHaveBeenCalled();
+    expect(map.fitBounds).not.toHaveBeenCalled();
+  });
+
   describe("reordering", () => {
     describe("2 layers inverted", () => {
       beforeEach(async () => {
@@ -387,6 +415,14 @@ describe("applyContextDiffToMap (mocked Map)", () => {
     });
     describe("4 layers moved", () => {
       let layer1WithId: MapContextLayer;
+      const layer4WithStyle = {
+        ...SAMPLE_LAYER4,
+        style: {
+          "stroke-width": 5,
+          "fill-color": "blue",
+          "circle-radius": 10,
+        },
+      };
 
       beforeEach(async () => {
         layer1WithId = {
@@ -395,7 +431,7 @@ describe("applyContextDiffToMap (mocked Map)", () => {
         };
         const context = {
           ...SAMPLE_CONTEXT,
-          layers: [layer1WithId, SAMPLE_LAYER3, SAMPLE_LAYER4, SAMPLE_LAYER2],
+          layers: [layer1WithId, SAMPLE_LAYER3, layer4WithStyle, SAMPLE_LAYER2],
         };
         await resetMapFromContext(map, context);
         vi.clearAllMocks();
@@ -421,7 +457,7 @@ describe("applyContextDiffToMap (mocked Map)", () => {
               previousPosition: 0,
             },
             {
-              layer: SAMPLE_LAYER4,
+              layer: layer4WithStyle,
               newPosition: 0,
               previousPosition: 2,
             },
@@ -434,17 +470,20 @@ describe("applyContextDiffToMap (mocked Map)", () => {
         expect(map.getStyle().layers).toEqual([
           expect.objectContaining({
             metadata: {
-              layerHash: generateLayerHashWithoutUpdatableProps(SAMPLE_LAYER4),
+              layerHash:
+                generateLayerHashWithoutUpdatableProps(layer4WithStyle),
             },
           }),
           expect.objectContaining({
             metadata: {
-              layerHash: generateLayerHashWithoutUpdatableProps(SAMPLE_LAYER4),
+              layerHash:
+                generateLayerHashWithoutUpdatableProps(layer4WithStyle),
             },
           }),
           expect.objectContaining({
             metadata: {
-              layerHash: generateLayerHashWithoutUpdatableProps(SAMPLE_LAYER4),
+              layerHash:
+                generateLayerHashWithoutUpdatableProps(layer4WithStyle),
             },
           }),
           expect.objectContaining({

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

@@ -155,6 +155,10 @@ export async function applyContextDiffToMap(
           duration: 1000,
         },
       );
+    } else if (viewChanges && "center" in viewChanges) {
+      const { center, zoom } = viewChanges;
+      if (center) map.setCenter(center as [number, number]);
+      if (zoom !== undefined) map.setZoom(zoom);
     }
   }
 

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

@@ -20,11 +20,7 @@ import {
   LayerMetadataSpecification,
   PartialStyleSpecification,
 } from "../maplibre.models.js";
-import {
-  CircleLayerSpecification,
-  LineLayerSpecification,
-  RasterSourceSpecification,
-} from "maplibre-gl";
+import { RasterSourceSpecification } from "maplibre-gl";
 
 describe("MapContextService", () => {
   describe("#createLayer", () => {
@@ -97,33 +93,36 @@ describe("MapContextService", () => {
           expect(sourcesIds.length).toBe(1);
           expect(sourcesIds[0]).toBe("123456");
         });
-        it("create 3 layers", () => {
+        it("create 5 layers", () => {
           expect(style.layers).toBeTruthy();
-          expect(style.layers.length).toBe(3);
+          expect(style.layers.length).toBe(5);
 
           const sourceId = "123456";
-          const fillLayer = style.layers[0] as FillLayerSpecification;
-          const metadata = fillLayer.metadata as LayerMetadataSpecification;
-
-          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");
-
-          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");
+          expect(style.layers[0].id).toBe(`${sourceId}-0`);
+          expect((style.layers[0] as FillLayerSpecification).source).toBe(
+            sourceId,
+          );
+          expect(style.layers[0].type).toBe("line");
+          expect(style.layers[1].id).toBe(`${sourceId}-1`);
+          expect((style.layers[1] as FillLayerSpecification).source).toBe(
+            sourceId,
+          );
+          expect(style.layers[1].type).toBe("line");
+          expect(style.layers[2].id).toBe(`${sourceId}-2`);
+          expect((style.layers[2] as FillLayerSpecification).source).toBe(
+            sourceId,
+          );
+          expect(style.layers[2].type).toBe("fill");
+          expect(style.layers[3].id).toBe(`${sourceId}-3`);
+          expect((style.layers[3] as FillLayerSpecification).source).toBe(
+            sourceId,
+          );
+          expect(style.layers[3].type).toBe("line");
+          expect(style.layers[4].id).toBe(`${sourceId}-4`);
+          expect((style.layers[4] as FillLayerSpecification).source).toBe(
+            sourceId,
+          );
+          expect(style.layers[4].type).toBe("circle");
         });
 
         it("set correct source properties", () => {
@@ -134,12 +133,6 @@ describe("MapContextService", () => {
           expect(source.type).toBe("geojson");
           expect(source.data).toBe((layerModel as LayerGeojsonWithData).data);
         });
-        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"]).toBe(0.8);
-        });
       });
       describe("with inline data as string", () => {
         beforeEach(async () => {
@@ -154,9 +147,9 @@ describe("MapContextService", () => {
           const sourcesIds = Object.keys(style.sources);
           expect(sourcesIds.length).toBe(1);
         });
-        it("create 3 layers", () => {
+        it("create 5 layers", () => {
           expect(style.layers).toBeTruthy();
-          expect(style.layers.length).toBe(3);
+          expect(style.layers.length).toBe(5);
         });
 
         it("set correct source properties", () => {
@@ -167,14 +160,6 @@ describe("MapContextService", () => {
           expect(source.type).toBe("geojson");
           expect(source.data).toEqual(MAP_CTX_LAYER_GEOJSON_FIXTURE.data);
         });
-
-        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"]).toBe(0.8);
-          expect(layer.layout?.visibility).toBe("visible");
-        });
       });
       describe("with invalid inline data as string", () => {
         beforeEach(async () => {
@@ -224,9 +209,9 @@ describe("MapContextService", () => {
             expect(sourcesIds.length).toBe(1);
             expect(sourcesIds[0]).toBe("123456");
           });
-          it("create 3 layers", () => {
+          it("create 5 layers", () => {
             expect(style.layers).toBeTruthy();
-            expect(style.layers.length).toBe(3);
+            expect(style.layers.length).toBe(5);
           });
 
           it("set correct source properties", () => {
@@ -239,14 +224,6 @@ describe("MapContextService", () => {
               "https://my.host.com/data/regions.json",
             );
           });
-
-          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"]).toBe(1);
-            expect(layer.layout?.visibility).toBe("visible");
-          });
         });
       });
     });
@@ -269,33 +246,36 @@ describe("MapContextService", () => {
           "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",
         );
       });
-      it("create 3 layers", () => {
+      it("create 5 layers", () => {
         expect(style.layers).toBeTruthy();
-        expect(style.layers.length).toBe(3);
+        expect(style.layers.length).toBe(5);
 
         const sourceId = "123456";
-        const fillLayer = style.layers[0] as FillLayerSpecification;
-        const metadata = fillLayer.metadata as LayerMetadataSpecification;
-
-        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");
-
-        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");
+        expect(style.layers[0].id).toBe(`${sourceId}-0`);
+        expect((style.layers[0] as FillLayerSpecification).source).toBe(
+          sourceId,
+        );
+        expect(style.layers[0].type).toBe("line");
+        expect(style.layers[1].id).toBe(`${sourceId}-1`);
+        expect((style.layers[1] as FillLayerSpecification).source).toBe(
+          sourceId,
+        );
+        expect(style.layers[1].type).toBe("line");
+        expect(style.layers[2].id).toBe(`${sourceId}-2`);
+        expect((style.layers[2] as FillLayerSpecification).source).toBe(
+          sourceId,
+        );
+        expect(style.layers[2].type).toBe("fill");
+        expect(style.layers[3].id).toBe(`${sourceId}-3`);
+        expect((style.layers[3] as FillLayerSpecification).source).toBe(
+          sourceId,
+        );
+        expect(style.layers[3].type).toBe("line");
+        expect(style.layers[4].id).toBe(`${sourceId}-4`);
+        expect((style.layers[4] as FillLayerSpecification).source).toBe(
+          sourceId,
+        );
+        expect(style.layers[4].type).toBe("circle");
       });
     });
 
@@ -317,20 +297,36 @@ describe("MapContextService", () => {
           "https://demo.ldproxy.net/zoomstack/collections/airports/items?f=json",
         );
       });
-      it("create 3 layers", () => {
+      it("create 5 layers", () => {
         expect(style.layers).toBeTruthy();
-        expect(style.layers.length).toBe(3);
+        expect(style.layers.length).toBe(5);
 
         const sourceId = "123456";
-        const layer = style.layers[0] as FillLayerSpecification;
-        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");
+        expect(style.layers[0].id).toBe(`${sourceId}-0`);
+        expect((style.layers[0] as FillLayerSpecification).source).toBe(
+          sourceId,
+        );
+        expect(style.layers[0].type).toBe("line");
+        expect(style.layers[1].id).toBe(`${sourceId}-1`);
+        expect((style.layers[1] as FillLayerSpecification).source).toBe(
+          sourceId,
+        );
+        expect(style.layers[1].type).toBe("line");
+        expect(style.layers[2].id).toBe(`${sourceId}-2`);
+        expect((style.layers[2] as FillLayerSpecification).source).toBe(
+          sourceId,
+        );
+        expect(style.layers[2].type).toBe("fill");
+        expect(style.layers[3].id).toBe(`${sourceId}-3`);
+        expect((style.layers[3] as FillLayerSpecification).source).toBe(
+          sourceId,
+        );
+        expect(style.layers[3].type).toBe("line");
+        expect(style.layers[4].id).toBe(`${sourceId}-4`);
+        expect((style.layers[4] as FillLayerSpecification).source).toBe(
+          sourceId,
+        );
+        expect(style.layers[4].type).toBe("circle");
       });
     });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geospatial-sdk/maplibre",
-  "version": "0.0.5-dev.57+457e2f3",
+  "version": "0.0.5-dev.59+5f667ef",
   "description": "Maplibre-related utilities",
   "keywords": [
     "maplibre",
@@ -27,13 +27,14 @@
     "build": "tsc"
   },
   "devDependencies": {
-    "maplibre-gl": "^5.7.3"
+    "maplibre-gl": "^5.19.0"
   },
   "peerDependencies": {
-    "maplibre-gl": "^5.7.3"
+    "maplibre-gl": "^5.19.0"
   },
   "dependencies": {
-    "@geospatial-sdk/core": "^0.0.5-dev.57+457e2f3"
+    "@geospatial-sdk/core": "^0.0.5-dev.59+5f667ef",
+    "@geospatial-sdk/style": "^0.0.5-dev.59+5f667ef"
   },
-  "gitHead": "457e2f3e1cf7b542bee94549314405cd4a2b983e"
+  "gitHead": "5f667ef9c6accc37b582e53e231cc7ca0563f9bc"
 }

package/dist/helpers/style.helpers.d.ts

@@ -1,4 +0,0 @@
-import { VectorStyle } from "@geospatial-sdk/core";
-import { LayerSpecification } from "maplibre-gl";
-export declare function contextStyleToMaplibreLayers(style?: VectorStyle): Partial<LayerSpecification>[];
-//# sourceMappingURL=style.helpers.d.ts.map

package/dist/helpers/style.helpers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.helpers.d.ts","sourceRoot":"","sources":["../../lib/helpers/style.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAajD,wBAAgB,4BAA4B,CAC1C,KAAK,GAAE,WAAgB,GACtB,OAAO,CAAC,kBAAkB,CAAC,EAAE,CAmD/B"}

package/dist/helpers/style.helpers.js

@@ -1,58 +0,0 @@
-const defaultOltStyle = {
-    "fill-color": "rgba(255,255,255,0.4)",
-    "stroke-color": "#3399CC",
-    "stroke-width": 1.25,
-    "circle-radius": 5,
-    "circle-fill-color": "rgba(255,255,255,0.4)",
-    "circle-stroke-width": 1.25,
-    "circle-stroke-color": "#3399CC",
-};
-export function contextStyleToMaplibreLayers(style = {}) {
-    const layers = [];
-    if (Array.isArray(style)) {
-        return style.flatMap((style_) => {
-            if (style_.hasOwnProperty("style")) {
-                console.warn("Rules in styles are not supported yet.");
-                return contextStyleToMaplibreLayers(style_.style);
-            }
-            return contextStyleToMaplibreLayers(style_);
-        });
-    }
-    style = { ...defaultOltStyle, ...style };
-    if (style["fill-color"]) {
-        layers.push({
-            type: "fill",
-            paint: {
-                "fill-color": style["fill-color"],
-            },
-            filter: ["==", "$type", "Polygon"],
-        });
-    }
-    if (style["stroke-color"] || style["stroke-width"]) {
-        layers.push({
-            type: "line",
-            paint: {
-                "line-color": style["stroke-color"],
-                ...(style["stroke-width"] !== undefined && {
-                    "line-width": style["stroke-width"],
-                }),
-                ...(style["stroke-line-dash"] !== undefined && {
-                    "line-dasharray": style["stroke-line-dash"],
-                }),
-            },
-        });
-    }
-    if (style["circle-radius"]) {
-        layers.push({
-            type: "circle",
-            paint: {
-                "circle-radius": style["circle-radius"],
-                "circle-stroke-color": style["circle-stroke-color"],
-                "circle-color": style["circle-fill-color"],
-                "circle-stroke-width": style["circle-stroke-width"],
-            },
-            filter: ["==", "$type", "Point"],
-        });
-    }
-    return layers;
-}

package/lib/helpers/style.helpers.test.ts

@@ -1,160 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { contextStyleToMaplibreLayers } from "./style.helpers.js";
-
-const defautlMaplibreFill = {
-  type: "fill",
-  paint: {
-    "fill-color": "rgba(255,255,255,0.4)",
-  },
-  filter: ["==", "$type", "Polygon"],
-};
-const defaultMaplibreLine = {
-  type: "line",
-  paint: {
-    "line-color": "#3399CC",
-    "line-width": 1.25,
-  },
-};
-const defaultMaplibreCircle = {
-  type: "circle",
-  filter: ["==", "$type", "Point"],
-  paint: {
-    "circle-color": "rgba(255,255,255,0.4)",
-    "circle-radius": 5,
-    "circle-stroke-color": "#3399CC",
-    "circle-stroke-width": 1.25,
-  },
-};
-const defaultMaplibreStyle = [
-  defautlMaplibreFill,
-  defaultMaplibreLine,
-  defaultMaplibreCircle,
-];
-
-describe("createPaint", () => {
-  it("return default layers when empty", () => {
-    expect(contextStyleToMaplibreLayers({} as any)).toEqual(
-      defaultMaplibreStyle,
-    );
-  });
-  describe("Fill layer", () => {
-    it("generates a fill layer", () => {
-      const result = contextStyleToMaplibreLayers({
-        "fill-color": "red",
-      } as any);
-      expect(result).toEqual([
-        {
-          filter: ["==", "$type", "Polygon"],
-          type: "fill",
-          paint: {
-            "fill-color": "red",
-          },
-        },
-        defaultMaplibreLine,
-        defaultMaplibreCircle,
-      ]);
-    });
-  });
-
-  describe("Line layer", () => {
-    it("generates a line layer if stroke-color is defined", () => {
-      const result = contextStyleToMaplibreLayers({
-        "stroke-color": "rgba(30, 67, 246, 0.5)",
-        "stroke-width": 3,
-      } as any);
-      expect(result).toEqual([
-        defautlMaplibreFill,
-        {
-          type: "line",
-          paint: {
-            "line-color": "rgba(30, 67, 246, 0.5)",
-            "line-width": 3,
-          },
-        },
-        defaultMaplibreCircle,
-      ]);
-    });
-
-    it("Line stroke width", () => {
-      const result = contextStyleToMaplibreLayers({ "stroke-width": 3 } as any);
-      expect(result[1]).toEqual({
-        type: "line",
-        paint: {
-          "line-color": "#3399CC",
-          "line-width": 3,
-        },
-      });
-    });
-
-    it("Line dash array", () => {
-      const result = contextStyleToMaplibreLayers({
-        "stroke-color": "red",
-        "stroke-line-dash": [2, 4],
-      } as any);
-      expect(result[1]).toEqual({
-        type: "line",
-        paint: {
-          "line-color": "red",
-          "line-dasharray": [2, 4],
-          "line-width": 1.25,
-        },
-      });
-    });
-  });
-
-  describe("Circle layer", () => {
-    it("generates a circle layer with fill and stroke colors and stroke width", () => {
-      const style = {
-        "circle-radius": 10,
-        "circle-fill-color": "red",
-        "circle-stroke-color": "blue",
-        "circle-stroke-width": 2,
-      };
-
-      const result = contextStyleToMaplibreLayers(style as any);
-
-      expect(result).toEqual([
-        defautlMaplibreFill,
-        defaultMaplibreLine,
-        {
-          type: "circle",
-          filter: ["==", "$type", "Point"],
-          paint: {
-            "circle-radius": 10,
-            "circle-color": "red",
-            "circle-stroke-color": "blue",
-            "circle-stroke-width": 2,
-          },
-        },
-      ]);
-    });
-
-    it("generates a circle layer with only radius if no colors are provided", () => {
-      const style = {
-        "circle-radius": 5,
-      };
-
-      const result = contextStyleToMaplibreLayers(style as any);
-
-      expect(result[2].paint).toEqual({
-        "circle-color": "rgba(255,255,255,0.4)",
-        "circle-radius": 5,
-        "circle-stroke-color": "#3399CC",
-        "circle-stroke-width": 1.25,
-      });
-    });
-
-    it("respects colors and opacity", () => {
-      const style = {
-        "circle-radius": 8,
-        "circle-fill-color": "rgba(255,0,0,0.3)",
-        "circle-stroke-color": "rgba(0,0,255,0.6)",
-      };
-
-      const result = contextStyleToMaplibreLayers(style as any);
-
-      expect(result[2].paint["circle-color"]).toBe("rgba(255,0,0,0.3)"); // mocked
-      expect(result[2].paint["circle-stroke-color"]).toBe("rgba(0,0,255,0.6)"); // mocked
-    });
-  });
-});

package/lib/helpers/style.helpers.ts

@@ -1,68 +0,0 @@
-import { VectorStyle } from "@geospatial-sdk/core";
-import { LayerSpecification } from "maplibre-gl";
-import { FlatFill, FlatStyle, Rule } from "ol/style/flat.js";
-
-const defaultOltStyle: FlatStyle = {
-  "fill-color": "rgba(255,255,255,0.4)",
-  "stroke-color": "#3399CC",
-  "stroke-width": 1.25,
-  "circle-radius": 5,
-  "circle-fill-color": "rgba(255,255,255,0.4)",
-  "circle-stroke-width": 1.25,
-  "circle-stroke-color": "#3399CC",
-};
-
-export function contextStyleToMaplibreLayers(
-  style: VectorStyle = {},
-): Partial<LayerSpecification>[] {
-  const layers: Partial<LayerSpecification>[] = [];
-
-  if (Array.isArray(style)) {
-    return style.flatMap((style_) => {
-      if (style_.hasOwnProperty("style")) {
-        console.warn("Rules in styles are not supported yet.");
-        return contextStyleToMaplibreLayers((style_ as Rule).style);
-      }
-      return contextStyleToMaplibreLayers(style_ as any);
-    });
-  }
-
-  style = { ...defaultOltStyle, ...style };
-
-  if (style["fill-color"]) {
-    layers.push({
-      type: "fill",
-      paint: {
-        "fill-color": (style as FlatFill)["fill-color"] as string,
-      },
-      filter: ["==", "$type", "Polygon"],
-    });
-  }
-  if (style["stroke-color"] || style["stroke-width"]) {
-    layers.push({
-      type: "line",
-      paint: {
-        "line-color": style["stroke-color"] as string,
-        ...(style["stroke-width"] !== undefined && {
-          "line-width": style["stroke-width"] as number,
-        }),
-        ...(style["stroke-line-dash"] !== undefined && {
-          "line-dasharray": style["stroke-line-dash"],
-        }),
-      },
-    });
-  }
-  if (style["circle-radius"]) {
-    layers.push({
-      type: "circle",
-      paint: {
-        "circle-radius": style["circle-radius"] as number,
-        "circle-stroke-color": style["circle-stroke-color"] as string,
-        "circle-color": style["circle-fill-color"] as string,
-        "circle-stroke-width": style["circle-stroke-width"] as number,
-      },
-      filter: ["==", "$type", "Point"],
-    });
-  }
-  return layers;
-}