@open-pioneer/map 0.9.0 → 0.10.0-dev.20250324141112
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/README.md +31 -6
- package/package.json +1 -1
- package/ui/DefaultMapProvider.d.ts +0 -14
- package/ui/DefaultMapProvider.js.map +1 -1
- package/ui/useMapModel.d.ts +5 -2
- package/ui/useMapModel.js.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @open-pioneer/map
|
|
2
2
|
|
|
3
|
+
## 0.10.0-dev.20250324141112
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 193068a: Deprecate the `mapId` property on React components.
|
|
8
|
+
Use the `MapModel` directly instead to pass a reference to the map.
|
|
9
|
+
|
|
10
|
+
Example:
|
|
11
|
+
|
|
12
|
+
```tsx
|
|
13
|
+
// Default map for entire component tree
|
|
14
|
+
<DefaultMapProvider map={mapModel}>
|
|
15
|
+
<Toc />
|
|
16
|
+
</DefaultMapProvider>
|
|
17
|
+
|
|
18
|
+
// Map for specific component
|
|
19
|
+
<Toc map={mapModel} />
|
|
20
|
+
```
|
|
21
|
+
|
|
3
22
|
## 0.9.0
|
|
4
23
|
|
|
5
24
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -15,12 +15,13 @@ To access or manipulate the content of the map programmatically, see [Using the
|
|
|
15
15
|
### Map container component
|
|
16
16
|
|
|
17
17
|
To integrate a `MapContainer` in an app, add the component to your React component, where you want the map to appear.
|
|
18
|
-
|
|
18
|
+
A `MapContainer` requires a `map` reference to be specified to know which map to display.
|
|
19
|
+
The `map` reference can be specified directly on the component (prop `mapId`) or by using the `DefaultMapProvider` (see [Using the `DefaultMapProvider`](#using-the-defaultmapprovider)).
|
|
19
20
|
|
|
20
21
|
Make sure that the parent component has an appropriate width and height (for example `100%`).
|
|
21
22
|
The `MapContainer` fills the entire available space.
|
|
22
23
|
|
|
23
|
-
Example: Integration of a map container with a given map
|
|
24
|
+
Example: Integration of a map container with a given map (for an example with `DefaultMapProvider` see [Using the `DefaultMapProvider`](#using-the-defaultmapprovider):
|
|
24
25
|
|
|
25
26
|
```jsx
|
|
26
27
|
import { Box } from "@open-pioneer/chakra-integration";
|
|
@@ -30,7 +31,7 @@ import { MapContainer } from "@open-pioneer/map";
|
|
|
30
31
|
function AppUI() {
|
|
31
32
|
return (
|
|
32
33
|
<Box height="100%" overflow="hidden">
|
|
33
|
-
<MapContainer
|
|
34
|
+
<MapContainer map="..." />
|
|
34
35
|
</Box>
|
|
35
36
|
);
|
|
36
37
|
}
|
|
@@ -38,7 +39,7 @@ function AppUI() {
|
|
|
38
39
|
|
|
39
40
|
> NOTE: There must be a `map.MapConfigProvider` that knows how to construct the map with the given ID (see [Map configuration](#map-configuration)).
|
|
40
41
|
|
|
41
|
-
The component itself uses the map registry service to create the map using the provided `
|
|
42
|
+
The component itself uses the map registry service to create the map using the provided `map`.
|
|
42
43
|
|
|
43
44
|
#### Changing the map view's padding
|
|
44
45
|
|
|
@@ -63,7 +64,7 @@ To pass custom React components onto the map, the following anchor-points are pr
|
|
|
63
64
|
Example: Integration of a map anchor component into the map container with position `bottom-right` and optional horizontal and vertical gap:
|
|
64
65
|
|
|
65
66
|
```jsx
|
|
66
|
-
<MapContainer
|
|
67
|
+
<MapContainer map={map}>
|
|
67
68
|
<MapAnchor position="bottom-right" horizontalGap={25} verticalGap={25}>
|
|
68
69
|
... {/** add map anchor content like other React components */}
|
|
69
70
|
</MapAnchor>
|
|
@@ -86,6 +87,30 @@ This behavior can be disabled by setting the `stopEvents` property to `false`:
|
|
|
86
87
|
</MapAnchor>
|
|
87
88
|
```
|
|
88
89
|
|
|
90
|
+
### Using the DefaultMapProvider
|
|
91
|
+
|
|
92
|
+
You can use the `DefaultMapProvider` to globally specify the `map` in your application's UI.
|
|
93
|
+
The `map` is passed to all subcomponents, including the `MapContainer`.
|
|
94
|
+
Thus, it is not necessary to provide the `map` on each component separately.
|
|
95
|
+
|
|
96
|
+
Example:
|
|
97
|
+
|
|
98
|
+
```tsx
|
|
99
|
+
import { DefaultMapProvider } from "@open-pioneer/map";
|
|
100
|
+
|
|
101
|
+
<DefaultMapProvider map={map}>
|
|
102
|
+
{/* no need to repeat the map in this subtree, unless you want to use a different one */}
|
|
103
|
+
<MapContainer />
|
|
104
|
+
<Toc />
|
|
105
|
+
<ComplexChild />
|
|
106
|
+
</DefaultMapProvider>;
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
If an app only contains a single map, the map provider can surround the whole application's UI.
|
|
110
|
+
If multiple maps are used, the provider can be placed around the respective map components that should interact with the corresponding app.
|
|
111
|
+
|
|
112
|
+
It is possible to override the `map` on each component if some components in the tree should use a different map.
|
|
113
|
+
|
|
89
114
|
### Map configuration
|
|
90
115
|
|
|
91
116
|
Register a service providing `map.MapConfigProvider` to configure the contents of a map.
|
|
@@ -701,7 +726,7 @@ The most important API items are as follows:
|
|
|
701
726
|
- The `MapRegistry` service (inject via `"map.MapRegistry"`).
|
|
702
727
|
This service is used to obtain a reference to the `MapModel` via `registry.getMapModel(mapId)`.
|
|
703
728
|
|
|
704
|
-
> NOTE: From inside a React component you can also use the hook `useMapModel(mapId)
|
|
729
|
+
> NOTE: From inside a React component you can also use the hook `useMapModel(mapId)` (or `useMapModel()` if using the DefaultMapProvider).
|
|
705
730
|
|
|
706
731
|
- The `MapModel` represents a map in an application.
|
|
707
732
|
Through the `MapModel` one can obtain the map's base layers, operational layers and so on.
|
package/package.json
CHANGED
|
@@ -3,20 +3,6 @@ import { MapModelProps } from "./useMapModel";
|
|
|
3
3
|
* Configures the given map as the default map for all child components.
|
|
4
4
|
* Child components do not need to specify the map explicitly, unless they wish to use a different one.
|
|
5
5
|
*
|
|
6
|
-
* The map can be specified either by its id (`mapId`) or by a direct reference to the map model (`map`).
|
|
7
|
-
* Specifying both `mapId` and `map` at the same time will result in an error.
|
|
8
|
-
*
|
|
9
|
-
* @example
|
|
10
|
-
*
|
|
11
|
-
* Using map id:
|
|
12
|
-
*
|
|
13
|
-
* ```tsx
|
|
14
|
-
* <DefaultMapProvider mapId="my-map">
|
|
15
|
-
* <MapContainer />
|
|
16
|
-
* <Toc />
|
|
17
|
-
* </DefaultMapProvider>
|
|
18
|
-
* ```
|
|
19
|
-
*
|
|
20
6
|
* @example
|
|
21
7
|
*
|
|
22
8
|
* Using map model reference:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultMapProvider.js","sources":["DefaultMapProvider.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { createContext, useContext, useMemo } from \"react\";\nimport { MapModelProps } from \"./useMapModel\";\n\nconst DefaultMapContext = createContext<MapModelProps | undefined>(undefined);\nDefaultMapContext.displayName = \"DefaultMapContext\";\n\n/**\n * Configures the given map as the default map for all child components.\n * Child components do not need to specify the map explicitly, unless they wish to use a different one.\n *\n *
|
|
1
|
+
{"version":3,"file":"DefaultMapProvider.js","sources":["DefaultMapProvider.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { createContext, useContext, useMemo } from \"react\";\nimport { MapModelProps } from \"./useMapModel\";\n\nconst DefaultMapContext = createContext<MapModelProps | undefined>(undefined);\nDefaultMapContext.displayName = \"DefaultMapContext\";\n\n/**\n * Configures the given map as the default map for all child components.\n * Child components do not need to specify the map explicitly, unless they wish to use a different one.\n *\n * @example\n *\n * Using map model reference:\n *\n * ```tsx\n * <DefaultMapProvider map={myMapModel}>\n * <MapContainer />\n * <Toc />\n * </DefaultMapProvider>\n * ```\n */\nexport function DefaultMapProvider(props: MapModelProps & { children?: React.ReactNode }) {\n const { mapId, map, children } = props;\n const value = useMemo((): MapModelProps => ({ mapId, map }), [mapId, map]);\n if (mapId != null && map != null) {\n throw new Error(\n `Cannot specify both 'mapId' and 'map' in DefaultMapProvider at the same time.`\n );\n }\n if (mapId == null && map == null) {\n throw new Error(`Either 'mapId' or 'map' must be specified in DefaultMapProvider.`);\n }\n return <DefaultMapContext.Provider value={value}>{children}</DefaultMapContext.Provider>;\n}\n\n/**\n * Accesses the default map props provided by {@link DefaultMapProvider} (or returns undefined).\n *\n * @internal\n */\nexport function useDefaultMapProps(): MapModelProps | undefined {\n return useContext(DefaultMapContext);\n}\n"],"names":[],"mappings":";;;AAKA,MAAM,iBAAA,GAAoB,cAAyC,MAAS,CAAA;AAC5E,iBAAA,CAAkB,WAAc,GAAA,mBAAA;AAiBzB,SAAS,mBAAmB,KAAuD,EAAA;AACtF,EAAA,MAAM,EAAE,KAAA,EAAO,GAAK,EAAA,QAAA,EAAa,GAAA,KAAA;AACjC,EAAM,MAAA,KAAA,GAAQ,OAAQ,CAAA,OAAsB,EAAE,KAAA,EAAO,KAAQ,CAAA,EAAA,CAAC,KAAO,EAAA,GAAG,CAAC,CAAA;AACzE,EAAI,IAAA,KAAA,IAAS,IAAQ,IAAA,GAAA,IAAO,IAAM,EAAA;AAC9B,IAAA,MAAM,IAAI,KAAA;AAAA,MACN,CAAA,6EAAA;AAAA,KACJ;AAAA;AAEJ,EAAI,IAAA,KAAA,IAAS,IAAQ,IAAA,GAAA,IAAO,IAAM,EAAA;AAC9B,IAAM,MAAA,IAAI,MAAM,CAAkE,gEAAA,CAAA,CAAA;AAAA;AAEtF,EAAA,uBAAQ,GAAA,CAAA,iBAAA,CAAkB,QAAlB,EAAA,EAA2B,OAAe,QAAS,EAAA,CAAA;AAC/D;AAOO,SAAS,kBAAgD,GAAA;AAC5D,EAAA,OAAO,WAAW,iBAAiB,CAAA;AACvC;;;;"}
|
package/ui/useMapModel.d.ts
CHANGED
|
@@ -26,11 +26,14 @@ export interface MapModelProps {
|
|
|
26
26
|
/**
|
|
27
27
|
* The id of the map.
|
|
28
28
|
* The map will be looked up in the MapRegistry service.
|
|
29
|
+
*
|
|
30
|
+
* @deprecated Use the `map` property instead.
|
|
31
|
+
*
|
|
32
|
+
* @see {@link DefaultMapProvider}
|
|
29
33
|
*/
|
|
30
34
|
mapId?: string | undefined;
|
|
31
35
|
/**
|
|
32
|
-
* The
|
|
33
|
-
* This property can be used as an alternative to the {@link mapId}.
|
|
36
|
+
* The map model to use.
|
|
34
37
|
*/
|
|
35
38
|
map?: MapModel | undefined;
|
|
36
39
|
}
|
package/ui/useMapModel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMapModel.js","sources":["useMapModel.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { useService } from \"open-pioneer:react-hooks\";\nimport { useMemo } from \"react\";\nimport { useAsync } from \"react-use\";\nimport { MapModel, MapRegistry } from \"../api\";\nimport { MapModelImpl } from \"../model/MapModelImpl\";\n// eslint-disable-next-line unused-imports/no-unused-imports\nimport { DefaultMapProvider, useDefaultMapProps } from \"./DefaultMapProvider\";\n\n/** Return value of {@link useMapModel}. */\nexport type UseMapModelResult = UseMapModelLoading | UseMapModelResolved | UseMapModelRejected;\n\nexport interface UseMapModelLoading {\n kind: \"loading\";\n map?: undefined;\n error?: undefined;\n}\n\nexport interface UseMapModelResolved {\n kind: \"resolved\";\n map: MapModel;\n error?: undefined;\n}\n\nexport interface UseMapModelRejected {\n kind: \"rejected\";\n map?: undefined;\n error: Error;\n}\n\n/**\n * Options that specify which map to use. See {@link useMapModel}.\n *\n * When not setting any of these properties on a component, the default map (from the `DefaultMapProvider`) will be used.\n * If that is not available either, an error will be thrown.\n */\nexport interface MapModelProps {\n /**\n * The id of the map.\n * The map will be looked up in the MapRegistry service.\n */\n mapId?: string | undefined;\n\n /**\n * The
|
|
1
|
+
{"version":3,"file":"useMapModel.js","sources":["useMapModel.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { useService } from \"open-pioneer:react-hooks\";\nimport { useMemo } from \"react\";\nimport { useAsync } from \"react-use\";\nimport { MapModel, MapRegistry } from \"../api\";\nimport { MapModelImpl } from \"../model/MapModelImpl\";\n// eslint-disable-next-line unused-imports/no-unused-imports\nimport { DefaultMapProvider, useDefaultMapProps } from \"./DefaultMapProvider\";\n\n/** Return value of {@link useMapModel}. */\nexport type UseMapModelResult = UseMapModelLoading | UseMapModelResolved | UseMapModelRejected;\n\nexport interface UseMapModelLoading {\n kind: \"loading\";\n map?: undefined;\n error?: undefined;\n}\n\nexport interface UseMapModelResolved {\n kind: \"resolved\";\n map: MapModel;\n error?: undefined;\n}\n\nexport interface UseMapModelRejected {\n kind: \"rejected\";\n map?: undefined;\n error: Error;\n}\n\n/**\n * Options that specify which map to use. See {@link useMapModel}.\n *\n * When not setting any of these properties on a component, the default map (from the `DefaultMapProvider`) will be used.\n * If that is not available either, an error will be thrown.\n */\nexport interface MapModelProps {\n /**\n * The id of the map.\n * The map will be looked up in the MapRegistry service.\n *\n * @deprecated Use the `map` property instead.\n *\n * @see {@link DefaultMapProvider}\n */\n mapId?: string | undefined;\n\n /**\n * The map model to use.\n */\n map?: MapModel | undefined;\n}\n\n/**\n * React hook that looks up the map with the given id in the `map.MapRegistry` service.\n *\n * Returns an object representing the progress, which will eventually represent either\n * the map model value or an initialization error.\n *\n * The map model cannot be returned directly because it may not have completed its initialization yet.\n */\nexport function useMapModel(mapId: string): UseMapModelResult;\n\n/**\n * React hook that resolves a map model specified by the given `props` (see {@link MapModelProps}).\n *\n * Returns an object representing the progress, which will eventually represent either\n * the map model value or an initialization error.\n *\n * The map model cannot be returned directly because it may not have completed its initialization yet.\n */\nexport function useMapModel(props: MapModelProps): UseMapModelResult;\n\n/**\n * React hook that returns the default map model (if available, see {@link DefaultMapProvider}).\n */\nexport function useMapModel(): UseMapModelResult;\nexport function useMapModel(props?: undefined | string | MapModelProps): UseMapModelResult {\n const resolvedMapArg = useResolvedMapArg(props);\n const mapRegistry = useService<MapRegistry>(\"map.MapRegistry\");\n const state = useAsync(async () => {\n if (typeof resolvedMapArg === \"string\") {\n return await mapRegistry.expectMapModel(resolvedMapArg);\n }\n return Promise.resolve(resolvedMapArg);\n }, [mapRegistry, resolvedMapArg]);\n const result = useMemo((): UseMapModelResult => {\n if (state.loading) {\n return { kind: \"loading\" };\n }\n if (state.error) {\n return { kind: \"rejected\", error: state.error };\n }\n return { kind: \"resolved\", map: state.value! };\n }, [state]);\n return result;\n}\n\n/**\n * Resolves the map model (or its id) from the given props and the default map props.\n */\nfunction useResolvedMapArg(props?: undefined | string | MapModelProps): MapModel | string {\n if (typeof props === \"object\" && props.mapId != null && props.map != null) {\n throw new Error(`Cannot specify both 'mapId' and 'map' in useMapModel at the same time.`);\n }\n if (props instanceof MapModelImpl) {\n // This cannot happen in valid typescript code, but it might be a common mistake.\n throw new Error(\n `Map model instances cannot be passed directly to 'useMapModel' (see TypeScript signature).`\n );\n }\n const localProps = useMemo((): MapModelProps => {\n // Normalize local props for compatibility with old string overload.\n if (props == null) {\n return {};\n }\n if (typeof props === \"string\") {\n return { mapId: props };\n }\n return { mapId: props.mapId, map: props.map };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [...(typeof props === \"string\" || props == null ? [props] : [props.mapId, props.map])]);\n const defaultProps = useDefaultMapProps();\n\n const resolvedMapArg = resolveMap(localProps) ?? resolveMap(defaultProps);\n if (resolvedMapArg == null) {\n throw new Error(\n `No map specified. ` +\n `You must either specify the map (or its id) via a DefaultMapProvider parent or configure it explicitly.`\n );\n }\n return resolvedMapArg;\n}\n\nfunction resolveMap(props?: MapModelProps): MapModel | string | undefined {\n return props?.map ?? props?.mapId;\n}\n"],"names":[],"mappings":";;;;;;AA8EO,SAAS,YAAY,KAA+D,EAAA;AACvF,EAAM,MAAA,cAAA,GAAiB,kBAAkB,KAAK,CAAA;AAC9C,EAAM,MAAA,WAAA,GAAc,WAAwB,iBAAiB,CAAA;AAC7D,EAAM,MAAA,KAAA,GAAQ,SAAS,YAAY;AAC/B,IAAI,IAAA,OAAO,mBAAmB,QAAU,EAAA;AACpC,MAAO,OAAA,MAAM,WAAY,CAAA,cAAA,CAAe,cAAc,CAAA;AAAA;AAE1D,IAAO,OAAA,OAAA,CAAQ,QAAQ,cAAc,CAAA;AAAA,GACtC,EAAA,CAAC,WAAa,EAAA,cAAc,CAAC,CAAA;AAChC,EAAM,MAAA,MAAA,GAAS,QAAQ,MAAyB;AAC5C,IAAA,IAAI,MAAM,OAAS,EAAA;AACf,MAAO,OAAA,EAAE,MAAM,SAAU,EAAA;AAAA;AAE7B,IAAA,IAAI,MAAM,KAAO,EAAA;AACb,MAAA,OAAO,EAAE,IAAA,EAAM,UAAY,EAAA,KAAA,EAAO,MAAM,KAAM,EAAA;AAAA;AAElD,IAAA,OAAO,EAAE,IAAA,EAAM,UAAY,EAAA,GAAA,EAAK,MAAM,KAAO,EAAA;AAAA,GACjD,EAAG,CAAC,KAAK,CAAC,CAAA;AACV,EAAO,OAAA,MAAA;AACX;AAKA,SAAS,kBAAkB,KAA+D,EAAA;AACtF,EAAI,IAAA,OAAO,UAAU,QAAY,IAAA,KAAA,CAAM,SAAS,IAAQ,IAAA,KAAA,CAAM,OAAO,IAAM,EAAA;AACvE,IAAM,MAAA,IAAI,MAAM,CAAwE,sEAAA,CAAA,CAAA;AAAA;AAE5F,EAAA,IAAI,iBAAiB,YAAc,EAAA;AAE/B,IAAA,MAAM,IAAI,KAAA;AAAA,MACN,CAAA,0FAAA;AAAA,KACJ;AAAA;AAEJ,EAAM,MAAA,UAAA,GAAa,QAAQ,MAAqB;AAE5C,IAAA,IAAI,SAAS,IAAM,EAAA;AACf,MAAA,OAAO,EAAC;AAAA;AAEZ,IAAI,IAAA,OAAO,UAAU,QAAU,EAAA;AAC3B,MAAO,OAAA,EAAE,OAAO,KAAM,EAAA;AAAA;AAE1B,IAAA,OAAO,EAAE,KAAO,EAAA,KAAA,CAAM,KAAO,EAAA,GAAA,EAAK,MAAM,GAAI,EAAA;AAAA,KAE7C,CAAC,GAAI,OAAO,KAAA,KAAU,YAAY,KAAS,IAAA,IAAA,GAAO,CAAC,KAAK,IAAI,CAAC,KAAA,CAAM,OAAO,KAAM,CAAA,GAAG,CAAE,CAAC,CAAA;AACzF,EAAA,MAAM,eAAe,kBAAmB,EAAA;AAExC,EAAA,MAAM,cAAiB,GAAA,UAAA,CAAW,UAAU,CAAA,IAAK,WAAW,YAAY,CAAA;AACxE,EAAA,IAAI,kBAAkB,IAAM,EAAA;AACxB,IAAA,MAAM,IAAI,KAAA;AAAA,MACN,CAAA,yHAAA;AAAA,KAEJ;AAAA;AAEJ,EAAO,OAAA,cAAA;AACX;AAEA,SAAS,WAAW,KAAsD,EAAA;AACtE,EAAO,OAAA,KAAA,EAAO,OAAO,KAAO,EAAA,KAAA;AAChC;;;;"}
|