Deprecate mapId (#397, #404)

--------- Co-authored-by: Antonia van Eek <a.vaneek@conterra.de>
open-pioneer · Feb 24, 2025 · 193068a · 193068a
1 parent ad4ee5a
commit 193068a
Show file tree

Hide file tree

Showing 67 changed files with 1,409 additions and 1,209 deletions.
diff --git a/.changeset/ninety-houses-shake.md b/.changeset/ninety-houses-shake.md
@@ -0,0 +1,35 @@
+---
+"@open-pioneer/map": minor
+"@open-pioneer/basemap-switcher": minor
+"@open-pioneer/coordinate-search": minor
+"@open-pioneer/coordinate-viewer": minor
+"@open-pioneer/geolocation": minor
+"@open-pioneer/legend": minor
+"@open-pioneer/map-navigation": minor
+"@open-pioneer/measurement": minor
+"@open-pioneer/overview-map": minor
+"@open-pioneer/printing": minor
+"@open-pioneer/result-list": minor
+"@open-pioneer/scale-bar": minor
+"@open-pioneer/scale-setter": minor
+"@open-pioneer/scale-viewer": minor
+"@open-pioneer/search": minor
+"@open-pioneer/selection": minor
+"@open-pioneer/spatial-bookmarks": minor
+"@open-pioneer/toc": minor
+---
+
+Deprecate the `mapId` property on React components.
+Use the `MapModel` directly instead to pass a reference to the map.
+
+Example:
+
+```tsx
+// Default map for entire component tree
+<DefaultMapProvider map={mapModel}>
+    <Toc />
+</DefaultMapProvider>
+
+// Map for specific component
+<Toc map={mapModel} />
+```
diff --git a/.changeset/thick-mayflies-drive.md b/.changeset/thick-mayflies-drive.md
@@ -0,0 +1,6 @@
+---
+"@open-pioneer/editing": minor
+---
+
+Deprecate the method signatures taking `mapId` on the `EditingService`.
+Use an instance of `MapModel` as a parameter instead.
diff --git a/docs/concepts/UI.md b/docs/concepts/UI.md
@@ -28,7 +28,7 @@ Those css classes will be appended to the default class name when the component
 Add class name `my-class` to the component:
 
 ```tsx
-<ScaleViewer mapId={MAP_ID} className="my-class" />
+<ScaleViewer map={map} className="my-class" />
 ```
 
 Renders as (for example):
@@ -55,7 +55,7 @@ zoomButton.current!.focus()
 
 return (
     {/* ... */}
-    <ZoomIn mapId={MAP_ID} ref={zoomButton} />
+    <ZoomIn map={map} ref={zoomButton} />
     {/* ... */}
 );
 ```

diff --git a/docs/templates/package-README.md b/docs/templates/package-README.md
@@ -27,7 +27,9 @@ To add the component/button/... in your app, `[...]`.
 > To add the button to your app, insert the following snippet with a reference to a map ID:
 >
 > ```jsx
-> <InitialExtent mapId="map_id" />
+> <InitialExtent
+>     map={map}
+> /> /* instead of passing the map, the `DefaultMapProvider` can alternatively be used */
 > ```
 
 To `[...]`, add the optional property `[...]`:

diff --git a/src/packages/basemap-switcher/BasemapSwitcher.test.tsx b/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
@@ -30,13 +30,12 @@ const defaultBasemapConfig = [
 ];
 
 it("should successfully create a basemap switcher component", async () => {
-    const { mapId, registry } = await setupMap();
-    await registry.expectMapModel(mapId); // wait for model load
+    const { registry, map } = await setupMap();
 
     const injectedServices = createServiceOptions({ registry });
     render(
         <PackageContextProvider services={injectedServices}>
-            <BasemapSwitcher mapId={mapId} allowSelectingEmptyBasemap data-testid="switcher" />
+            <BasemapSwitcher map={map} allowSelectingEmptyBasemap data-testid="switcher" />
         </PackageContextProvider>
     );
 
@@ -52,15 +51,14 @@ it("should successfully create a basemap switcher component", async () => {
 });
 
 it("should successfully create a basemap switcher component with additional css classes and box properties", async () => {
-    const { mapId, registry } = await setupMap({
+    const { registry, map } = await setupMap({
         layers: defaultBasemapConfig
     });
-    await registry.expectMapModel(mapId); // wait for model load
 
     const injectedServices = createServiceOptions({ registry });
     render(
         <PackageContextProvider services={injectedServices}>
-            <BasemapSwitcher mapId={mapId} className="test" data-testid="switcher" />
+            <BasemapSwitcher map={map} className="test" data-testid="switcher" />
         </PackageContextProvider>
     );
 
@@ -71,15 +69,14 @@ it("should successfully create a basemap switcher component with additional css
 
 it("should successfully select a basemap from basemap switcher", async () => {
     const user = userEvent.setup();
-    const { mapId, registry } = await setupMap({
+    const { registry, map } = await setupMap({
         layers: defaultBasemapConfig
     });
-    const map = await registry.expectMapModel(mapId);
 
     const injectedServices = createServiceOptions({ registry });
     render(
         <PackageContextProvider services={injectedServices}>
-            <BasemapSwitcher mapId={mapId} data-testid="switcher" />
+            <BasemapSwitcher map={map} data-testid="switcher" />
         </PackageContextProvider>
     );
 
@@ -111,15 +108,14 @@ it("should successfully select a basemap from basemap switcher", async () => {
 
 it("should allow selecting 'no basemap' when enabled", async () => {
     const user = userEvent.setup();
-    const { mapId, registry } = await setupMap({
+    const { registry, map } = await setupMap({
         layers: defaultBasemapConfig
     });
 
-    const map = await registry.expectMapModel(mapId);
     const injectedServices = createServiceOptions({ registry });
     render(
         <PackageContextProvider services={injectedServices}>
-            <BasemapSwitcher mapId={mapId} allowSelectingEmptyBasemap data-testid="switcher" />
+            <BasemapSwitcher map={map} allowSelectingEmptyBasemap data-testid="switcher" />
         </PackageContextProvider>
     );
 
@@ -142,15 +138,14 @@ it("should allow selecting 'no basemap' when enabled", async () => {
 });
 
 it("should not allow selecting 'no basemap' by default", async () => {
-    const { mapId, registry } = await setupMap({
+    const { registry, map } = await setupMap({
         layers: defaultBasemapConfig
     });
 
-    const map = await registry.expectMapModel(mapId);
     const injectedServices = createServiceOptions({ registry });
     render(
         <PackageContextProvider services={injectedServices}>
-            <BasemapSwitcher mapId={mapId} data-testid="switcher" />
+            <BasemapSwitcher map={map} data-testid="switcher" />
         </PackageContextProvider>
     );
 
@@ -169,15 +164,14 @@ it("should not allow selecting 'no basemap' by default", async () => {
 });
 
 it("should update when a new basemap is registered", async () => {
-    const { mapId, registry } = await setupMap({
+    const { registry, map } = await setupMap({
         layers: defaultBasemapConfig
     });
 
-    const map = await registry.expectMapModel(mapId);
     const injectedServices = createServiceOptions({ registry });
     render(
         <PackageContextProvider services={injectedServices}>
-            <BasemapSwitcher mapId={mapId} data-testid="switcher" />
+            <BasemapSwitcher map={map} data-testid="switcher" />
         </PackageContextProvider>
     );
 
@@ -212,15 +206,14 @@ it("should update when a new basemap is registered", async () => {
 });
 
 it("should update when a different basemap is activated from somewhere else", async () => {
-    const { mapId, registry } = await setupMap({
+    const { registry, map } = await setupMap({
         layers: defaultBasemapConfig
     });
 
-    const map = await registry.expectMapModel(mapId);
     const injectedServices = createServiceOptions({ registry });
     render(
         <PackageContextProvider services={injectedServices}>
-            <BasemapSwitcher mapId={mapId} data-testid="switcher" />
+            <BasemapSwitcher map={map} data-testid="switcher" />
         </PackageContextProvider>
     );
 
@@ -238,15 +231,14 @@ it("should update when a different basemap is activated from somewhere else", as
 
 describe("should successfully select the correct basemap from basemap switcher", () => {
     it("basemap with id `osm` (first in layers array) is visible", async () => {
-        const { mapId, registry } = await setupMap({
+        const { registry, map } = await setupMap({
             layers: defaultBasemapConfig
         });
 
-        const map = await registry.expectMapModel(mapId);
         const injectedServices = createServiceOptions({ registry });
         render(
             <PackageContextProvider services={injectedServices}>
-                <BasemapSwitcher mapId={mapId} data-testid="switcher" />
+                <BasemapSwitcher map={map} data-testid="switcher" />
             </PackageContextProvider>
         );
 
@@ -260,7 +252,7 @@ describe("should successfully select the correct basemap from basemap switcher",
     });
 
     it("basemap with id `topplus-open` (second in layers array) is visible", async () => {
-        const { mapId, registry } = await setupMap({
+        const { registry, map } = await setupMap({
             layers: [
                 {
                     id: "osm",
@@ -281,11 +273,10 @@ describe("should successfully select the correct basemap from basemap switcher",
             ]
         });
 
-        const map = await registry.expectMapModel(mapId);
         const injectedServices = createServiceOptions({ registry });
         render(
             <PackageContextProvider services={injectedServices}>
-                <BasemapSwitcher mapId={mapId} data-testid="switcher" />
+                <BasemapSwitcher map={map} data-testid="switcher" />
             </PackageContextProvider>
         );
 
@@ -306,7 +297,7 @@ it("should disable selection of unavailable layers and show a warning", async ()
         osmSource.setState("error");
     });
 
-    const { mapId, registry } = await setupMap({
+    const { registry, map } = await setupMap({
         layers: [
             {
                 id: "osm",
@@ -330,7 +321,7 @@ it("should disable selection of unavailable layers and show a warning", async ()
     const injectedServices = createServiceOptions({ registry });
     render(
         <PackageContextProvider services={injectedServices}>
-            <BasemapSwitcher mapId={mapId} data-testid="switcher" />
+            <BasemapSwitcher map={map} data-testid="switcher" />
         </PackageContextProvider>
     );
 
@@ -342,15 +333,14 @@ it("should disable selection of unavailable layers and show a warning", async ()
 });
 
 it("should update the ui when a layer title changes", async () => {
-    const { mapId, registry } = await setupMap({
+    const { registry, map } = await setupMap({
         layers: defaultBasemapConfig
     });
-    const map = await registry.expectMapModel(mapId);
 
     const injectedServices = createServiceOptions({ registry });
     render(
         <PackageContextProvider services={injectedServices}>
-            <BasemapSwitcher mapId={mapId} data-testid="switcher" />
+            <BasemapSwitcher map={map} data-testid="switcher" />
         </PackageContextProvider>
     );
 

diff --git a/src/packages/basemap-switcher/README.md b/src/packages/basemap-switcher/README.md
@@ -6,16 +6,18 @@ Unavailable basemaps are marked with an icon and will be deactivated for selecti
 
 ## Usage
 
-To add the component to your app, insert the following snippet with a reference to a map ID:
+To add the component to your app, insert the following snippet:
 
 ```jsx
-<BasemapSwitcher mapId="map_id" />
+<BasemapSwitcher
+    map={map}
+/> /* instead of passing the map, the `DefaultMapProvider` can alternatively be used */
 ```
 
 To provide an option to deactivate all basemap layers, add the optional property `allowSelectingEmptyBasemap` (default: `false`).
 
 ```jsx
-<BasemapSwitcher mapId="map_id" allowSelectingEmptyBasemap />
+<BasemapSwitcher map={map} allowSelectingEmptyBasemap />
 ```
 
 ## Accessibility
@@ -35,7 +37,7 @@ Example:
     <FormLabel ps={1}>
         <Text as="b">{intl.formatMessage({ id: "basemapLabel" })}</Text>
     </FormLabel>
-    <BasemapSwitcher mapId="map_id" allowSelectingEmptyBasemap></BasemapSwitcher>
+    <BasemapSwitcher map={map} allowSelectingEmptyBasemap></BasemapSwitcher>
 </FormControl>
 ```