@open-pioneer/map 1.4.0-dev.20260727093741 → 1.5.0-dev.20260910103330
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 +547 -485
- package/LayerFactory.d.ts +1 -1
- package/LayerFactory.js.map +1 -1
- package/MapRegistry.js.map +1 -1
- package/README.md +5 -8
- package/layers/AbstractLayer.d.ts +41 -3
- package/layers/AbstractLayer.js +139 -81
- package/layers/AbstractLayer.js.map +1 -1
- package/layers/AbstractLayerBase.d.ts +2 -2
- package/layers/AbstractLayerBase.js.map +1 -1
- package/layers/GroupLayer.d.ts +2 -1
- package/layers/GroupLayer.js +4 -1
- package/layers/GroupLayer.js.map +1 -1
- package/layers/SimpleLayer.d.ts +1 -1
- package/layers/SimpleLayer.js +1 -1
- package/layers/SimpleLayer.js.map +1 -1
- package/layers/WMSLayer.js +58 -10
- package/layers/WMSLayer.js.map +1 -1
- package/layers/WMTSLayer.d.ts +1 -1
- package/layers/WMTSLayer.js +10 -4
- package/layers/WMTSLayer.js.map +1 -1
- package/layers/group/GroupLayerCollection.d.ts +2 -2
- package/layers/group/GroupLayerCollection.js +1 -1
- package/layers/group/GroupLayerCollection.js.map +1 -1
- package/layers/shared/AddLayerOptions.d.ts +3 -2
- package/layers/shared/LayerConfig.d.ts +2 -0
- package/layers/shared/SublayerBaseType.d.ts +9 -0
- package/layers/shared/SublayersCollection.js.map +1 -1
- package/layers/shared/getRecursiveLayers.d.ts +1 -1
- package/layers/shared/getRecursiveLayers.js +12 -5
- package/layers/shared/getRecursiveLayers.js.map +1 -1
- package/layers/shared/internals.d.ts +4 -2
- package/layers/shared/internals.js +3 -1
- package/layers/shared/internals.js.map +1 -1
- package/layers/unions.js.map +1 -1
- package/layers/wms/WMSSublayer.d.ts +14 -1
- package/layers/wms/WMSSublayer.js +29 -2
- package/layers/wms/WMSSublayer.js.map +1 -1
- package/layers/wms/getAttributions.js.map +1 -1
- package/layers/wms/getLegendUrl.js.map +1 -1
- package/layers/wmts/getAttributions.js.map +1 -1
- package/layers/wmts/getLegendUrl.js.map +1 -1
- package/model/Highlights.js.map +1 -1
- package/model/LayerCollection.js +38 -23
- package/model/LayerCollection.js.map +1 -1
- package/model/MapAttributions.js.map +1 -1
- package/model/MapConfig.d.ts +16 -0
- package/model/MapModel.d.ts +5 -5
- package/model/MapModel.js +4 -4
- package/model/MapModel.js.map +1 -1
- package/model/Overlays.d.ts +2 -2
- package/model/Overlays.js +2 -2
- package/model/Overlays.js.map +1 -1
- package/model/createMapModel.js +57 -2
- package/model/createMapModel.js.map +1 -1
- package/model/getGeometries.js.map +1 -1
- package/package.json +17 -13
- package/ui/DefaultMapProvider.js.map +1 -1
- package/ui/MapAnchor.js.map +1 -1
- package/ui/MapContainer.js +1 -1
- package/ui/MapContainer.js.map +1 -1
- package/ui/MapContainerContext.js.map +1 -1
- package/ui/OverlaysRenderer.js.map +1 -1
- package/ui/computeMapAnchorStyles.js.map +1 -1
- package/ui/hooks/useMapModel.js +2 -2
- package/ui/hooks/useMapModel.js.map +1 -1
- package/utils/fetch.js.map +1 -1
- package/utils/geometry-utils.js.map +1 -1
- package/utils/ol-test-support.js.map +1 -1
- package/utils/projections.js.map +1 -1
- package/utils/sanitize.js.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,21 +1,76 @@
|
|
|
1
1
|
# @open-pioneer/map
|
|
2
2
|
|
|
3
|
-
## 1.
|
|
3
|
+
## 1.5.0-dev.20260910103330
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- f790fda: Update to Chakra 3.37.0
|
|
8
|
+
- ebda251: The `addLayer` method now also accepts `at: "base"` to add a base layer.
|
|
9
|
+
- ebda251: Add new properties for topmost layers and base layers in `MapConfig`.
|
|
10
|
+
|
|
11
|
+
- With `MapConfig.topmostLayers` topmost layers can now be defined in the initial map setup.
|
|
12
|
+
- Base layers can now be defined in the initial map setup with the `MapConfig.baseLayers` property
|
|
13
|
+
|
|
14
|
+
We recommend using the `baseLayers` property instead of `isBaseLayer: true` for new apps.
|
|
15
|
+
|
|
16
|
+
```typescript
|
|
17
|
+
export class MapConfigProviderImpl implements MapConfigProvider {
|
|
18
|
+
mapId = MAP_ID;
|
|
19
|
+
|
|
20
|
+
async getMapConfig({ layerFactory }: MapConfigProviderOptions): Promise<MapConfig> {
|
|
21
|
+
return {
|
|
22
|
+
initialView: {...},
|
|
23
|
+
projection: "EPSG:25832",
|
|
24
|
+
baseLayers: [
|
|
25
|
+
//all base layers
|
|
26
|
+
layerFactory.create(...)
|
|
27
|
+
],
|
|
28
|
+
layers: [
|
|
29
|
+
//all other operational layers
|
|
30
|
+
layerFactory.create(...),
|
|
31
|
+
layerFactory.create(...)
|
|
32
|
+
],
|
|
33
|
+
topmostLayers: [
|
|
34
|
+
//all operational highlight layers
|
|
35
|
+
layerFactory.create(...)
|
|
36
|
+
]
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### Patch Changes
|
|
43
|
+
|
|
44
|
+
- 3203815: Update code to match new react linting rules from oxlint.
|
|
45
|
+
- 09ec7c7: Updated dependencies
|
|
46
|
+
|
|
47
|
+
## 1.4.0
|
|
4
48
|
|
|
5
49
|
### Minor Changes
|
|
6
50
|
|
|
7
51
|
- c30396d: Update Chakra to 3.36.1
|
|
52
|
+
- 690a892: A layer's loadState is now a derived from three different channels:
|
|
53
|
+
|
|
54
|
+
- source — the OpenLayers source state (undefined/loading/ready/error).
|
|
55
|
+
- health — the result of the optional healthCheck (run once on attach).
|
|
56
|
+
- metadata — the result of a layer's own capabilities request (if any).
|
|
57
|
+
|
|
58
|
+
Additionally, a new property `loadError` has been added to the layer class.
|
|
59
|
+
|
|
8
60
|
- e4b47f1: `useMapModel` now prints an error message if the map model could not be created.
|
|
9
61
|
This error was previously returned and was easy to silently ignore.
|
|
10
62
|
|
|
11
|
-
|
|
63
|
+
Use the option `quiet: true` to suppress this error message.
|
|
12
64
|
|
|
13
65
|
- c9b3ced: Provide reactive rotation in MapModel
|
|
66
|
+
- 690a892: WMS Layer: add validation that configured sublayers actually exist in the service's capabilities.
|
|
67
|
+
- d862003: Update to trails core-packages 4.7.0
|
|
14
68
|
|
|
15
69
|
### Patch Changes
|
|
16
70
|
|
|
17
71
|
- 078bef5: Use private JavaScript properties (#) instead of TypeScript keyword.
|
|
18
72
|
- b58a50f: Use new `shallowEqual` function to compare attribution arrays.
|
|
73
|
+
- c16a401: Migrated from eslint to oxlint and from prettier to oxfmt.
|
|
19
74
|
|
|
20
75
|
## 1.3.0
|
|
21
76
|
|
|
@@ -33,17 +88,18 @@
|
|
|
33
88
|
- 73453af: Update OpenLayers to 10.9.0
|
|
34
89
|
- fcbd505: Sanitize HTML used for layer attributions.
|
|
35
90
|
- 33ab02f: Move highlight methods to `mapModel.highlights`.
|
|
36
|
-
- `mapModel.highlight()` -> `mapModel.highlights.add()`
|
|
37
|
-
- `mapModel.highlightAndZoom()` -> `mapModel.highlights.addAndZoom()`
|
|
38
|
-
- `mapModel.removeHighlights()` -> `mapModel.highlights.clear()`
|
|
39
91
|
|
|
40
|
-
|
|
92
|
+
- `mapModel.highlight()` -> `mapModel.highlights.add()`
|
|
93
|
+
- `mapModel.highlightAndZoom()` -> `mapModel.highlights.addAndZoom()`
|
|
94
|
+
- `mapModel.removeHighlights()` -> `mapModel.highlights.clear()`
|
|
95
|
+
|
|
96
|
+
The old methods on the Map Model have been deprecated and will be removed in a future major release.
|
|
41
97
|
|
|
42
98
|
- d54ccfd: Update to Chakra UI 3.35.0
|
|
43
99
|
- 33ab02f: Add new `mapModel.overlays` API to render arbitrary React content on the map at certain coordinates.
|
|
44
100
|
This can be helpful for feature info, popups and for tooltips during map interactions.
|
|
45
101
|
|
|
46
|
-
|
|
102
|
+
Use `mapModel.overlay.add({ content: <SomeReactContent />, ...})` to create a new overlay.
|
|
47
103
|
|
|
48
104
|
- 206b397: Update to trails core packages 4.6.0
|
|
49
105
|
- 2ceb1ca: MapContainer: allow configuration of `rootProps` and `containerProps`.
|
|
@@ -82,22 +138,22 @@
|
|
|
82
138
|
Using only a minimum or maximum limit is possible.
|
|
83
139
|
Missing properties are considered as no limitation.
|
|
84
140
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
141
|
+
```js
|
|
142
|
+
layerFactory.create({
|
|
143
|
+
type: WMTSLayer,
|
|
144
|
+
isBaseLayer: true,
|
|
145
|
+
title: "Basemap",
|
|
146
|
+
name: "basemap",
|
|
147
|
+
minZoom: 10,
|
|
148
|
+
maxZoom: 16,
|
|
149
|
+
});
|
|
150
|
+
```
|
|
95
151
|
|
|
96
|
-
|
|
152
|
+
The boolean property `visibleInScale` of a layer indicates the visibility of this layer depending on the current resolution of the map.
|
|
97
153
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
154
|
+
Restrictions of a `GroupLayer` are inherited to child layers.
|
|
155
|
+
If no restrictions are configured for a child layer, its visibility limitations are equal to the parent `GroupLayer`.
|
|
156
|
+
By configuring additional limits for the child layer, its visibility can be further restricted.
|
|
101
157
|
|
|
102
158
|
### Patch Changes
|
|
103
159
|
|
|
@@ -110,233 +166,233 @@
|
|
|
110
166
|
- b3709f1: **Breaking:** Remove layer constructor types from public API (e.g. `SimpleLayerConstructor`).
|
|
111
167
|
- 9e9bc6e: **Breaking**: Internal layers are no longer returned from getters such as `getItems()` or `getRecursiveLayers()` by default.
|
|
112
168
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
169
|
+
A new option `includeInternalLayers` has been implemented to opt-in into internal layers.
|
|
170
|
+
By default, internal layers are not returned by functions like `getItems()` or `getRecursiveLayers()`.
|
|
171
|
+
If internal layer should be returned this must be specified explicitly with the `includeInternalLayers` option.
|
|
116
172
|
|
|
117
|
-
|
|
118
|
-
|
|
173
|
+
```js
|
|
174
|
+
import { MapModel } from "@open-pioneer/map";
|
|
119
175
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
176
|
+
//internal layers are not included
|
|
177
|
+
const layers = myMapModel.layers.getItems();
|
|
178
|
+
//include internal layers
|
|
179
|
+
const allLayers = myMapModel.layers.getItems({ includeInternalLayers: true });
|
|
180
|
+
```
|
|
125
181
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
182
|
+
Note that if internal layers are returned this includes system layers (e.g. for highlights or geolocation) that were not explicitly added to the map.
|
|
183
|
+
The described behavior is aligned for the functions `getItems()`, `getLayers()`, `getAllLayers()` and `getRecursiveLayers()` in `LayerCollection`, `WMSLayer` and `GroupLayer`.
|
|
184
|
+
The function `getRecursiveLayers()` does not return non-internal child layers of an internal layer.
|
|
129
185
|
|
|
130
186
|
- b3709f1: **Breaking:** Remove old event API from layer types and the map model.
|
|
131
187
|
|
|
132
|
-
|
|
188
|
+
These were only used for the `"destroy"` event.
|
|
133
189
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
190
|
+
```ts
|
|
191
|
+
// OLD, removed API:
|
|
192
|
+
const layer = ...;
|
|
193
|
+
layer.on("destroyed", () => {
|
|
194
|
+
console.debug("layer was destroyed");
|
|
195
|
+
});
|
|
196
|
+
```
|
|
141
197
|
|
|
142
|
-
|
|
198
|
+
The destroy event still exists, but is now based on the event system of the [reactivity API](https://github.com/conterra/reactivity/tree/main/packages/reactivity-events):
|
|
143
199
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
200
|
+
```ts
|
|
201
|
+
// NEW
|
|
202
|
+
import { on } from "@conterra/reactivity-events";
|
|
147
203
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
204
|
+
const layer = ...;
|
|
205
|
+
on(layer.destroyed, () => {
|
|
206
|
+
console.debug("layer was destroyed");
|
|
207
|
+
});
|
|
152
208
|
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
209
|
+
const mapModel = ...;
|
|
210
|
+
on(mapModel.destroyed, () => {
|
|
211
|
+
console.debug("layer was destroyed");
|
|
212
|
+
});
|
|
213
|
+
```
|
|
158
214
|
|
|
159
215
|
- a1614de: **Breaking**: Remove support for `mapId` in all React components.
|
|
160
216
|
|
|
161
|
-
|
|
162
|
-
|
|
217
|
+
To configure the map for a component (for example: `Legend`), either pass the `map`
|
|
218
|
+
as an explicit parameter or use the `DefaultMapProvider`:
|
|
163
219
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
220
|
+
```ts
|
|
221
|
+
// Explicit API
|
|
222
|
+
<Legend map={map} />
|
|
167
223
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
224
|
+
// All children of the DefaultMapProvider can use the configured map
|
|
225
|
+
<DefaultMapProvider map={map}>
|
|
226
|
+
<MapContainer />
|
|
227
|
+
<Legend />
|
|
228
|
+
<SomeOtherComponent />
|
|
229
|
+
</DefaultMapProvider>;
|
|
230
|
+
```
|
|
175
231
|
|
|
176
|
-
|
|
232
|
+
Support for `mapId` was removed in [PR #486](https://github.com/open-pioneer/trails-openlayers-base-packages/pull/486).
|
|
177
233
|
|
|
178
234
|
### Minor Changes
|
|
179
235
|
|
|
180
236
|
- 29a10df: Support buffer for zoom geometries.
|
|
181
237
|
Use the `buffer` option to specify the size increase. E.g. `0.1` for 10% size increase.
|
|
182
238
|
|
|
183
|
-
|
|
239
|
+
We use the already existing `calculateBufferedExtent` function to compute the buffer.
|
|
184
240
|
|
|
185
|
-
|
|
241
|
+
For example:
|
|
186
242
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
243
|
+
```ts
|
|
244
|
+
const map: MapModel = ...;
|
|
245
|
+
const highlight = map.highlightAndZoom(someGeometries, {
|
|
246
|
+
// Grows extent by 10%
|
|
247
|
+
buffer: 0.1
|
|
248
|
+
});
|
|
249
|
+
```
|
|
194
250
|
|
|
195
251
|
- 2702df4: Introduce `internal` property for all layer types (including sublayers).
|
|
196
252
|
If `internal` is `true` (default: `false`) the layer is not considered by any UI widget (e.g. Legend and Toc).
|
|
197
253
|
The `internal` state of a layer is not to be confused with the layer's visibility on the map which is determined by the `visible` property.
|
|
198
254
|
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
255
|
+
```typescript
|
|
256
|
+
//internal layer is visible on the map but hidden in UI elements like legend and Toc
|
|
257
|
+
const internalLayer = new SimpleLayer({
|
|
258
|
+
id: "layer1",
|
|
259
|
+
title: "layer 1",
|
|
260
|
+
olLayer: myOlLayer,
|
|
261
|
+
visible: true,
|
|
262
|
+
internal: true,
|
|
263
|
+
});
|
|
264
|
+
```
|
|
209
265
|
|
|
210
266
|
- 5df900f: Add a new hook `useMapModelValue(props?)`.
|
|
211
267
|
The hook returns either the directly configured `map` (via props) or the default map from a parent `DefaultMapProvider`.
|
|
212
268
|
If neither is present, an error will be thrown.
|
|
213
269
|
|
|
214
|
-
|
|
215
|
-
|
|
270
|
+
This hook is used in all components that work with the map.
|
|
271
|
+
The typical usage works like this:
|
|
216
272
|
|
|
217
|
-
|
|
218
|
-
|
|
273
|
+
```ts
|
|
274
|
+
import { MapModelProps, useMapModelValue } from "@open-pioneer/map";
|
|
219
275
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
276
|
+
// optional `map` property inherited from `MapModelProps`
|
|
277
|
+
export interface MyComponentProps extends MapModelProps {
|
|
278
|
+
// ... other properties
|
|
279
|
+
}
|
|
224
280
|
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
281
|
+
export function MyComponent(props) {
|
|
282
|
+
const map = useMapModelValue(props); // looks up the map
|
|
283
|
+
}
|
|
284
|
+
```
|
|
229
285
|
|
|
230
|
-
|
|
286
|
+
You can also call this hook without any arguments:
|
|
231
287
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
288
|
+
```ts
|
|
289
|
+
// Map model from DefaultMapProvider or an error.
|
|
290
|
+
const mapModel = useMapModelValue();
|
|
291
|
+
```
|
|
236
292
|
|
|
237
|
-
|
|
293
|
+
This hook should replace _most_ usages `useMapModel`, which can't return the map model directly since it may not have finished construction yet.
|
|
238
294
|
|
|
239
295
|
- 14c484e: Introduce the `LayerFactory` service (interface `"map.LayerFactory"`).
|
|
240
296
|
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
297
|
+
The layer factory should be used to construct new layer instances, instead of calling the layer constructor directly.
|
|
298
|
+
Calling the constructor directly (e.g. `new SimpleLayer`) is deprecated (but still fully supported).
|
|
299
|
+
|
|
300
|
+
For example:
|
|
301
|
+
|
|
302
|
+
```ts
|
|
303
|
+
// OLD
|
|
304
|
+
new SimpleLayer({
|
|
305
|
+
title: "OSM",
|
|
306
|
+
isBaseLayer: true,
|
|
307
|
+
olLayer: new TileLayer({
|
|
308
|
+
source: new OSM(),
|
|
309
|
+
}),
|
|
310
|
+
});
|
|
311
|
+
```
|
|
312
|
+
|
|
313
|
+
```ts
|
|
314
|
+
// NEW
|
|
315
|
+
const layerFactory = ...; // injected
|
|
316
|
+
layerFactory.create({
|
|
317
|
+
type: SimpleLayer,
|
|
318
|
+
title: "OSM",
|
|
319
|
+
isBaseLayer: true,
|
|
320
|
+
olLayer: new TileLayer({
|
|
321
|
+
source: new OSM()
|
|
322
|
+
})
|
|
323
|
+
});
|
|
324
|
+
```
|
|
325
|
+
|
|
326
|
+
This was done to support passing hidden dependencies from the layer factory to the layer instance (such as the `HttpService`),
|
|
327
|
+
without forcing the user to supply these dependencies manually.
|
|
328
|
+
|
|
329
|
+
The `MapConfigProvider` has been updated as well.
|
|
330
|
+
The `getMapConfig` method will now receive the layer factory as an option.
|
|
331
|
+
This makes it easy to migrate to the new API:
|
|
332
|
+
|
|
333
|
+
```diff
|
|
334
|
+
# Example MapConfigProvider
|
|
335
|
+
export class MapConfigProviderImpl implements MapConfigProvider {
|
|
336
|
+
mapId = MAP_ID;
|
|
337
|
+
|
|
338
|
+
- async getMapConfig(): Promise<MapConfig> {
|
|
339
|
+
+ async getMapConfig({ layerFactory }: MapConfigProviderOptions): Promise<MapConfig> {
|
|
340
|
+
return {
|
|
341
|
+
initialView: {
|
|
342
|
+
kind: "position",
|
|
343
|
+
center: { x: 404747, y: 5757920 },
|
|
344
|
+
zoom: 14
|
|
345
|
+
},
|
|
346
|
+
layers: [
|
|
347
|
+
- new SimpleLayer({
|
|
348
|
+
+ layerFactory.create({
|
|
349
|
+
+ type: SimpleLayer,
|
|
350
|
+
title: "OSM",
|
|
351
|
+
isBaseLayer: true,
|
|
352
|
+
olLayer: new TileLayer({
|
|
353
|
+
source: new OSM()
|
|
354
|
+
})
|
|
355
|
+
})
|
|
356
|
+
]
|
|
357
|
+
};
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
```
|
|
305
361
|
|
|
306
362
|
- aeb9000: Add new `"topmost"` option to add layers that are always displayed on top (above all other layers).
|
|
307
363
|
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
364
|
+
A new layers can be added at `topmost` to ensure that this layer will always be displayed on top of the other layers.
|
|
365
|
+
This can be used, for example, to implement highlights or to draw graphics.
|
|
366
|
+
Layers added at `"topmost"` will always be shown above layers at `"top"`.
|
|
311
367
|
|
|
312
|
-
|
|
368
|
+
When using the `"above"` or `"below"` options with a `"topmost"` reference layer, that layer becomes `"topmost"` as well.
|
|
313
369
|
|
|
314
|
-
|
|
315
|
-
|
|
370
|
+
```typescript
|
|
371
|
+
import { MapModel, SimpleLayer } from "@open-pioneer/map";
|
|
316
372
|
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
373
|
+
const highlightLayer = new SimpleLayer({
|
|
374
|
+
title: "highlights",
|
|
375
|
+
olLayer: myOlLayer,
|
|
376
|
+
});
|
|
377
|
+
//always displayed at the top
|
|
378
|
+
myMapModel.layers.addLayer(highlightLayer, { at: "topmost" });
|
|
379
|
+
```
|
|
324
380
|
|
|
325
381
|
- 5df900f: Deprecate the parameter-less signature of `useMapModel()`:
|
|
326
382
|
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
383
|
+
```ts
|
|
384
|
+
// Returns the DefaultMapProvider's map, but wrapped in a result value (loading/resolved/rejected)
|
|
385
|
+
const result = useMapModel();
|
|
386
|
+
```
|
|
331
387
|
|
|
332
|
-
|
|
388
|
+
Use `useMapModelValue()` instead:
|
|
333
389
|
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
390
|
+
```ts
|
|
391
|
+
// Returns the map model directly.
|
|
392
|
+
const mapModel = useMapModelValue();
|
|
393
|
+
```
|
|
338
394
|
|
|
339
|
-
|
|
395
|
+
All other signatures of `useMapModel()` are still fully supported.
|
|
340
396
|
|
|
341
397
|
- 773fa2d: The map now has an appropriate focus outline style by default, which respects the map view's padding.
|
|
342
398
|
For information on disabling this behavior, see the map package documentation.
|
|
@@ -353,8 +409,9 @@
|
|
|
353
409
|
- 138d85b: Update core packages to 4.2.0
|
|
354
410
|
- 4f1e7bd: The internal constant `TOPMOST_LAYER_Z` has been removed.
|
|
355
411
|
To configure a layer that is always on top:
|
|
356
|
-
|
|
357
|
-
|
|
412
|
+
|
|
413
|
+
- Create a layer using the `LayerFactory`
|
|
414
|
+
- Add it to the map model and specify the `at: "topmost"` option
|
|
358
415
|
|
|
359
416
|
- 2c8b617: Introduce `MapRegistry.createMapModel` method to create a `MapModel` without a `MapConfigProvider`.
|
|
360
417
|
For more details, see [PR](https://github.com/open-pioneer/trails-openlayers-base-packages/pull/499) and [issue](https://github.com/open-pioneer/trails-openlayers-base-packages/issues/483).
|
|
@@ -368,13 +425,14 @@
|
|
|
368
425
|
|
|
369
426
|
- 66179bc: Update to core-packages v4.0.0
|
|
370
427
|
- acd5115: **Breaking:** Remove the following hooks, which were deprecated since version 0.8.0:
|
|
371
|
-
- useView
|
|
372
|
-
- useProjection
|
|
373
|
-
- useResolution
|
|
374
|
-
- useCenter
|
|
375
|
-
- useScale
|
|
376
428
|
|
|
377
|
-
|
|
429
|
+
- useView
|
|
430
|
+
- useProjection
|
|
431
|
+
- useResolution
|
|
432
|
+
- useCenter
|
|
433
|
+
- useScale
|
|
434
|
+
|
|
435
|
+
Use reactive properties on the map model instead, e.g. `mapModel.scale`.
|
|
378
436
|
|
|
379
437
|
- 738390e: Update to Chakra v3
|
|
380
438
|
|
|
@@ -382,30 +440,30 @@
|
|
|
382
440
|
|
|
383
441
|
- 738390e: Fix an issue with "raw" map container children that are not wrapped in a map anchor.
|
|
384
442
|
|
|
385
|
-
|
|
443
|
+
Consider, for example, the following snippet:
|
|
386
444
|
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
445
|
+
```tsx
|
|
446
|
+
<MapContainer>
|
|
447
|
+
{/* .custom-content does absolute positioning relative to map container */}
|
|
448
|
+
<div className="custom-content">Hi</div>
|
|
449
|
+
</MapContainer>
|
|
450
|
+
```
|
|
393
451
|
|
|
394
|
-
|
|
395
|
-
|
|
452
|
+
Previously, the `div` was rendered relative to the map container div but did _not_ respect the map's view padding.
|
|
453
|
+
Now the `div` will move according to the map padding as well.
|
|
396
454
|
|
|
397
455
|
- 0a8ff71: The default attribution widget created for the map now has `role="region"` and an `aria-label` for improved screen reader support.
|
|
398
456
|
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
457
|
+
```html
|
|
458
|
+
<div
|
|
459
|
+
style="pointer-events: auto;"
|
|
460
|
+
class="ol-attribution ol-unselectable ol-control ol-uncollapsible"
|
|
461
|
+
role="region"
|
|
462
|
+
aria-label="Quellenangaben"
|
|
463
|
+
>
|
|
464
|
+
<!-- Attributions -->
|
|
465
|
+
</div>
|
|
466
|
+
```
|
|
409
467
|
|
|
410
468
|
## 0.10.0
|
|
411
469
|
|
|
@@ -414,82 +472,82 @@
|
|
|
414
472
|
- 193068a: Deprecate the `mapId` property on React components.
|
|
415
473
|
Use the `MapModel` directly instead to pass a reference to the map.
|
|
416
474
|
|
|
417
|
-
|
|
475
|
+
Example:
|
|
418
476
|
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
477
|
+
```tsx
|
|
478
|
+
// Default map for entire component tree
|
|
479
|
+
<DefaultMapProvider map={mapModel}>
|
|
480
|
+
<Toc />
|
|
481
|
+
</DefaultMapProvider>
|
|
424
482
|
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
483
|
+
// Map for specific component
|
|
484
|
+
<Toc map={mapModel} />
|
|
485
|
+
```
|
|
428
486
|
|
|
429
487
|
### Patch Changes
|
|
430
488
|
|
|
431
489
|
- 2bafdad: Top level operational layers can now be inserted at an arbitrary position.
|
|
432
490
|
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
491
|
+
```ts
|
|
492
|
+
const mapModel = ...;
|
|
493
|
+
const newLayer = new SimpleLayer({
|
|
494
|
+
title: "New layer",
|
|
495
|
+
// ...
|
|
496
|
+
});
|
|
439
497
|
|
|
440
|
-
|
|
441
|
-
|
|
498
|
+
mapModel.layers.addLayer(newLayer, { at: "top" }); // Same as default: on top of all existing operational layers
|
|
499
|
+
mapModel.layers.addLayer(newLayer, { at: "bottom" }); // Below all other operational layers
|
|
442
500
|
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
501
|
+
const otherLayer = ...; // Eiter a valid layer id or a layer instance. Must be from the same collection.
|
|
502
|
+
mapModel.layers.addLayer(newLayer, { at: "above", reference: otherLayer }); // Above the reference layer
|
|
503
|
+
mapModel.layers.addLayer(newLayer, { at: "below", reference: otherLayer }); // Below the reference layer
|
|
504
|
+
```
|
|
447
505
|
|
|
448
506
|
- cd1435b: Update ol to 10.5.0
|
|
449
507
|
- 032eed7: Bump dependencies.
|
|
450
508
|
- cd1435b: Update to react 19.1.0
|
|
451
509
|
- 7558df4: Add new map anchor positioning options.
|
|
452
510
|
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
511
|
+
The following positions are now supported:
|
|
512
|
+
|
|
513
|
+
```ts
|
|
514
|
+
export type MapAnchorPosition =
|
|
515
|
+
| "manual"
|
|
516
|
+
| "top-left"
|
|
517
|
+
| "top-right"
|
|
518
|
+
| "top-center"
|
|
519
|
+
| "bottom-left"
|
|
520
|
+
| "bottom-right"
|
|
521
|
+
| "bottom-center"
|
|
522
|
+
| "left-center"
|
|
523
|
+
| "right-center"
|
|
524
|
+
| "center";
|
|
525
|
+
```
|
|
526
|
+
|
|
527
|
+
You can use `manual` positioning to position an anchor using CSS.
|
|
528
|
+
For example:
|
|
529
|
+
|
|
530
|
+
```tsx
|
|
531
|
+
<MapAnchor className="manual-position" position="manual">
|
|
532
|
+
<Box
|
|
533
|
+
backgroundColor="whiteAlpha.800"
|
|
534
|
+
borderWidth="1px"
|
|
535
|
+
borderRadius="lg"
|
|
536
|
+
padding={2}
|
|
537
|
+
boxShadow="lg"
|
|
538
|
+
>
|
|
539
|
+
Manually positioned anchor
|
|
540
|
+
</Box>
|
|
541
|
+
```
|
|
542
|
+
|
|
543
|
+
Combined with css:
|
|
544
|
+
|
|
545
|
+
```css
|
|
546
|
+
.manual-position {
|
|
547
|
+
left: 200px;
|
|
548
|
+
top: 200px;
|
|
549
|
+
}
|
|
550
|
+
```
|
|
493
551
|
|
|
494
552
|
## 0.9.0
|
|
495
553
|
|
|
@@ -497,8 +555,8 @@
|
|
|
497
555
|
|
|
498
556
|
- e7fdc5d: improve scale calculation for none-metric projections
|
|
499
557
|
|
|
500
|
-
|
|
501
|
-
|
|
558
|
+
Fix scale calculation for projections with none-metric units (e.g. EPSG:4326).
|
|
559
|
+
Note: The calculated scale (`useScale`) still may deviate from the desired scale (`setScale`) for non-metric projections. This is due to limitiations in the [getPointResolution](https://openlayers.org/en/latest/apidoc/module-ol_proj.html#.getPointResolution) function from OL.
|
|
502
560
|
|
|
503
561
|
- cb94c75: update dependencies
|
|
504
562
|
- f327eec: Deprecate `mapModel.layers.getAllLayers()`.
|
|
@@ -506,43 +564,43 @@
|
|
|
506
564
|
The name of `getAllLayers()` is misleading because it does not recurse into nested layers.
|
|
507
565
|
- f327eec: Add function `getRecursiveLayers()` to `LayerCollection`, `SublayerCollection` and `GroupLayerCollection` in `@open-pioneer/map`
|
|
508
566
|
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
567
|
+
Compared to `getLayers` and `getOperationalLayers`, `getRecursiveLayer` returns all (nested) child and sub layers of a collection.
|
|
568
|
+
The property `options.filter` can be used to exclude layers (and their child layers) from the result. For `LayerCollection`, `getRecursiveLayers()` provides the predefined filters `base` and `operational` to return either base layers or operation layers only.
|
|
569
|
+
|
|
570
|
+
The function might be costly if the hierarchy of layers is deeply nested because the layer tree has to be traversed recursively.
|
|
571
|
+
In some scenarios using `options.filter` could be used to improve the performance because it is not necessary to traverse the layer tree completely if some layers are excluded.
|
|
572
|
+
|
|
573
|
+
Example (using GroupLayerCollection):
|
|
574
|
+
|
|
575
|
+
```typescript
|
|
576
|
+
const grouplayer = new GroupLayer({
|
|
577
|
+
id: "group",
|
|
578
|
+
title: "group test",
|
|
579
|
+
layers: [
|
|
580
|
+
new SimpleLayer({
|
|
581
|
+
id: "member",
|
|
582
|
+
title: "group member",
|
|
583
|
+
olLayer: olLayer1,
|
|
584
|
+
}),
|
|
585
|
+
new GroupLayer({
|
|
586
|
+
id: "subgroup",
|
|
587
|
+
title: "subgroup test",
|
|
521
588
|
layers: [
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
})
|
|
538
|
-
]
|
|
539
|
-
});
|
|
540
|
-
|
|
541
|
-
// Returns only the layer "member" because the provided filter function excludes "subgroup" and (implicitly) its child "subgroupmember".
|
|
542
|
-
const layers = grouplayer.layers.getRecursiveLayers({
|
|
543
|
-
filter: (layer) => layer.id !== "subgroup"
|
|
544
|
-
});
|
|
545
|
-
```
|
|
589
|
+
new SimpleLayer({
|
|
590
|
+
id: "subgroupmember",
|
|
591
|
+
title: "subgroup member",
|
|
592
|
+
olLayer: olLayer2,
|
|
593
|
+
}),
|
|
594
|
+
],
|
|
595
|
+
}),
|
|
596
|
+
],
|
|
597
|
+
});
|
|
598
|
+
|
|
599
|
+
// Returns only the layer "member" because the provided filter function excludes "subgroup" and (implicitly) its child "subgroupmember".
|
|
600
|
+
const layers = grouplayer.layers.getRecursiveLayers({
|
|
601
|
+
filter: (layer) => layer.id !== "subgroup",
|
|
602
|
+
});
|
|
603
|
+
```
|
|
546
604
|
|
|
547
605
|
### Patch Changes
|
|
548
606
|
|
|
@@ -550,23 +608,23 @@
|
|
|
550
608
|
This allows specifying the type of the `properties` attribute.
|
|
551
609
|
The default type is `Readonly<Record<string, unknown>>` for backwards compatibility.
|
|
552
610
|
|
|
553
|
-
|
|
611
|
+
Example:
|
|
554
612
|
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
613
|
+
```ts
|
|
614
|
+
interface MyFeatureProperties {
|
|
615
|
+
name: string;
|
|
616
|
+
}
|
|
559
617
|
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
618
|
+
const feature: BaseFeature<MyFeatureProperties> = {
|
|
619
|
+
id: 123,
|
|
620
|
+
properties: {
|
|
621
|
+
name: "Example Feature",
|
|
622
|
+
},
|
|
623
|
+
};
|
|
566
624
|
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
625
|
+
// string | undefined instead of `unknown`
|
|
626
|
+
const name = feature.properties?.name;
|
|
627
|
+
```
|
|
570
628
|
|
|
571
629
|
- 32ed2cd: Fix `mapModel.layers.getLayerById()` not being reactive (#400).
|
|
572
630
|
- 209eb8e: Added a configuration option to disable fetching of WMS service capabilities.
|
|
@@ -580,123 +638,126 @@
|
|
|
580
638
|
- e7978a8: **Breaking:** Remove most events from the map model and the layer interfaces.
|
|
581
639
|
All events that were merely used to synchronized state (e.g. `changed:title` etc.) have been removed.
|
|
582
640
|
|
|
583
|
-
|
|
584
|
-
|
|
641
|
+
The map model and related objects (layers, layer collections, etc.) are now based on the [Reactivity API](https://github.com/conterra/reactivity/blob/main/packages/reactivity-core/README.md).
|
|
642
|
+
This change greatly simplifies the code that is necessary to access up-to-date values and to react to changes.
|
|
585
643
|
|
|
586
|
-
|
|
644
|
+
For example, from inside a React component, you can now write:
|
|
587
645
|
|
|
588
|
-
|
|
589
|
-
|
|
646
|
+
```jsx
|
|
647
|
+
import { useReactiveSnapshot } from "@open-pioneer/reactivity";
|
|
590
648
|
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
649
|
+
function YourComponent() {
|
|
650
|
+
// Always up to date, even if the layer's title changes.
|
|
651
|
+
// No more need to listen to events.
|
|
652
|
+
const title = useReactiveSnapshot(() => layer.title, [layer]);
|
|
653
|
+
return <div>{title}</div>;
|
|
654
|
+
}
|
|
655
|
+
```
|
|
598
656
|
|
|
599
|
-
|
|
657
|
+
And inside a normal JavaScript function, you can watch for changes like this:
|
|
600
658
|
|
|
601
|
-
|
|
602
|
-
|
|
659
|
+
```js
|
|
660
|
+
import { watch } from "@conterra/reactivity-core";
|
|
603
661
|
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
662
|
+
const watchHandle = watch(
|
|
663
|
+
() => [layer.title],
|
|
664
|
+
([newTitle]) => {
|
|
665
|
+
console.log("The title changed to", newTitle);
|
|
666
|
+
}
|
|
667
|
+
);
|
|
610
668
|
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
669
|
+
// Later, cleanup:
|
|
670
|
+
watchHandle.destroy();
|
|
671
|
+
```
|
|
614
672
|
|
|
615
|
-
|
|
673
|
+
For more details, check the [Reactivity API documentation](https://github.com/conterra/reactivity/blob/main/packages/reactivity-core/README.md).
|
|
616
674
|
|
|
617
675
|
- 7ae9f90: Add new `children` property to all layers.
|
|
618
676
|
This property makes it possible to handle any layer children in a generic fashion, regardless of the layer's actual type.
|
|
619
677
|
|
|
620
|
-
|
|
678
|
+
`layer.children` is either an alias of `layer.sublayers` (if the layer has sublayers), `layer.layers` (if it's a `GroupLayer`) or undefined, if the layer does not have any children.
|
|
621
679
|
|
|
622
680
|
- d8337a6: The following hooks are deprecated and will be removed in a future release:
|
|
623
|
-
- `useView`
|
|
624
|
-
- `useProjection`
|
|
625
|
-
- `useResolution`
|
|
626
|
-
- `useCenter`
|
|
627
|
-
- `useScale`
|
|
628
681
|
|
|
629
|
-
|
|
682
|
+
- `useView`
|
|
683
|
+
- `useProjection`
|
|
684
|
+
- `useResolution`
|
|
685
|
+
- `useCenter`
|
|
686
|
+
- `useScale`
|
|
687
|
+
|
|
688
|
+
They can all be replaced by using the new reactive properties on the `MapModel`, for example:
|
|
630
689
|
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
690
|
+
```javascript
|
|
691
|
+
// old:
|
|
692
|
+
const center = useCenter(olMap);
|
|
634
693
|
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
694
|
+
// new:
|
|
695
|
+
const center = useReactiveSnapshot(() => mapModel.center, [mapModel]);
|
|
696
|
+
```
|
|
638
697
|
|
|
639
698
|
- 2fa8020: Update trails core package dependencies.
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
699
|
+
|
|
700
|
+
- Also updates Chakra UI to the latest 2.x version and Chakra React Select to version 5.
|
|
701
|
+
- Removes any obsolete references to `@chakra-ui/system`.
|
|
702
|
+
This dependency seems to be no longer required and may lead to duplicate packages in your dependency tree.
|
|
643
703
|
|
|
644
704
|
- 7ae9f90: Add new layer type `GroupLayer` to to the Map API.
|
|
645
705
|
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
706
|
+
A `GroupLayer` contains a list of `Layer` (e.g. `SimpleLayer` or `WMSLayer`). Because `GroupLayer` is a `Layer` as well nested groups are supported.
|
|
707
|
+
The child layers of a `GroupLayer` can be accessed with the `layers` property - `layers` is `undefined` if it is not a group.
|
|
708
|
+
The parent `GroupLayer` of a child layer can be accessed with the `parent` property - `parent` is `undefined` if this layer is not part of a group (or not a sublayer).
|
|
709
|
+
|
|
710
|
+
```js
|
|
711
|
+
const olLayer1 = new TileLayer({
|
|
712
|
+
source: new OSM(),
|
|
713
|
+
});
|
|
714
|
+
const olLayer2 = new TileLayer({
|
|
715
|
+
source: new BkgTopPlusOpen(),
|
|
716
|
+
});
|
|
717
|
+
|
|
718
|
+
// Create group layer with nested sub group
|
|
719
|
+
const group = new GroupLayer({
|
|
720
|
+
id: "group",
|
|
721
|
+
title: "a group layer",
|
|
722
|
+
layers: [
|
|
723
|
+
new SimpleLayer({
|
|
724
|
+
id: "member",
|
|
725
|
+
title: "group member",
|
|
726
|
+
olLayer: olLayer1,
|
|
727
|
+
}),
|
|
728
|
+
new GroupLayer({
|
|
729
|
+
id: "subgroup",
|
|
730
|
+
title: "a nested group layer",
|
|
662
731
|
layers: [
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
})
|
|
679
|
-
]
|
|
680
|
-
});
|
|
681
|
-
|
|
682
|
-
const childLayers: GroupLayerCollection = group.layers; // Access child layers
|
|
683
|
-
```
|
|
684
|
-
|
|
685
|
-
Layers can only be added to a single group or map.
|
|
686
|
-
Sublayers (e.g. `WMSSublayer`) cannot be added to a group directly.
|
|
732
|
+
new SimpleLayer({
|
|
733
|
+
id: "submember",
|
|
734
|
+
title: "subgroup member",
|
|
735
|
+
olLayer: olLayer2,
|
|
736
|
+
}),
|
|
737
|
+
],
|
|
738
|
+
}),
|
|
739
|
+
],
|
|
740
|
+
});
|
|
741
|
+
|
|
742
|
+
const childLayers: GroupLayerCollection = group.layers; // Access child layers
|
|
743
|
+
```
|
|
744
|
+
|
|
745
|
+
Layers can only be added to a single group or map.
|
|
746
|
+
Sublayers (e.g. `WMSSublayer`) cannot be added to a group directly.
|
|
687
747
|
|
|
688
748
|
- d8337a6: Provide new reactive properties on the `MapModel` type.
|
|
689
|
-
- `olView` (-> `olMap.getView()`)
|
|
690
|
-
- `projection` (-> `olMap.getView().getProjection()`)
|
|
691
|
-
- `resolution` (-> `olMap.getView().getResolution()`)
|
|
692
|
-
- `zoomLevel` (-> `olMap.getView().getZoom()`)
|
|
693
|
-
- `center` (-> `olMap.getView().getCenter()`)
|
|
694
|
-
- `scale` (derived from center and resolution)
|
|
695
749
|
|
|
696
|
-
|
|
697
|
-
|
|
750
|
+
- `olView` (-> `olMap.getView()`)
|
|
751
|
+
- `projection` (-> `olMap.getView().getProjection()`)
|
|
752
|
+
- `resolution` (-> `olMap.getView().getResolution()`)
|
|
753
|
+
- `zoomLevel` (-> `olMap.getView().getZoom()`)
|
|
754
|
+
- `center` (-> `olMap.getView().getCenter()`)
|
|
755
|
+
- `scale` (derived from center and resolution)
|
|
756
|
+
|
|
757
|
+
Most of the listed properties are already available on raw OpenLayers objects (see code in parentheses above).
|
|
758
|
+
However, those OpenLayers properties require manual work for synchronization, whereas the new properties are reactive (and can be watched, for example, using `useReactiveSnapshot()`).
|
|
698
759
|
|
|
699
|
-
|
|
760
|
+
A new method `setScale()` has also been added to the model.
|
|
700
761
|
|
|
701
762
|
### Patch Changes
|
|
702
763
|
|
|
@@ -710,44 +771,45 @@
|
|
|
710
771
|
|
|
711
772
|
- 2502050: Introduce union types and `type` attributes for layers. This allows TypeScript narrowing for layers and determining a layer's type.
|
|
712
773
|
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
774
|
+
The `Layer` and `Sublayer` types for layers remain, but are unions of the corresponding concrete layer types now.
|
|
775
|
+
The layer type `LayerBase` has been removed and is replaced by `AnyLayerType`
|
|
776
|
+
to clarify that this type represents a union of all types of layer (currently `Layer` and `Sublayer`).
|
|
777
|
+
|
|
778
|
+
Two type guards have been implemented that allow to check if a layer instance is a `Layer` or `Sublayer`: `isLayer()`and `isSublayer()` (see example below).
|
|
716
779
|
|
|
717
|
-
|
|
780
|
+
The following `type` attribute values have been implemented at the layers:
|
|
718
781
|
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
- WMTSLayer: `wmts`
|
|
782
|
+
- SimpleLayer: `simple`
|
|
783
|
+
- WMSLayer: `wms`
|
|
784
|
+
- WMSSubLayer: `wms-sublayer`
|
|
785
|
+
- WMTSLayer: `wmts`
|
|
724
786
|
|
|
725
|
-
|
|
787
|
+
Example of usage:
|
|
726
788
|
|
|
727
|
-
|
|
728
|
-
|
|
789
|
+
```ts
|
|
790
|
+
import { AnyLayer, WMTSLayer, isSublayer } from "@open-pioneer/map";
|
|
729
791
|
|
|
730
|
-
|
|
731
|
-
|
|
792
|
+
export class ExampleClass {
|
|
793
|
+
//...
|
|
732
794
|
|
|
733
|
-
|
|
734
|
-
|
|
795
|
+
exampleFunction(layer: AnyLayer) {
|
|
796
|
+
// prop may be a layer of any type
|
|
735
797
|
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
798
|
+
// use layers type attribute to check layer type
|
|
799
|
+
if (layer.type === "wmts") {
|
|
800
|
+
layer.matrixSet; // prop only available on WMTSLayer
|
|
739
801
|
|
|
740
|
-
|
|
741
|
-
|
|
802
|
+
const wmtsLayer: WMTSLayer = layer; // type of layer is now narrowed to `WMTSLayer`
|
|
803
|
+
}
|
|
742
804
|
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
}
|
|
805
|
+
// use new type guard to check if layer is a Sublayer
|
|
806
|
+
if (isSublayer(layer)) {
|
|
807
|
+
// type of layer is now narrowed to `WMSSublayer` (as it is currently the only type of Sublayer existing)
|
|
808
|
+
layer.parentLayer; // prop only available on Sublayers
|
|
809
|
+
}
|
|
749
810
|
}
|
|
750
|
-
|
|
811
|
+
}
|
|
812
|
+
```
|
|
751
813
|
|
|
752
814
|
- 310800c: Switch from `peerDependencies` to normal `dependencies`. Peer dependencies have some usability problems when used at scale.
|
|
753
815
|
|
|
@@ -757,7 +819,7 @@
|
|
|
757
819
|
- 583f1d6: The `mapId` or `map` properties are now optional on individual components.
|
|
758
820
|
You can use the `DefaultMapProvider` to configure an implicit default value.
|
|
759
821
|
|
|
760
|
-
|
|
822
|
+
Note that configuring _neither_ a default _nor_ an explicit `map` or `mapId` will trigger a runtime error.
|
|
761
823
|
|
|
762
824
|
- 583f1d6: All UI components in this project now accept the `mapId` (a `string`) _or_ the `map` (a `MapModel`) directly.
|
|
763
825
|
- 397d617: Reimplement computation of map anchor positioning using new css props.
|
|
@@ -767,20 +829,20 @@
|
|
|
767
829
|
- 583f1d6: The new component `DefaultMapProvider` allows you to configure the _default map_ for its children.
|
|
768
830
|
If `DefaultMapProvider` is used, you can omit the explicit `mapId` (or `map`) property on the individual UI components.
|
|
769
831
|
|
|
770
|
-
|
|
832
|
+
For many applications, `DefaultMapProvider` can be used to surround all (or most of) the application's UI.
|
|
771
833
|
|
|
772
|
-
|
|
834
|
+
Example:
|
|
773
835
|
|
|
774
|
-
|
|
775
|
-
|
|
836
|
+
```tsx
|
|
837
|
+
import { DefaultMapProvider } from "@open-pioneer/map";
|
|
776
838
|
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
839
|
+
<DefaultMapProvider mapId={MAP_ID}>
|
|
840
|
+
{/* no need to repeat the map id in this subtree, unless you want to use a different one */}
|
|
841
|
+
<MapContainer />
|
|
842
|
+
<Toc />
|
|
843
|
+
<ComplexChild />
|
|
844
|
+
</DefaultMapProvider>;
|
|
845
|
+
```
|
|
784
846
|
|
|
785
847
|
- 397d617: Move attribution of OL map according to the map view's padding.
|
|
786
848
|
|
|
@@ -797,36 +859,36 @@
|
|
|
797
859
|
|
|
798
860
|
- 0d51d2f: Change how map anchors are positioned in the DOM.
|
|
799
861
|
|
|
800
|
-
|
|
862
|
+
Previously, map anchor divs were children of the OpenLayers map viewport:
|
|
801
863
|
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
864
|
+
```
|
|
865
|
+
.map-container
|
|
866
|
+
└── .ol-viewport
|
|
867
|
+
└── .ol-overlaycontainer-stopevent
|
|
868
|
+
└── .map-anchors
|
|
869
|
+
└── .map-anchor
|
|
870
|
+
└── ... children ...
|
|
871
|
+
```
|
|
810
872
|
|
|
811
|
-
|
|
812
|
-
|
|
873
|
+
This interfered with browser event handling, especially if the map anchor's content was interactive.
|
|
874
|
+
The workarounds to stop events from map-anchors to bubble into the map caused surprising behavior (e.g. https://github.com/open-pioneer/trails-openlayers-base-packages/issues/312).
|
|
813
875
|
|
|
814
|
-
|
|
876
|
+
Now, the DOM looks like this:
|
|
815
877
|
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
878
|
+
```
|
|
879
|
+
.map-container
|
|
880
|
+
├── .map-anchors
|
|
881
|
+
│ └── .map-anchor
|
|
882
|
+
│ └── ... children ...
|
|
883
|
+
└── .ol-viewport
|
|
884
|
+
```
|
|
823
885
|
|
|
824
|
-
|
|
886
|
+
Which means that the map-anchors are no longer children of the map.
|
|
825
887
|
|
|
826
|
-
|
|
888
|
+
You may have to update your custom styles if you relied on the previous DOM hierarchy.
|
|
827
889
|
|
|
828
|
-
|
|
829
|
-
|
|
890
|
+
The `MapAnchor`'s prop `stopEvents` has been deleted as it is no longer needed.
|
|
891
|
+
Browser events happening inside a map anchor or its children will no longer affect the map.
|
|
830
892
|
|
|
831
893
|
### Patch Changes
|
|
832
894
|
|