@geospatial-sdk/maplibre 0.0.5-dev.41

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

@@ -0,0 +1,160 @@
+import { describe, expect, it } from "vitest";
+import { contextStyleToMaplibreLayers } from "./style.helpers";
+
+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

@@ -0,0 +1,68 @@
+import { VectorStyle } from "@geospatial-sdk/core/dist/model/style";
+import { LayerSpecification } from "maplibre-gl";
+import { FlatFill, FlatStyle, Rule } from "ol/style/flat";
+
+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"],
+        "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;
+}

package/lib/index.ts

@@ -0,0 +1,2 @@
+export * from "./map";
+export * from "./maplibre.models";

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

@@ -0,0 +1,152 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MapContext, MapContextDiff } from "@geospatial-sdk/core";
+import {
+  SAMPLE_CONTEXT,
+  SAMPLE_LAYER1,
+  SAMPLE_LAYER2,
+  SAMPLE_LAYER3,
+  SAMPLE_LAYER4,
+} from "@geospatial-sdk/core/fixtures/map-context.fixtures";
+import { applyContextDiffToMap } from "./apply-context-diff";
+import * as mapHelpers from "../helpers/map.helpers";
+import { getBeforeId } from "../helpers/map.helpers";
+
+// Helper to create a fresh mock Map instance for each test
+function createMockMap() {
+  return {
+    addLayer: vi.fn(),
+    addSource: vi.fn(),
+    removeLayer: vi.fn(),
+    removeSource: vi.fn(),
+    setZoom: vi.fn(),
+    setCenter: vi.fn(),
+    fitBounds: vi.fn(),
+    getStyle: vi.fn(() => ({ layers: [], sources: {} })),
+  };
+}
+
+describe("applyContextDiffToMap (mocked Map)", () => {
+  let context: MapContext;
+  let diff: MapContextDiff;
+  let map: ReturnType<typeof createMockMap>;
+
+  beforeEach(async () => {
+    context = {
+      ...SAMPLE_CONTEXT,
+      layers: [SAMPLE_LAYER2, SAMPLE_LAYER1],
+    };
+    map = createMockMap();
+    map.getStyle.mockReturnValue({ layers: [], sources: {} });
+  });
+
+  it("does not call any mutating methods for no change", async () => {
+    diff = {
+      layersAdded: [],
+      layersChanged: [],
+      layersRemoved: [],
+      layersReordered: [],
+    };
+    await applyContextDiffToMap(map as any, diff);
+    expect(map.addLayer).not.toHaveBeenCalled();
+    expect(map.addSource).not.toHaveBeenCalled();
+    expect(map.removeLayer).not.toHaveBeenCalled();
+    expect(map.removeSource).not.toHaveBeenCalled();
+  });
+
+  it("calls addLayer and addSource for layers added", async () => {
+    diff = {
+      layersAdded: [
+        { layer: SAMPLE_LAYER3, position: 0 },
+        { layer: SAMPLE_LAYER4, position: 2 },
+      ],
+      layersChanged: [],
+      layersRemoved: [],
+      layersReordered: [],
+    };
+    await applyContextDiffToMap(map as any, diff);
+    expect(map.addSource).toHaveBeenCalled();
+    expect(map.addLayer).toHaveBeenCalled();
+  });
+
+  it("calls removeLayer and removeSource for layers removed", async () => {
+    // Simulate getLayersAtPosition returning a mock layer with id/source
+    const mockLayer = { id: "layerid", source: "sourceid" };
+    vi.spyOn(mapHelpers, "getLayersAtPosition").mockReturnValue([mockLayer]);
+    diff = {
+      layersAdded: [],
+      layersChanged: [],
+      layersRemoved: [
+        { layer: SAMPLE_LAYER2, position: 0 },
+        { layer: SAMPLE_LAYER1, position: 1 },
+      ],
+      layersReordered: [],
+    };
+    await applyContextDiffToMap(map as any, diff);
+    expect(map.removeLayer).toHaveBeenCalledWith("layerid");
+    expect(map.removeSource).toHaveBeenCalledWith("sourceid");
+  });
+
+  it("calls addLayer for changed layers", async () => {
+    const generateLayerIdSpy = vi
+      .spyOn(mapHelpers, "generateLayerId")
+      .mockReturnValue("azreza");
+    const getBeforeId = vi
+      .spyOn(mapHelpers, "getBeforeId")
+      .mockReturnValue("azreza");
+    const removeLayersFromSourceSpy = vi.spyOn(
+      mapHelpers,
+      "removeLayersFromSource",
+    );
+
+    diff = {
+      layersAdded: [],
+      layersChanged: [
+        { layer: { ...SAMPLE_LAYER3, url: "http://changed/" }, position: 0 },
+        {
+          layer: {
+            ...SAMPLE_LAYER1,
+            url: "http://changed/",
+            extras: { changed: true },
+          },
+          position: 1,
+        },
+      ],
+      layersRemoved: [],
+      layersReordered: [],
+    };
+    await applyContextDiffToMap(map as any, diff);
+
+    try {
+      expect(generateLayerIdSpy).toHaveBeenCalledWith(
+        diff.layersChanged[1].layer,
+      );
+      expect(generateLayerIdSpy).toHaveBeenCalledWith(
+        diff.layersChanged[0].layer,
+      );
+      expect(map.addLayer).toHaveBeenCalled();
+      expect(removeLayersFromSourceSpy).toHaveBeenCalled();
+      expect(removeLayersFromSourceSpy).toHaveBeenCalledTimes(2);
+    } finally {
+      generateLayerIdSpy.mockRestore();
+      removeLayersFromSourceSpy.mockRestore();
+    }
+  });
+
+  it("calls fitBounds for viewChanges with extent", async () => {
+    diff = {
+      layersAdded: [],
+      layersChanged: [],
+      layersRemoved: [],
+      layersReordered: [],
+      viewChanges: { extent: [-10, -10, 20, 20] },
+    };
+    await applyContextDiffToMap(map as any, diff);
+    expect(map.fitBounds).toHaveBeenCalledWith(
+      [
+        [-10, -10],
+        [20, 20],
+      ],
+      expect.objectContaining({ padding: 20, duration: 1000 }),
+    );
+  });
+});

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

@@ -0,0 +1,89 @@
+import { MapContextDiff } from "@geospatial-sdk/core";
+import { Map } from "maplibre-gl";
+import { createLayer } from "./create-map";
+import {
+  generateLayerId,
+  getBeforeId,
+  getLayersAtPosition,
+  removeLayersFromSource,
+} from "../helpers/map.helpers";
+
+/**
+ * Apply a context diff to an MapLibre map
+ * @param map
+ * @param contextDiff
+ */
+export async function applyContextDiffToMap(
+  map: Map,
+  contextDiff: MapContextDiff,
+): Promise<void> {
+  // 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);
+      if (mlLayers.length === 0) {
+        console.warn(
+          `[Warning] applyContextDiffToMap: no layer found at position ${layerRemoved.position} to remove.`,
+        );
+        continue;
+      }
+      const sourceId = mlLayers[0].source;
+      mlLayers.forEach((layer) => {
+        map.removeLayer(layer.id);
+      });
+      map.removeSource(sourceId);
+    }
+  }
+
+  // insert added layers
+  const newLayers = await Promise.all(
+    contextDiff.layersAdded.map((layerAdded) =>
+      createLayer(layerAdded.layer, layerAdded.position),
+    ),
+  );
+  newLayers.forEach((style, index) => {
+    const position = contextDiff.layersAdded[index].position;
+    const beforeId = getBeforeId(map, position);
+    Object.keys(style.sources).forEach((sourceId) =>
+      map.addSource(sourceId, style.sources[sourceId]),
+    );
+    style.layers.map((layer) => {
+      map.addLayer(layer, 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) => {
+        map.addLayer(layer, beforeId);
+      });
+    });
+  }
+
+  if (typeof contextDiff.viewChanges !== "undefined") {
+    const { viewChanges } = contextDiff;
+
+    if (viewChanges && "extent" in viewChanges) {
+      const { extent } = viewChanges;
+
+      map.fitBounds(
+        [
+          [extent[0], extent[1]],
+          [extent[2], extent[3]],
+        ],
+        {
+          padding: 20,
+          duration: 1000,
+        },
+      );
+    }
+  }
+}