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