Merge pull request #10 from camptocamp/add-mapbox-style

Create a layer based on a Mapbox-hosted style
camptocamp · Aug 16, 2024 · 4001375 · 4001375
2 parents 751c3f3 + 6a104a4
commit 4001375
Show file tree

Hide file tree

Showing 6 changed files with 168 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/core/fixtures/map-context.fixtures.ts b/packages/core/fixtures/map-context.fixtures.ts
@@ -3,6 +3,7 @@ import {
   Extent,
   MapContext,
   MapContextLayerGeojson,
+  MapContextLayerMapLibreStyle,
   MapContextLayerOgcApi,
   MapContextLayerWfs,
   MapContextLayerWms,
@@ -56,6 +57,12 @@ export const MAP_CTX_LAYER_GEOJSON_REMOTE_FIXTURE: MapContextLayerGeojson =
     type: "geojson",
     url: "https://my.host.com/data/regions.json",
   });
+export const MAP_CTX_LAYER_MAPBLIBRE_STYLE_FIXTURE: MapContextLayerMapLibreStyle =
+  deepFreeze({
+    type: "maplibre-style",
+    styleUrl: "http://my.host.com/maplibre/style.json",
+    accessToken: "abcdefgh",
+  });
 
 export const MAP_CTX_VIEW_FIXTURE: MapContextView = deepFreeze({
   center: [7.75, 48.6],

diff --git a/packages/core/lib/model/map-context.ts b/packages/core/lib/model/map-context.ts
@@ -51,6 +51,13 @@ export interface MapContextLayerOgcApi extends MapContextBaseLayer {
   options?: Record<string, string>;
 }
 
+// Layer pointing to a MapLibre Style spec, see https://maplibre.org/maplibre-style-spec/
+export interface MapContextLayerMapLibreStyle extends MapContextBaseLayer {
+  type: "maplibre-style";
+  styleUrl: string;
+  accessToken?: string;
+}
+
 export interface MapContextLayerXyz extends MapContextBaseLayer {
   type: "xyz";
   url: string;
@@ -82,7 +89,8 @@ export type MapContextLayer =
   | MapContextLayerWfs
   | MapContextLayerXyz
   | MapContextLayerGeojson
-  | MapContextLayerOgcApi;
+  | MapContextLayerOgcApi
+  | MapContextLayerMapLibreStyle;
 
 export type Coordinate = [number, number];
 

diff --git a/packages/openlayers/lib/map/create-map.test.ts b/packages/openlayers/lib/map/create-map.test.ts
@@ -12,6 +12,7 @@ import {
   MAP_CTX_FIXTURE,
   MAP_CTX_LAYER_GEOJSON_FIXTURE,
   MAP_CTX_LAYER_GEOJSON_REMOTE_FIXTURE,
+  MAP_CTX_LAYER_MAPBLIBRE_STYLE_FIXTURE,
   MAP_CTX_LAYER_OGCAPI_FIXTURE,
   MAP_CTX_LAYER_WFS_FIXTURE,
   MAP_CTX_LAYER_WMS_FIXTURE,
@@ -32,6 +33,8 @@ import {
   resetMapFromContext,
 } from "./create-map";
 import WMTS from "ol/source/WMTS";
+import { VectorTile } from "ol/source";
+import { MapboxVectorLayer } from "ol-mapbox-style";
 
 describe("MapContextService", () => {
   describe("#createLayer", () => {
@@ -291,6 +294,26 @@ describe("MapContextService", () => {
         ]);
       });
     });
+
+    describe("Maplibre Style", () => {
+      beforeEach(async () => {
+        (layerModel = MAP_CTX_LAYER_MAPBLIBRE_STYLE_FIXTURE),
+          (layer = await createLayer(layerModel));
+      });
+      it("create a tile layer", () => {
+        expect(layer).toBeTruthy();
+        expect(layer).toBeInstanceOf(MapboxVectorLayer);
+      });
+      it("set correct layer properties", () => {
+        expect(layer.getVisible()).toBe(true);
+        expect(layer.getOpacity()).toBe(1);
+        expect(layer.get("label")).toBeUndefined();
+      });
+      it("create a Vector Tile source", () => {
+        const source = layer.getSource();
+        expect(source).toBeInstanceOf(VectorTile);
+      });
+    });
   });
 
   describe("#createView", () => {

diff --git a/packages/openlayers/lib/map/create-map.ts b/packages/openlayers/lib/map/create-map.ts
@@ -27,6 +27,7 @@ import {
   WfsEndpoint,
   WmtsEndpoint,
 } from "@camptocamp/ogc-client";
+import { MapboxVectorLayer } from "ol-mapbox-style";
 
 const GEOJSON = new GeoJSON();
 const WFS_MAX_FEATURES = 10000;
@@ -112,6 +113,13 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
       layer = olLayer;
       break;
     }
+    case "maplibre-style": {
+      layer = new MapboxVectorLayer({
+        styleUrl: layerModel.styleUrl,
+        accessToken: layerModel.accessToken,
+      }) as unknown as Layer;
+      break;
+    }
     case "geojson": {
       if (layerModel.url !== undefined) {
         layer = new VectorLayer({
@@ -147,7 +155,7 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
       break;
     }
     case "ogcapi": {
-      const ogcEndpoint = await new OgcApiEndpoint(layerModel.url);
+      const ogcEndpoint = new OgcApiEndpoint(layerModel.url);
       let layerUrl: string;
       if (layerModel.useTiles) {
         if (layerModel.useTiles === "vector") {

diff --git a/packages/openlayers/package.json b/packages/openlayers/package.json
@@ -29,7 +29,8 @@
   },
   "devDependencies": {
     "@types/chroma-js": "^2.4.3",
-    "ol": "^8.2.0"
+    "ol": "^8.2.0",
+    "ol-mapbox-style": "^12.3.5"
   },
   "peerDependencies": {
     "ol": ">6.x"