@geospatial-sdk/openlayers 0.0.5-dev.18 → 0.0.5-dev.20

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,GAAG,MAAM,QAAQ,CAAC;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAQtD;;;;GAIG;AACH,wBAAsB,qBAAqB,CACzC,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,cAAc,GAC1B,OAAO,CAAC,GAAG,CAAC,CAuFd"}
+{"version":3,"file":"apply-context-diff.d.ts","sourceRoot":"","sources":["../../lib/map/apply-context-diff.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,QAAQ,CAAC;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAQtD;;;;GAIG;AACH,wBAAsB,qBAAqB,CACzC,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,cAAc,GAC1B,OAAO,CAAC,GAAG,CAAC,CAwFd"}

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

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { createLayer } from "./create-map";
+import { createLayer, createView } from "./create-map";
 import { fromLonLat, transformExtent } from "ol/proj";
 import GeoJSON from "ol/format/GeoJSON";
 const GEOJSON = new GeoJSON();
@@ -55,11 +55,12 @@ export function applyContextDiffToMap(map, contextDiff) {
                 layers.setAt(layerChanged.position, layer);
             });
         }
-        if ("viewChanges" in contextDiff) {
+        if (typeof contextDiff.viewChanges !== "undefined") {
             const { viewChanges } = contextDiff;
             const view = map.getView();
             const projection = view.getProjection();
-            if (!viewChanges) {
+            if (viewChanges === null) {
+                map.setView(createView(viewChanges, map));
                 return map;
             }
             if ("geometry" in viewChanges) {

package/dist/map/create-map.d.ts

@@ -3,7 +3,7 @@ import Map from "ol/Map";
 import View from "ol/View";
 import Layer from "ol/layer/Layer";
 export declare function createLayer(layerModel: MapContextLayer): Promise<Layer>;
-export declare function createView(viewModel: MapContextView, map: Map): View;
+export declare function createView(viewModel: MapContextView | null, map: Map): View;
 /**
  * Create an OpenLayers map from a context; optionally specify a target (root element) for the map
  * @param context

package/dist/map/create-map.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-map.d.ts","sourceRoot":"","sources":["../../lib/map/create-map.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,eAAe,EACf,cAAc,EAEf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,GAAG,MAAM,QAAQ,CAAC;AACzB,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,gBAAgB,CAAC;AA0BnC,wBAAsB,WAAW,CAAC,UAAU,EAAE,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC,CAwL7E;AAED,wBAAgB,UAAU,CAAC,SAAS,EAAE,cAAc,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,CAyBpE;AAED;;;;GAIG;AACH,wBAAsB,oBAAoB,CACxC,OAAO,EAAE,UAAU,EACnB,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAC5B,OAAO,CAAC,GAAG,CAAC,CAKd;AAED;;;;GAIG;AACH,wBAAsB,mBAAmB,CACvC,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,UAAU,GAClB,OAAO,CAAC,GAAG,CAAC,CAQd"}
+{"version":3,"file":"create-map.d.ts","sourceRoot":"","sources":["../../lib/map/create-map.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,eAAe,EACf,cAAc,EAEf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,GAAG,MAAM,QAAQ,CAAC;AACzB,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,gBAAgB,CAAC;AA4BnC,wBAAsB,WAAW,CAAC,UAAU,EAAE,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC,CAuL7E;AAED,wBAAgB,UAAU,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,CA+B3E;AAED;;;;GAIG;AACH,wBAAsB,oBAAoB,CACxC,OAAO,EAAE,UAAU,EACnB,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAC5B,OAAO,CAAC,GAAG,CAAC,CAKd;AAED;;;;GAIG;AACH,wBAAsB,mBAAmB,CACvC,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,UAAU,GAClB,OAAO,CAAC,GAAG,CAAC,CAQd"}

package/dist/map/create-map.js

@@ -20,17 +20,18 @@ import { fromLonLat } from "ol/proj";
 import { bbox as bboxStrategy } from "ol/loadingstrategy";
 import { defaultStyle } from "./styles";
 import VectorTileLayer from "ol/layer/VectorTile";
-import { OGCMapTile, OGCVectorTile, WMTS } from "ol/source";
-import { MVT } from "ol/format";
+import OGCMapTile from "ol/source/OGCMapTile";
+import OGCVectorTile from "ol/source/OGCVectorTile";
+import WMTS from "ol/source/WMTS";
+import MVT from "ol/format/MVT";
 import { OgcApiEndpoint, WfsEndpoint, WmtsEndpoint, } from "@camptocamp/ogc-client";
 import { MapboxVectorLayer } from "ol-mapbox-style";
 const GEOJSON = new GeoJSON();
 const WFS_MAX_FEATURES = 10000;
 export function createLayer(layerModel) {
-    var _a;
+    var _a, _b, _c, _d, _e;
     return __awaiter(this, void 0, void 0, function* () {
         const { type } = layerModel;
-        const style = defaultStyle;
         let layer;
         switch (type) {
             case "xyz":
@@ -55,8 +56,8 @@ export function createLayer(layerModel) {
                 const olLayer = new TileLayer({});
                 const endpoint = new WmtsEndpoint(layerModel.url);
                 endpoint.isReady().then((endpoint) => __awaiter(this, void 0, void 0, function* () {
-                    var _b;
-                    const layerName = (_b = endpoint.getSingleLayerName()) !== null && _b !== void 0 ? _b : layerModel.name;
+                    var _f;
+                    const layerName = (_f = endpoint.getSingleLayerName()) !== null && _f !== void 0 ? _f : layerModel.name;
                     const layer = endpoint.getLayerByName(layerName);
                     const matrixSet = layer.matrixSets[0];
                     const tileGrid = yield endpoint.getOpenLayersTileGrid(layer.name);
@@ -83,7 +84,7 @@ export function createLayer(layerModel) {
             }
             case "wfs": {
                 const olLayer = new VectorLayer({
-                    style,
+                    style: (_a = layerModel.style) !== null && _a !== void 0 ? _a : defaultStyle,
                 });
                 new WfsEndpoint(layerModel.url).isReady().then((endpoint) => {
                     var _a;
@@ -121,7 +122,7 @@ export function createLayer(layerModel) {
                             url: layerModel.url,
                             attributions: layerModel.attributions,
                         }),
-                        style,
+                        style: (_b = layerModel.style) !== null && _b !== void 0 ? _b : defaultStyle,
                     });
                 }
                 else {
@@ -144,7 +145,7 @@ export function createLayer(layerModel) {
                             features,
                             attributions: layerModel.attributions,
                         }),
-                        style,
+                        style: (_c = layerModel.style) !== null && _c !== void 0 ? _c : defaultStyle,
                     });
                 }
                 break;
@@ -181,7 +182,7 @@ export function createLayer(layerModel) {
                             url: layerUrl,
                             attributions: layerModel.attributions,
                         }),
-                        style,
+                        style: (_d = layerModel.style) !== null && _d !== void 0 ? _d : defaultStyle,
                     });
                 }
                 break;
@@ -197,12 +198,18 @@ export function createLayer(layerModel) {
         typeof layerModel.opacity !== "undefined" &&
             layer.setOpacity(layerModel.opacity);
         typeof layerModel.attributions !== "undefined" &&
-            ((_a = layer.getSource()) === null || _a === void 0 ? void 0 : _a.setAttributions(layerModel.attributions));
+            ((_e = layer.getSource()) === null || _e === void 0 ? void 0 : _e.setAttributions(layerModel.attributions));
         layer.set("label", layerModel.label);
         return layer;
     });
 }
 export function createView(viewModel, map) {
+    if (viewModel === null) {
+        return new View({
+            center: [0, 0],
+            zoom: 0,
+        });
+    }
     const view = new View(Object.assign(Object.assign(Object.assign({}, ("maxExtent" in viewModel && { extent: viewModel.maxExtent })), ("maxZoom" in viewModel && { maxZoom: viewModel.maxZoom })), { multiWorld: false, constrainResolution: true }));
     if ("geometry" in viewModel) {
         const geom = GEOJSON.readGeometry(viewModel.geometry);

package/dist/map/register-events.js

@@ -101,7 +101,7 @@ export function listen(map, eventType, callback) {
             break;
         case MapClickEventType:
             map.on("click", (event) => {
-                const coordinate = toLonLat(event.pixel, map.getView().getProjection());
+                const coordinate = toLonLat(event.coordinate, map.getView().getProjection());
                 callback({
                     type: "map-click",
                     coordinate,

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

@@ -53,7 +53,6 @@ describe("applyContextDiffToMap", () => {
         layersChanged: [],
         layersRemoved: [],
         layersReordered: [],
-        viewChanges: {},
       };
       await applyContextDiffToMap(map, diff);
       layersArray = map.getLayers().getArray();
@@ -81,7 +80,6 @@ describe("applyContextDiffToMap", () => {
         layersChanged: [],
         layersRemoved: [],
         layersReordered: [],
-        viewChanges: {},
       };
       applyContextDiffToMap(map, diff);
       layersArray = map.getLayers().getArray();
@@ -111,7 +109,6 @@ describe("applyContextDiffToMap", () => {
           },
         ],
         layersReordered: [],
-        viewChanges: {},
       };
       applyContextDiffToMap(map, diff);
     });
@@ -145,7 +142,6 @@ describe("applyContextDiffToMap", () => {
         ],
         layersRemoved: [],
         layersReordered: [],
-        viewChanges: {},
       };
       applyContextDiffToMap(map, diff);
       layersArray = map.getLayers().getArray();
@@ -181,7 +177,6 @@ describe("applyContextDiffToMap", () => {
               previousPosition: 0,
             },
           ],
-          viewChanges: {},
         };
         applyContextDiffToMap(map, diff);
         layersArray = map.getLayers().getArray();
@@ -217,7 +212,67 @@ describe("applyContextDiffToMap", () => {
               previousPosition: 0,
             },
           ],
-          viewChanges: {},
+        };
+        applyContextDiffToMap(map, diff);
+        layersArray = map.getLayers().getArray();
+      });
+      it("moves the layers accordingly", () => {
+        expect(layersArray.length).toEqual(4);
+        assertEqualsToModel(layersArray[0], SAMPLE_LAYER4);
+        assertEqualsToModel(layersArray[1], SAMPLE_LAYER3);
+        assertEqualsToModel(layersArray[2], SAMPLE_LAYER1);
+        assertEqualsToModel(layersArray[3], SAMPLE_LAYER2);
+      });
+    });
+  });
+
+  describe("view change", () => {
+    describe("set to default view", () => {
+      beforeEach(async () => {
+        context = {
+          ...SAMPLE_CONTEXT,
+          layers: [SAMPLE_LAYER1, SAMPLE_LAYER2, SAMPLE_LAYER3],
+        };
+        map = await createMapFromContext(context);
+        diff = {
+          layersAdded: [],
+          layersChanged: [],
+          layersRemoved: [],
+          layersReordered: [],
+          viewChanges: null,
+        };
+        applyContextDiffToMap(map, diff);
+      });
+      it("set the view back to default", () => {
+        const view = map.getView();
+        expect(view.getCenter()).toEqual([0, 0]);
+        expect(view.getZoom()).toEqual(0);
+      });
+    });
+
+    describe("four layers reordered", () => {
+      beforeEach(async () => {
+        context = {
+          ...SAMPLE_CONTEXT,
+          layers: [SAMPLE_LAYER1, SAMPLE_LAYER3, SAMPLE_LAYER4, SAMPLE_LAYER2],
+        };
+        map = await createMapFromContext(context);
+        diff = {
+          layersAdded: [],
+          layersChanged: [],
+          layersRemoved: [],
+          layersReordered: [
+            {
+              layer: SAMPLE_LAYER4,
+              newPosition: 0,
+              previousPosition: 2,
+            },
+            {
+              layer: SAMPLE_LAYER1,
+              newPosition: 2,
+              previousPosition: 0,
+            },
+          ],
         };
         applyContextDiffToMap(map, diff);
         layersArray = map.getLayers().getArray();
@@ -276,7 +331,6 @@ describe("applyContextDiffToMap", () => {
             previousPosition: 1,
           },
         ],
-        viewChanges: {},
       };
       applyContextDiffToMap(map, diff);
       layersArray = map.getLayers().getArray();

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

@@ -1,6 +1,6 @@
 import Map from "ol/Map";
 import { MapContextDiff } from "@geospatial-sdk/core";
-import { createLayer } from "./create-map";
+import { createLayer, createView } from "./create-map";
 import { fromLonLat, transformExtent } from "ol/proj";
 import GeoJSON from "ol/format/GeoJSON";
 import SimpleGeometry from "ol/geom/SimpleGeometry";
@@ -66,11 +66,12 @@ export async function applyContextDiffToMap(
     });
   }
 
-  if ("viewChanges" in contextDiff) {
+  if (typeof contextDiff.viewChanges !== "undefined") {
     const { viewChanges } = contextDiff;
     const view = map.getView();
     const projection = view.getProjection();
-    if (!viewChanges) {
+    if (viewChanges === null) {
+      map.setView(createView(viewChanges, map));
       return map;
     }
     if ("geometry" in viewChanges) {

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

@@ -263,7 +263,9 @@ describe("MapContextService", () => {
         });
         it("set the url to point to the file", () => {
           const source = layer.getSource() as VectorSource;
-          expect(source.getUrl()).toBe(layerModel.url);
+          expect(source.getUrl()).toBe(
+            (layerModel as MapContextLayerGeojson).url,
+          );
         });
       });
     });
@@ -386,7 +388,7 @@ describe("MapContextService", () => {
       let view: View;
       const map = new Map({});
       const mapContext: MapContext = {
-        view: {},
+        view: null,
         layers: [
           MAP_CTX_LAYER_XYZ_FIXTURE,
           MAP_CTX_LAYER_WMS_FIXTURE,

package/lib/map/create-map.ts

@@ -20,8 +20,10 @@ import { fromLonLat } from "ol/proj";
 import { bbox as bboxStrategy } from "ol/loadingstrategy";
 import { defaultStyle } from "./styles";
 import VectorTileLayer from "ol/layer/VectorTile";
-import { OGCMapTile, OGCVectorTile, WMTS } from "ol/source";
-import { MVT } from "ol/format";
+import OGCMapTile from "ol/source/OGCMapTile";
+import OGCVectorTile from "ol/source/OGCVectorTile";
+import WMTS from "ol/source/WMTS";
+import MVT from "ol/format/MVT";
 import {
   OgcApiEndpoint,
   WfsEndpoint,
@@ -34,7 +36,6 @@ const WFS_MAX_FEATURES = 10000;
 
 export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
   const { type } = layerModel;
-  const style = defaultStyle;
   let layer: Layer | undefined;
   switch (type) {
     case "xyz":
@@ -91,7 +92,7 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
     }
     case "wfs": {
       const olLayer = new VectorLayer({
-        style,
+        style: layerModel.style ?? defaultStyle,
       });
       new WfsEndpoint(layerModel.url).isReady().then((endpoint) => {
         const featureType =
@@ -131,7 +132,7 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
             url: layerModel.url,
             attributions: layerModel.attributions,
           }),
-          style,
+          style: layerModel.style ?? defaultStyle,
         });
       } else {
         let geojson = layerModel.data;
@@ -152,7 +153,7 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
             features,
             attributions: layerModel.attributions,
           }),
-          style,
+          style: layerModel.style ?? defaultStyle,
         });
       }
       break;
@@ -196,7 +197,7 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
             url: layerUrl,
             attributions: layerModel.attributions,
           }),
-          style,
+          style: layerModel.style ?? defaultStyle,
         });
       }
       break;
@@ -218,7 +219,13 @@ export async function createLayer(layerModel: MapContextLayer): Promise<Layer> {
   return layer;
 }
 
-export function createView(viewModel: MapContextView, map: Map): View {
+export function createView(viewModel: MapContextView | null, map: Map): View {
+  if (viewModel === null) {
+    return new View({
+      center: [0, 0],
+      zoom: 0,
+    });
+  }
   const view = new View({
     ...("maxExtent" in viewModel && { extent: viewModel.maxExtent }),
     ...("maxZoom" in viewModel && { maxZoom: viewModel.maxZoom }),

package/lib/map/register-events.test.ts

@@ -191,7 +191,7 @@ describe("event registration", () => {
     });
     it("registers the event on the map", () => {
       expect(callback).toHaveBeenCalledWith({
-        coordinate: toLonLat([10, 10]),
+        coordinate: toLonLat([123, 123]),
         type: "map-click",
       });
     });

package/lib/map/register-events.ts

@@ -143,7 +143,7 @@ export function listen<T extends keyof MapEventsByType>(
     case MapClickEventType:
       map.on("click", (event) => {
         const coordinate = toLonLat(
-          event.pixel,
+          event.coordinate,
           map.getView().getProjection(),
         ) as [number, number];
         (callback as (event: unknown) => void)({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geospatial-sdk/openlayers",
-  "version": "0.0.5-dev.18+6f12b0b",
+  "version": "0.0.5-dev.20+87e3bcf",
   "description": "OpenLayers-related utilities",
   "keywords": [
     "ol",
@@ -37,9 +37,10 @@
     "ol": ">6.x"
   },
   "dependencies": {
-    "@geospatial-sdk/core": "^0.0.5-dev.18+6f12b0b",
+    "@geospatial-sdk/core": "^0.0.5-dev.20+87e3bcf",
     "chroma-js": "^2.4.2",
-    "lodash.throttle": "^4.1.1"
+    "lodash.throttle": "^4.1.1",
+    "ol-mapbox-style": "^12.3.5"
   },
-  "gitHead": "6f12b0b59e2794a24b27940c9c62dd279e2120e8"
+  "gitHead": "87e3bcfa08f4efbcd7ca4991d829bc165aa104db"
 }