@geospatial-sdk/maplibre 0.0.5-dev.41

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

@@ -0,0 +1,287 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  MAP_CTX_LAYER_GEOJSON_FIXTURE,
+  MAP_CTX_LAYER_GEOJSON_REMOTE_FIXTURE,
+  MAP_CTX_LAYER_OGCAPI_FIXTURE,
+  MAP_CTX_LAYER_WFS_FIXTURE,
+  MAP_CTX_LAYER_WMS_FIXTURE,
+} from "@geospatial-sdk/core/fixtures/map-context.fixtures";
+import { LayerGeojsonWithData, MapContextLayer } from "@geospatial-sdk/core";
+import { createLayer } from "./create-map";
+import {
+  FillLayerSpecification,
+  GeoJSONSourceSpecification,
+  RasterLayerSpecification,
+} from "@maplibre/maplibre-gl-style-spec";
+import {
+  FEATURE_COLLECTION_LINESTRING_FIXTURE_4326,
+  FEATURE_COLLECTION_POLYGON_FIXTURE_4326,
+} from "@geospatial-sdk/core/fixtures/geojson.fixtures";
+import { PartialStyleSpecification } from "../maplibre.models";
+import {
+  CircleLayerSpecification,
+  LayerSpecification,
+  LineLayerSpecification,
+  RasterSourceSpecification,
+} from "maplibre-gl";
+
+describe("MapContextService", () => {
+  describe("#createLayer", () => {
+    let layerModel: MapContextLayer, style: PartialStyleSpecification;
+
+    describe("WMS", () => {
+      beforeEach(async () => {
+        (layerModel = MAP_CTX_LAYER_WMS_FIXTURE),
+          (style = await createLayer(layerModel, 0));
+      });
+      it("create a tile layer", () => {
+        expect(style).toBeTruthy();
+      });
+      it("create a source", () => {
+        const sourcesIds = Object.keys(style.sources);
+        expect(sourcesIds.length).toBe(1);
+        const id = sourcesIds[0];
+        const source = style.sources[id] as RasterSourceSpecification;
+        expect(id).toBe("1046815418");
+        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}",
+        ]);
+      });
+      it("create a layer", () => {
+        expect(style.layers).toBeTruthy();
+        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`);
+      });
+    });
+    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);
+        });
+        it("create a VectorLayer", () => {
+          expect(style).toBeTruthy();
+        });
+        it("create a source", () => {
+          const sourcesIds = Object.keys(style.sources);
+          expect(sourcesIds.length).toBe(1);
+          expect(sourcesIds[0]).toBe("2792250259");
+        });
+        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");
+
+          layer = style.layers[1] as RasterLayerSpecification;
+          expect(layer.id).toBe("2792250259-line");
+          expect(layer.source).toBe("2792250259");
+
+          layer = style.layers[2] as RasterLayerSpecification;
+          expect(layer.id).toBe("2792250259-circle");
+          expect(layer.source).toBe("2792250259");
+        });
+
+        it("set correct source properties", () => {
+          const sourcesIds = Object.keys(style.sources);
+          const source = style.sources[
+            sourcesIds[0]
+          ] as GeoJSONSourceSpecification;
+          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)");
+        });
+      });
+      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);
+        });
+        it("create a VectorLayer", () => {
+          expect(style).toBeTruthy();
+        });
+        it("create a source", () => {
+          const sourcesIds = Object.keys(style.sources);
+          expect(sourcesIds.length).toBe(1);
+        });
+        it("create 3 layers", () => {
+          expect(style.layers).toBeTruthy();
+          expect(style.layers.length).toBe(3);
+        });
+
+        it("set correct source properties", () => {
+          const sourcesIds = Object.keys(style.sources);
+          const source = style.sources[
+            sourcesIds[0]
+          ] as GeoJSONSourceSpecification;
+          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"]).toBeUndefined();
+        });
+      });
+      describe("with invalid inline data as string", () => {
+        beforeEach(async () => {
+          const spy = vi.spyOn(window.console, "warn");
+          spy.mockClear();
+          layerModel = {
+            ...MAP_CTX_LAYER_GEOJSON_FIXTURE,
+            url: undefined,
+            data: "blargz",
+          } as LayerGeojsonWithData;
+          style = await createLayer(layerModel, 0);
+        });
+        it("create a VectorLayer", () => {
+          expect(style).toBeTruthy();
+        });
+        it("outputs error in the console", () => {
+          expect(window.console.warn).toHaveBeenCalled();
+        });
+        it("create an empty VectorSource source", () => {
+          expect(style.sources).toEqual({
+            "3631250040": {
+              data: {
+                features: [],
+                type: "FeatureCollection",
+              },
+              type: "geojson",
+            },
+          });
+        });
+        describe("with remote file url", () => {
+          beforeEach(async () => {
+            layerModel = MAP_CTX_LAYER_GEOJSON_REMOTE_FIXTURE;
+            global.fetch = vi.fn(() =>
+              Promise.resolve({
+                ok: true,
+                json: () =>
+                  Promise.resolve(FEATURE_COLLECTION_POLYGON_FIXTURE_4326),
+              }),
+            );
+            style = await createLayer(layerModel, 0);
+          });
+          it("create a VectorLayer", () => {
+            expect(style).toBeTruthy();
+          });
+          it("create a source", () => {
+            const sourcesIds = Object.keys(style.sources);
+            expect(sourcesIds.length).toBe(1);
+          });
+          it("create 3 layers", () => {
+            expect(style.layers).toBeTruthy();
+            expect(style.layers.length).toBe(3);
+          });
+
+          it("set correct source properties", () => {
+            const sourcesIds = Object.keys(style.sources);
+            const source = style.sources[
+              sourcesIds[0]
+            ] as GeoJSONSourceSpecification;
+            expect(source.type).toBe("geojson");
+            expect(source.data).toEqual(
+              "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"]).toBeUndefined();
+          });
+        });
+      });
+    });
+    describe("WFS", () => {
+      beforeEach(async () => {
+        (layerModel = MAP_CTX_LAYER_WFS_FIXTURE),
+          (style = await createLayer(layerModel, 1));
+      });
+      it("create a vector layer", () => {
+        expect(style).toBeTruthy();
+      });
+      it("create a source", () => {
+        const sourcesIds = Object.keys(style.sources);
+        expect(sourcesIds.length).toBe(1);
+        const id = sourcesIds[0];
+        const source = style.sources[id] as GeoJSONSourceSpecification;
+        expect(id).toBe("985400327");
+        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",
+        );
+      });
+      it("create 3 layers", () => {
+        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);
+
+        layer = style.layers[1] as LineLayerSpecification;
+        expect(layer.id).toBe("985400327-line");
+        expect(layer.source).toBe("985400327");
+        expect(layer.metadata.sourcePosition).toBe(1);
+
+        layer = style.layers[2] as CircleLayerSpecification;
+        expect(layer.id).toBe("985400327-circle");
+        expect(layer.source).toBe("985400327");
+        expect(layer.metadata.sourcePosition).toBe(1);
+      });
+    });
+    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));
+      });
+      it("create a vector layer", () => {
+        expect(style).toBeTruthy();
+      });
+      it("create a source", () => {
+        const sourcesIds = Object.keys(style.sources);
+        expect(sourcesIds.length).toBe(1);
+        const id = sourcesIds[0];
+        const source = style.sources[id] as GeoJSONSourceSpecification;
+        expect(id).toBe("504003385");
+        expect(source.data).toEqual(
+          "https://demo.ldproxy.net/zoomstack/collections/airports/items?f=json",
+        );
+      });
+      it("create 3 layers", () => {
+        expect(style.layers).toBeTruthy();
+        expect(style.layers.length).toBe(3);
+        const layer = style.layers[0] as FillLayerSpecification;
+        expect(layer.id).toBe("504003385-fill");
+        expect(layer.source).toBe("504003385");
+        expect(layer.metadata.sourcePosition).toBe(0);
+      });
+    });
+  });
+});

package/lib/map/create-map.ts

@@ -0,0 +1,173 @@
+import {
+  MapContext,
+  MapContextLayer,
+  removeSearchParams,
+  ViewByZoomAndCenter,
+} from "@geospatial-sdk/core";
+
+import {
+  LayerSpecification,
+  Map,
+  MapOptions,
+  StyleSpecification,
+} from "maplibre-gl";
+import { FeatureCollection, Geometry } from "geojson";
+import {
+  OgcApiEndpoint,
+  WfsEndpoint,
+  WmsEndpoint,
+} from "@camptocamp/ogc-client";
+import {
+  createDatasetFromGeoJsonLayer,
+  generateLayerId,
+} from "../helpers/map.helpers";
+import { Dataset, PartialStyleSpecification } from "../maplibre.models";
+
+const featureCollection: FeatureCollection<Geometry | null> = {
+  type: "FeatureCollection",
+  features: [],
+};
+
+export async function createLayer(
+  layerModel: MapContextLayer,
+  sourcePosition: number,
+): Promise<PartialStyleSpecification> {
+  const { type } = layerModel;
+
+  switch (type) {
+    case "wms": {
+      const layerId = generateLayerId(layerModel);
+      const sourceId = layerId;
+
+      const endpoint = await new WmsEndpoint(layerModel.url).isReady();
+      let url = endpoint.getMapUrl([layerModel.name], {
+        widthPx: 256,
+        heightPx: 256,
+        extent: [0, 0, 0, 0], // will be replaced by maplibre-gl
+        outputFormat: "image/png",
+        crs: "EPSG:3857",
+      });
+      url = removeSearchParams(url, ["bbox"]);
+      url = `${url.toString()}&BBOX={bbox-epsg-3857}`;
+
+      const dataset: Dataset = {
+        sources: {
+          [sourceId]: {
+            type: "raster",
+            tiles: [url],
+            tileSize: 256,
+          },
+        },
+        layers: [
+          {
+            id: layerId,
+            type: "raster",
+            source: sourceId,
+            paint: {},
+            metadata: {
+              sourcePosition,
+            },
+          },
+        ],
+      };
+      return dataset;
+    }
+    case "wfs": {
+      const entryPoint = await new WfsEndpoint(layerModel.url).isReady();
+      const url = entryPoint.getFeatureUrl(layerModel.featureType, {
+        asJson: true,
+        outputCrs: "EPSG:4326",
+      });
+      return createDatasetFromGeoJsonLayer(layerModel, url, sourcePosition);
+    }
+    case "geojson": {
+      let geojson;
+      if (layerModel.url !== undefined) {
+        geojson = layerModel.url;
+      } else {
+        const data = layerModel.data;
+        if (typeof data === "string") {
+          try {
+            geojson = JSON.parse(data) as FeatureCollection;
+          } catch (e) {
+            console.warn("A layer could not be created", layerModel, e);
+            geojson = featureCollection;
+          }
+        } else {
+          geojson = data;
+        }
+      }
+      return createDatasetFromGeoJsonLayer(layerModel, geojson, sourcePosition);
+    }
+    case "ogcapi": {
+      const ogcEndpoint = new OgcApiEndpoint(layerModel.url);
+      let layerUrl: string;
+      if (layerModel.useTiles) {
+        console.warn("[Warning] OGC API - Tiles not yet implemented.");
+      } else {
+        layerUrl = await ogcEndpoint.getCollectionItemsUrl(
+          layerModel.collection,
+          { ...layerModel.options, asJson: true },
+        );
+        return createDatasetFromGeoJsonLayer(
+          layerModel,
+          layerUrl,
+          sourcePosition,
+        );
+      }
+      break;
+    }
+    case "maplibre-style": {
+      console.warn("[Warning] Maplibre style - Not yet fully implemented.");
+      const style = await fetch(layerModel.styleUrl).then((res) => res.json());
+      style.layers?.forEach(
+        (layer: LayerSpecification) => (layer.metadata = { sourcePosition }),
+      );
+      return style;
+    }
+  }
+  return {} as StyleSpecification;
+}
+
+/**
+ * Create an Maplibre map from a context; optionally specify a target (root element) for the map
+ * @param context
+ * @param target
+ */
+export async function createMapFromContext(
+  context: MapContext,
+  mapOptions: MapOptions,
+): Promise<Map> {
+  const map = new Map(mapOptions);
+  return await resetMapFromContext(map, context);
+}
+
+/**
+ * Resets a Maplibre map from a context; existing content will be cleared
+ * @param map
+ * @param context
+ */
+export async function resetMapFromContext(
+  map: Map,
+  context: MapContext,
+): Promise<Map> {
+  map.setZoom((context.view as ViewByZoomAndCenter).zoom);
+  map.setCenter((context.view as ViewByZoomAndCenter).center);
+
+  for (let i = 0; i < context.layers.length; i++) {
+    const layerModel = context.layers[i];
+    const partialMLStyle = await createLayer(layerModel, i);
+
+    if (partialMLStyle.glyphs) {
+      map.setGlyphs(partialMLStyle.glyphs);
+    }
+    if (partialMLStyle.sprite) {
+      map.setSprite(partialMLStyle.sprite as string);
+    }
+    Object.keys(partialMLStyle.sources).forEach((sourceId) =>
+      map.addSource(sourceId, partialMLStyle.sources[sourceId]),
+    );
+    partialMLStyle.layers.map((layer) => map.addLayer(layer));
+  }
+  return map;
+}

package/lib/map/index.ts

@@ -0,0 +1,2 @@
+export { createMapFromContext, resetMapFromContext } from "./create-map";
+export { applyContextDiffToMap } from "./apply-context-diff";

package/lib/maplibre.models.ts

@@ -0,0 +1,31 @@
+import {
+  BackgroundLayerSpecification,
+  LayerSpecification,
+  StyleSpecification,
+} from "maplibre-gl";
+import {
+  MapContextLayerGeojson,
+  MapContextLayerOgcApi,
+  MapContextLayerWfs,
+} from "@geospatial-sdk/core";
+
+export type LayerSpecificationWithSource = Exclude<
+  LayerSpecification,
+  BackgroundLayerSpecification
+>;
+
+export interface LayerMetadataSpecification {
+  sourcePosition: number;
+}
+
+export type LayerContextWithStyle =
+  | MapContextLayerWfs
+  | MapContextLayerOgcApi
+  | MapContextLayerGeojson;
+
+export type Dataset = Pick<StyleSpecification, "sources" | "layers">;
+
+export type PartialStyleSpecification = Dataset & {
+  glyphs?: StyleSpecification["glyphs"];
+  sprite?: StyleSpecification["sprite"];
+};

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@geospatial-sdk/maplibre",
+  "version": "0.0.5-dev.41+dba0603",
+  "description": "Maplibre-related utilities",
+  "keywords": [
+    "maplibre",
+    "map"
+  ],
+  "author": "Florent Gravin <florent.gravin@camptocamp.com>",
+  "homepage": "",
+  "license": "BSD-3-Clause",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "directories": {
+    "lib": "lib"
+  },
+  "files": [
+    "lib",
+    "dist"
+  ],
+  "scripts": {
+    "test": "vitest",
+    "build": "tsc"
+  },
+  "devDependencies": {
+    "maplibre-gl": "^5.7.3"
+  },
+  "peerDependencies": {
+    "maplibre-gl": "^5.7.3"
+  },
+  "dependencies": {
+    "@geospatial-sdk/core": "^0.0.5-dev.41+dba0603"
+  },
+  "gitHead": "dba060374167251ca486946c95e8a885c121ccd5"
+}