Provide reactive properties in MapModel (#368, #374)

Co-authored-by: Michael Beckemeyer <m.beckemeyer@conterra.de>
Co-authored-by: Arne Vogt <a.vogt@52north.org>

.changeset/many-dingos-yell.md

@@ -0,0 +1,21 @@
+---
+"@open-pioneer/map": minor
+---
+
+The following hooks are deprecated and will be removed in a future release:
+
+-   `useView`
+-   `useProjection`
+-   `useResolution`
+-   `useCenter`
+-   `useScale`
+
+They can all be replaced by using the new reactive properties on the `MapModel`, for example:
+
+```javascript
+// old:
+const center = useCenter(olMap);
+
+// new:
+const center = useReactiveSnapshot(() => mapModel.center, [mapModel]);
+```

.changeset/plenty-turkeys-call.md

@@ -0,0 +1,10 @@
+---
+"@open-pioneer/coordinate-viewer": patch
+"@open-pioneer/spatial-bookmarks": patch
+"@open-pioneer/map-navigation": patch
+"@open-pioneer/scale-setter": patch
+"@open-pioneer/scale-viewer": patch
+"@open-pioneer/geolocation": patch
+---
+
+Refactor implementation to use the new reactive properties of the map model.

.changeset/tiny-brooms-hide.md

@@ -0,0 +1,17 @@
+---
+"@open-pioneer/map": minor
+---
+
+Provide new reactive properties on the `MapModel` type.
+
+-   `olView` (-> `olMap.getView()`)
+-   `projection` (-> `olMap.getView().getProjection()`)
+-   `resolution` (-> `olMap.getView().getResolution()`)
+-   `zoomLevel` (-> `olMap.getView().getZoom()`)
+-   `center` (-> `olMap.getView().getCenter()`)
+-   `scale` (derived from center and resolution)
+
+Most of the listed properties are already available on raw OpenLayers objects (see code in parentheses above).
+However, those OpenLayers properties require manual work for synchronization, whereas the new properties are reactive (and can be watched, for example, using `useReactiveSnapshot()`).
+
+A new method `setScale()` has also been added to the model.

src/packages/coordinate-viewer/CoordinateViewer.tsx

@@ -1,8 +1,9 @@
 // SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
 // SPDX-License-Identifier: Apache-2.0
 import { Box, Text } from "@open-pioneer/chakra-integration";
-import { MapModelProps, useMapModel, useProjection } from "@open-pioneer/map";
+import { MapModelProps, useMapModel } from "@open-pioneer/map";
 import { CommonComponentProps, useCommonComponentProps } from "@open-pioneer/react-utils";
+import { useReactiveSnapshot } from "@open-pioneer/reactivity";
 import { PackageIntl } from "@open-pioneer/runtime";
 import OlMap from "ol/Map";
 import { unByKey } from "ol/Observable";
@@ -47,7 +48,9 @@ export const CoordinateViewer: FC<CoordinateViewerProps> = (props) => {
     const { containerProps } = useCommonComponentProps("coordinate-viewer", props);
     const { map } = useMapModel(props);
     const olMap = map?.olMap;
-    const mapProjectionCode = useProjection(olMap)?.getCode() ?? "";
+    const mapProjectionCode = useReactiveSnapshot(() => {
+        return map?.projection.getCode() ?? "";
+    }, [map]);
     let { coordinates } = useCoordinates(olMap);
     coordinates =
         coordinates && displayProjectionCode

src/packages/coordinate-viewer/package.json

@@ -21,6 +21,7 @@
         "@open-pioneer/map": "workspace:^",
         "@open-pioneer/react-utils": "catalog:",
         "@open-pioneer/runtime": "catalog:",
+        "@open-pioneer/reactivity": "catalog:",
         "ol": "catalog:",
         "react": "catalog:"
     },

src/packages/geolocation/Geolocation.tsx

@@ -142,11 +142,7 @@ function useController(
             });
         };
 
-        const geolocationController = new GeolocationController(
-            map.olMap,
-            onError,
-            trackingOptions
-        );
+        const geolocationController = new GeolocationController(map, onError, trackingOptions);
         setController(geolocationController);
 
         return () => {

src/packages/geolocation/GeolocationController.test.ts

@@ -25,7 +25,7 @@ afterEach(() => {
 it("should successfully return a geolocation position", async () => {
     mockSuccessGeolocation([51.1, 45.3]);
 
-    const { controller } = setup();
+    const { controller } = await setup();
     controller.startGeolocation();
 
     await vi.waitFor(() => {
@@ -44,21 +44,21 @@ it("should successfully return a geolocation position", async () => {
 
 describe("Default Properties", () => {
     it("uses the default style for the position feature", async () => {
-        const { controller } = setup();
+        const { controller } = await setup();
         const positionFeature: Feature<Geometry> | undefined = controller.getPositionFeature();
 
         expect(positionFeature?.getStyle()).toMatchObject(getDefaultPositionStyle());
     });
 
     it("uses the default style for the accuracy feature", async () => {
-        const { controller } = setup();
+        const { controller } = await setup();
         const accuracyFeature: Feature<Geometry> | undefined = controller.getAccuracyFeature();
 
         expect(accuracyFeature?.getStyle()).toMatchObject(getDefaultAccuracyStyle());
     });
 
     it("uses the default tracking options", async () => {
-        const { controller } = setup();
+        const { controller } = await setup();
         const trackingOptions: PositionOptions = controller.getTrackingOptions();
 
         expect(trackingOptions?.enableHighAccuracy).toBe(
@@ -71,7 +71,7 @@ describe("Default Properties", () => {
     });
 
     it("uses the default max zoom level", async () => {
-        const { controller } = setup();
+        const { controller } = await setup();
         const maxZoom: number | undefined = controller.getMaxZoom();
 
         expect(maxZoom).toBe(17);
@@ -80,21 +80,21 @@ describe("Default Properties", () => {
 
 describe("Tests with custom Properties", () => {
     it("uses the configured style for the position feature", async () => {
-        const { controller } = setupWithCustomProperties();
+        const { controller } = await setupWithCustomProperties();
         const positionFeature: Feature<Geometry> | undefined = controller.getPositionFeature();
 
         expect(positionFeature?.getStyle()).toMatchObject(getCustomPositionStyle());
     });
 
     it("uses the configured style for the accuracy feature", async () => {
-        const { controller } = setupWithCustomProperties();
+        const { controller } = await setupWithCustomProperties();
         const accuracyFeature: Feature<Geometry> | undefined = controller.getAccuracyFeature();
 
         expect(accuracyFeature?.getStyle()).toMatchObject(getCustomAccuracyStyle());
     });
 
     it("uses the configured tracking options", async () => {
-        const { controller } = setupWithCustomProperties();
+        const { controller } = await setupWithCustomProperties();
         const trackingOptions: PositionOptions = controller.getTrackingOptions();
 
         expect(trackingOptions?.enableHighAccuracy).toBe(true);
@@ -103,7 +103,7 @@ describe("Tests with custom Properties", () => {
     });
 
     it("uses the configured max zoom level", async () => {
-        const { controller } = setupWithCustomProperties();
+        const { controller } = await setupWithCustomProperties();
         const maxZoom: number | undefined = controller.getMaxZoom();
 
         expect(maxZoom).toBe(getCustomMaxZoom());

src/packages/geolocation/GeolocationController.ts

@@ -2,10 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 import { reactive } from "@conterra/reactivity-core";
 import { createLogger } from "@open-pioneer/core";
-import { TOPMOST_LAYER_Z, calculateBufferedExtent } from "@open-pioneer/map";
+import { TOPMOST_LAYER_Z, calculateBufferedExtent, MapModel } from "@open-pioneer/map";
 import Feature from "ol/Feature";
 import olGeolocation, { GeolocationError } from "ol/Geolocation";
-import OlMap from "ol/Map";
 import { unByKey } from "ol/Observable";
 import { Coordinate } from "ol/coordinate";
 import type { EventsKey } from "ol/events";
@@ -28,7 +27,7 @@ export class GeolocationController {
     /** True if location tracking is supported by the browser. */
     public readonly supported = !!navigator.geolocation;
 
-    private readonly olMap: OlMap;
+    private readonly map: MapModel;
     private readonly positionHighlightLayer: VectorLayer<VectorSource, Feature>;
     private readonly geolocation: olGeolocation;
     private readonly onError: OnErrorCallback;
@@ -44,8 +43,8 @@ export class GeolocationController {
     #loading = reactive(false);
     #active = reactive(false);
 
-    constructor(olMap: OlMap, onError: OnErrorCallback, trackingOptions?: PositionOptions) {
-        this.olMap = olMap;
+    constructor(map: MapModel, onError: OnErrorCallback, trackingOptions?: PositionOptions) {
+        this.map = map;
         this.onError = onError;
         this.isInitialZoom = true;
 
@@ -68,7 +67,7 @@ export class GeolocationController {
         this.geolocation = new olGeolocation({
             tracking: false,
             trackingOptions: geolocationTrackingOptions,
-            projection: olMap.getView()?.getProjection()
+            projection: map.olView?.getProjection()
         });
 
         this.trackingOptions = geolocationTrackingOptions;
@@ -89,12 +88,11 @@ export class GeolocationController {
             return;
         }
 
-        const olMap = this.olMap;
         const geolocationPromise = new Promise<void>((resolve) => {
             this.#active.value = true;
             this.#loading.value = true;
 
-            this.geolocation?.setProjection(olMap.getView()?.getProjection());
+            this.geolocation?.setProjection(this.map.olView?.getProjection());
             this.geolocation?.setTracking(true);
 
             const accuracyChangeHandler: EventsKey = this.geolocation.on(
@@ -115,7 +113,7 @@ export class GeolocationController {
                             if (!bufferedExtent) {
                                 return;
                             }
-                            olMap.getView().fit(bufferedExtent, {
+                            this.map.olView.fit(bufferedExtent, {
                                 maxZoom: this.maxZoom
                             });
                             this.isInitialZoom = false;
@@ -129,7 +127,7 @@ export class GeolocationController {
                 if (coordinates && (coordinates[0] || coordinates[1]) !== undefined) {
                     this.positionFeature?.setGeometry(new Point(coordinates));
                     if (this.setMapToPosition) {
-                        olMap.getView().setCenter(coordinates);
+                        this.map.olView.setCenter(coordinates);
                     }
                     if (this.positionFeature?.getGeometry() !== undefined) {
                         resolve();
@@ -138,16 +136,17 @@ export class GeolocationController {
             });
 
             // zoom changes
-            const resolutionChangeHandler: EventsKey = olMap
-                .getView()
-                .on("change:resolution", () => {
+            const resolutionChangeHandler: EventsKey = this.map.olView.on(
+                "change:resolution",
+                () => {
                     this.setMapToPosition = this.isInitialZoom;
-                });
+                }
+            );
 
             // pointermove is triggered when a pointer is moved.
             // Note that on touch devices this is triggered when the map is panned,
             // so is not the same as mousemove.
-            const draggingHandler: EventsKey = olMap.on("pointermove", (evt) => {
+            const draggingHandler: EventsKey = this.map.olMap.on("pointermove", (evt) => {
                 if (evt.dragging) {
                     this.setMapToPosition = false;
                 }
@@ -160,7 +159,7 @@ export class GeolocationController {
                 draggingHandler
             );
 
-            olMap.addLayer(this.positionHighlightLayer);
+            this.map.olMap.addLayer(this.positionHighlightLayer);
         });
 
         geolocationPromise
@@ -187,7 +186,7 @@ export class GeolocationController {
         this.changeHandlers = [];
         this.accuracyFeature?.setGeometry(undefined);
         this.positionFeature?.setGeometry(undefined);
-        this.olMap.removeLayer(this.positionHighlightLayer);
+        this.map.olMap.removeLayer(this.positionHighlightLayer);
     }
 
     /** True if the position is being tracked. */

src/packages/geolocation/test-utils.ts

@@ -1,9 +1,9 @@
 // SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
 // SPDX-License-Identifier: Apache-2.0
-import OlMap from "ol/Map";
 import { Circle, Fill, Stroke, Style } from "ol/style";
 import { vi } from "vitest";
 import { GeolocationController } from "./GeolocationController";
+import { setupMap } from "@open-pioneer/map-test-utils";
 
 export function mockSuccessGeolocation(coords: number[]) {
     vi.spyOn(navigator, "geolocation", "get").mockReturnValue({
@@ -49,25 +49,28 @@ export function mockErrorGeolocation() {
     } satisfies Partial<Geolocation>);
 }
 
-export function setup() {
-    const olMap = new OlMap();
+export async function setup() {
+    const { mapId, registry } = await setupMap();
+    const map = await registry.expectMapModel(mapId);
+
     return {
-        olMap,
-        controller: new GeolocationController(olMap, (error) => {
+        map,
+        controller: new GeolocationController(map, (error) => {
             console.error("Unexpected error", error);
         })
     };
 }
 
-export function setupWithCustomProperties() {
-    const olMap = new OlMap();
+export async function setupWithCustomProperties() {
+    const { mapId, registry } = await setupMap();
+    const map = await registry.expectMapModel(mapId);
     const maxZoom: number = getCustomMaxZoom();
     const positionFeatureStyle: Style = getCustomPositionStyle();
     const accuracyFeatureStyle: Style = getCustomAccuracyStyle();
     const trackingOptions: PositionOptions = getCustomTrackingOptions();
 
     const controller = new GeolocationController(
-        olMap,
+        map,
         (error) => {
             console.error("Unexpected error", error);
         },
@@ -77,7 +80,7 @@ export function setupWithCustomProperties() {
     controller.setPositionFeatureStyle(positionFeatureStyle);
     controller.setAccuracyFeatureStyle(accuracyFeatureStyle);
     return {
-        olMap,
+        map,
         controller
     };
 }

src/packages/map-navigation/InitialExtent.tsx

@@ -26,17 +26,15 @@ export const InitialExtent: FC<InitialExtentProps> = forwardRef(function Initial
 
     function setInitExtent() {
         const initialExtent = map?.initialExtent;
-        const olMap = map?.olMap;
-
-        if (initialExtent && olMap) {
+        if (initialExtent) {
             const newExtent: Extent = [
                 initialExtent.xMin,
                 initialExtent.yMin,
                 initialExtent.xMax,
                 initialExtent.yMax
             ];
 
-            olMap.getView().fit(newExtent, { duration: 200 });
+            map.olView.fit(newExtent, { duration: 200 });
         }
     }