@emuanalytics/flow-rdf-core 4.0.11 → 4.0.13
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/dist/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/lib/map/flow-core-map.mjs +36 -12
- package/dist/lib/map/plugins/annotations/annotation.events.mjs +9 -0
- package/dist/lib/map/plugins/annotations/annotation.plugin.mjs +134 -2
- package/dist/lib/map/plugins/data-join.plugin.mjs +42 -1
- package/dist/lib/map/plugins/export/export.plugin.mjs +14 -0
- package/dist/lib/map/plugins/export/map-exporter.mjs +37 -34
- package/dist/lib/map/plugins/hover-effect.plugin.mjs +9 -0
- package/dist/lib/map/plugins/index.d.mts +742 -33
- package/dist/lib/map/plugins/index.d.ts +742 -33
- package/dist/lib/map/plugins/index.mjs +0 -1
- package/dist/lib/map/plugins/keyboard-shortcut-manager.mjs +6 -0
- package/dist/lib/map/plugins/map-plugin-base.mjs +5 -0
- package/dist/lib/map/plugins/plugin-manager.mjs +97 -0
- package/dist/lib/map/plugins/popup.plugin.mjs +12 -0
- package/dist/lib/map/plugins/selection/selection.events.mjs +3 -0
- package/dist/lib/map/plugins/selection/selection.plugin.mjs +75 -4
- package/dist/lib/map/plugins/selection/source-selection.mjs +50 -2
- package/dist/lib/map/support/map-events.mjs +19 -0
- package/dist/lib/map/support/map-popup.mjs +30 -5
- package/dist/lib/utils/index.d.mts +1 -0
- package/dist/lib/utils/index.d.ts +1 -0
- package/dist/package.json.mjs +1 -1
- package/dist/shared/{flow-rdf-core.08156446.d.mts → flow-rdf-core.3da5bd49.d.mts} +448 -17
- package/dist/shared/{flow-rdf-core.08156446.d.ts → flow-rdf-core.3da5bd49.d.ts} +448 -17
- package/package.json +4 -3
- package/styles/flow-rdf-core.css +1 -1
- package/dist/lib/map/plugins/url-sync.plugin.mjs +0 -55
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { a3 as MapEvent, a0 as FlowCoreMap, Y as MapSourceIdentifier, av as MapFeatureId, aw as MapPluginBase, ax as PluginManager, a5 as MapSourceEvent, a4 as MapMouseEvent, Z as MapFeatureStream, ay as PartialBy, T as MapAnimationOptions, a7 as MapStyleChangeEvent, M as MapStyleSpecification, S as StateStore, a9 as MapPopupOptions, aa as MapPopup, W as MapFeatureIdentifier } from '../../../shared/flow-rdf-core.
|
|
2
|
-
export { aC as EventHandlers, aB as PluginConstructor, aA as PluginEventsType, az as PluginOptionsType } from '../../../shared/flow-rdf-core.
|
|
1
|
+
import { a3 as MapEvent, a0 as FlowCoreMap, Y as MapSourceIdentifier, av as MapFeatureId, aw as MapPluginBase, ax as PluginManager, a5 as MapSourceEvent, a4 as MapMouseEvent, Z as MapFeatureStream, ay as PartialBy, T as MapAnimationOptions, a7 as MapStyleChangeEvent, M as MapStyleSpecification, S as StateStore, a9 as MapPopupOptions, aa as MapPopup, W as MapFeatureIdentifier } from '../../../shared/flow-rdf-core.3da5bd49.mjs';
|
|
2
|
+
export { aC as EventHandlers, aB as PluginConstructor, aA as PluginEventsType, az as PluginOptionsType } from '../../../shared/flow-rdf-core.3da5bd49.mjs';
|
|
3
3
|
import { F as Func } from '../../../shared/flow-rdf-core.63162669.mjs';
|
|
4
4
|
import 'eventemitter3';
|
|
5
5
|
import 'lit-html';
|
|
@@ -7,8 +7,13 @@ import '@emuanalytics/flow-engine-client';
|
|
|
7
7
|
import 'mobx-utils';
|
|
8
8
|
import '@emuanalytics/maplibre-gl';
|
|
9
9
|
|
|
10
|
+
/** Annotation mode. */
|
|
10
11
|
type AnnotationMode = 'creating' | 'editing' | 'idle';
|
|
12
|
+
/** Type of annotation feature. */
|
|
11
13
|
type AnnotationFeatureType = 'Polygon' | 'Circle' | 'LineString' | 'Point';
|
|
14
|
+
/**
|
|
15
|
+
* Style properties for an annotation feature. A default style can by configured when calling {@link FlowCoreMap.usePlugin}.
|
|
16
|
+
*/
|
|
12
17
|
interface AnnotationStyle {
|
|
13
18
|
labelSize: number;
|
|
14
19
|
labelColor: string;
|
|
@@ -26,41 +31,71 @@ interface AnnotationStyle {
|
|
|
26
31
|
selectionWidth: number;
|
|
27
32
|
hoverStrokeColor: string;
|
|
28
33
|
}
|
|
34
|
+
/**
|
|
35
|
+
* Properties common to all annotation features.
|
|
36
|
+
*/
|
|
29
37
|
interface AnnotationFeatureProps extends AnnotationStyle {
|
|
38
|
+
/** Unique ID for the annotation */
|
|
30
39
|
id: string;
|
|
31
40
|
name: string;
|
|
32
41
|
type: AnnotationFeatureType;
|
|
33
42
|
selected: boolean;
|
|
34
43
|
visible: boolean;
|
|
35
44
|
labelText: string;
|
|
45
|
+
/** Additional properties */
|
|
36
46
|
[extras: string]: any;
|
|
37
47
|
}
|
|
38
|
-
|
|
39
|
-
style: AnnotationStyle;
|
|
40
|
-
}
|
|
48
|
+
/** A map annotation as a GeoJSON feature. */
|
|
41
49
|
type AnnotationFeature = GeoJSON.Feature<GeoJSON.Geometry, Partial<AnnotationFeatureProps>> & {
|
|
42
50
|
id: string;
|
|
43
51
|
};
|
|
44
52
|
|
|
53
|
+
/** Event types emitted by the {@link AnnotationPlugin} */
|
|
45
54
|
interface AnnotationEventTypes {
|
|
46
55
|
annotationStateChanged: (event: AnnotationEvent) => void;
|
|
47
56
|
}
|
|
57
|
+
/** Names of event types emitted by the {@link AnnotationPlugin} */
|
|
48
58
|
type AnnotationEventType = keyof AnnotationEventTypes;
|
|
59
|
+
/**
|
|
60
|
+
* Event data associated with an {@link AnnotationPlugin} event.
|
|
61
|
+
*
|
|
62
|
+
* :::info
|
|
63
|
+
* The active feature is the feature currently being created or edited (if any).
|
|
64
|
+
* :::
|
|
65
|
+
*/
|
|
49
66
|
interface AnnotationEventData {
|
|
67
|
+
/** Current set of annotation features. */
|
|
50
68
|
features: AnnotationFeature[];
|
|
69
|
+
/** Current annotation mode. */
|
|
51
70
|
mode: AnnotationMode;
|
|
71
|
+
/** Whether the last operation can be undo. Use this flag to enable/disable undo UI. */
|
|
52
72
|
canUndo: boolean;
|
|
73
|
+
/** Whether an operation can be redone. Use this flag to enable/disable redo UI. */
|
|
53
74
|
canRedo: boolean;
|
|
75
|
+
/** Currently active annotation feature ID. */
|
|
54
76
|
activeFeatureId: string | null;
|
|
77
|
+
/** Currently active annotation feature type. */
|
|
55
78
|
activeFeatureType: AnnotationFeatureType | null;
|
|
56
79
|
}
|
|
80
|
+
/**
|
|
81
|
+
* Event emitted by the {@link AnnotationPlugin} when the annotation state changes.
|
|
82
|
+
*/
|
|
57
83
|
declare class AnnotationEvent extends MapEvent<AnnotationEventType> {
|
|
84
|
+
/** Current annotation mode (`creating`, `editing`, `idle`). */
|
|
58
85
|
mode: AnnotationMode;
|
|
86
|
+
/** Whether the last operation can be undo. Use this flag to enable/disable undo UI. */
|
|
59
87
|
canUndo: boolean;
|
|
88
|
+
/** Whether an operation can be redone. Use this flag to enable/disable redo UI. */
|
|
60
89
|
canRedo: boolean;
|
|
90
|
+
/** Currently active annotation feature ID. */
|
|
61
91
|
activeFeatureId: string | null;
|
|
92
|
+
/** Currently active annotation feature type. */
|
|
62
93
|
activeFeatureType: AnnotationFeatureType | null;
|
|
94
|
+
/** Current set of annotation features. */
|
|
63
95
|
features: AnnotationFeature[];
|
|
96
|
+
/**
|
|
97
|
+
* Constructs a new AnnotationEvent instance.
|
|
98
|
+
*/
|
|
64
99
|
constructor(type: AnnotationEventType, map: FlowCoreMap, data: AnnotationEventData);
|
|
65
100
|
}
|
|
66
101
|
|
|
@@ -68,50 +103,332 @@ type SelectionEventType = 'selectionChanged';
|
|
|
68
103
|
interface SelectionEventTypes {
|
|
69
104
|
selectionChanged: (event: SelectionEvent) => void;
|
|
70
105
|
}
|
|
106
|
+
/**
|
|
107
|
+
* This event is emitted by the {@link SelectionPlugin} when selection state changes following user interaction.
|
|
108
|
+
*
|
|
109
|
+
* The event detail indicates which map data source has changed and its currently selected features.
|
|
110
|
+
* An empty `features` array indicates that no features are selected.
|
|
111
|
+
*
|
|
112
|
+
* @group Events
|
|
113
|
+
*/
|
|
71
114
|
declare class SelectionEvent extends MapEvent<SelectionEventType> implements MapSourceIdentifier {
|
|
115
|
+
/** Map data source ID */
|
|
72
116
|
source: string;
|
|
117
|
+
/** Map data source layer ID */
|
|
73
118
|
sourceLayer?: string;
|
|
119
|
+
/** Array of selected feature IDs */
|
|
74
120
|
features: MapFeatureId[];
|
|
75
121
|
constructor(type: SelectionEventType, map: FlowCoreMap, sourceIdentifier: MapSourceIdentifier, features: MapFeatureId[]);
|
|
76
122
|
}
|
|
77
123
|
|
|
78
124
|
type SelectionMode = 'single' | 'multi' | 'none';
|
|
125
|
+
/**
|
|
126
|
+
* Selection options for a map data source passed to {@link SelectionPlugin.enableSelection}. See {@link SelectionPlugin} for more details.
|
|
127
|
+
*/
|
|
79
128
|
interface SelectionOptions {
|
|
129
|
+
/** Clear mode for selection */
|
|
80
130
|
clear?: boolean | 'group';
|
|
131
|
+
/** Selection group ID - applies when `clear` mode is set to `group`. */
|
|
81
132
|
group?: string;
|
|
133
|
+
/** Selection mode: `single` or `multi` */
|
|
82
134
|
mode: SelectionMode;
|
|
135
|
+
/** ID of popup to display when selecting a feature. */
|
|
83
136
|
popup?: string;
|
|
137
|
+
/** Reactive state property to bind to selection state. */
|
|
84
138
|
selectionState?: string;
|
|
139
|
+
/** Map data source layer. Note that this is only required for custom vector data sources. */
|
|
85
140
|
sourceLayer?: string;
|
|
86
141
|
}
|
|
142
|
+
/**
|
|
143
|
+
* @noInheritDoc
|
|
144
|
+
*
|
|
145
|
+
* This plugin provides selection functionality allowing a user to select features by clicking the map. It supports single or multiple feature selection, and can
|
|
146
|
+
* automatically display popups for selected features.
|
|
147
|
+
*
|
|
148
|
+
* Selection state is a property of a map data source (not a map layer) and is tracked independently for each map data source. To enable selection and configure options for a particular map data source call the {@link enableSelection} method of the plugin.
|
|
149
|
+
*
|
|
150
|
+
* **NOTE** To support selection the `featureId` property or the map data source must be defined to allow features to be uniquely identified.
|
|
151
|
+
*
|
|
152
|
+
* ## Selection Modes
|
|
153
|
+
*
|
|
154
|
+
* Selection modes can be configured individually for each of a map's data sources. The following modes are supported:
|
|
155
|
+
*
|
|
156
|
+
* | Mode | Behavior |
|
|
157
|
+
* |------|-------------|
|
|
158
|
+
* | `none` | Feature selection is disabled for the map data source. (default)|
|
|
159
|
+
* |`single`| Only one feature of the data source can be selected at a time. Selecting a new feature by clicking will deselect the previously selected feature. |
|
|
160
|
+
* |`multi` | Multiple features of the data source can be selected. A simple click on a feature will clear the selection state and select the clicked feature. A Ctrl/Alt/Meta click will toggle the selection state of the clicked feature, adding to or removing the feature from the selection.|
|
|
161
|
+
*
|
|
162
|
+
* ## Clearing selection
|
|
163
|
+
*
|
|
164
|
+
* Although selection state is handled independently for each map data source, it is possible to configure a map data source to clear its selection following user interaction with map features from another map data source.
|
|
165
|
+
* By default, clicking an empty area of the map will deselect all features from all map data sources. Set the {@link SelectionOptions.clear} option to configure how selection state behaves when interacting with other map data sources:
|
|
166
|
+
*
|
|
167
|
+
* | Clear mode | Behavior |
|
|
168
|
+
* |------------|-------------|
|
|
169
|
+
* | `false`| Selection state is preserved when selecting features of another map data source. (default) |
|
|
170
|
+
* | `true` | Selection state is cleared when clicking a feature of another map data source. This option is useful for configuring mutually exclusive selection between map data sources.|
|
|
171
|
+
* | `group`| Selection state is cleared when clicking a feature of another map data source with the same `group` property. This option is useful for configuring mutually exclusive selection between a subset of data sources on a map.|
|
|
172
|
+
*
|
|
173
|
+
* ## Binding Feature Selection to Reactive State
|
|
174
|
+
*
|
|
175
|
+
* Setting the {@link SelectionOptions.selectionState} property when configuring selection for a map data source binds the selection state to a reactive state property.
|
|
176
|
+
* The binding is two-way: selecting features on the map will update the bound reactive property and updating the reactive property will update the selection state on the map.
|
|
177
|
+
*
|
|
178
|
+
* Referencing the bound reactive property in a reactive query or computed property will trigger a reactive update when the user selects or deselects features on the map.
|
|
179
|
+
*
|
|
180
|
+
* | Selection mode | Reactive binding |
|
|
181
|
+
* |------------|-------------|
|
|
182
|
+
* | `single` | Single map feature ID (string or number) |
|
|
183
|
+
* | `multi` | Array of map feature IDs |
|
|
184
|
+
*
|
|
185
|
+
* ## Selection events
|
|
186
|
+
*
|
|
187
|
+
* In addition to supporting binding to reactive state, the plugin also emits a `selectionChanged` event when selection state changes for a map data source.
|
|
188
|
+
*
|
|
189
|
+
* ## Popups
|
|
190
|
+
*
|
|
191
|
+
* Specify the ID of a popup to associate with a map data source using the {@link SelectionOptions.popup} property. The popup will be displayed automatically when a feature is selected by the user
|
|
192
|
+
* and closed when the feature is deselected. Currently, setting the selection state programmatically will not trigger the popup to be displayed.
|
|
193
|
+
*
|
|
194
|
+
* See (@link PopupPlugin} for more details of how to define and register popups.
|
|
195
|
+
*
|
|
196
|
+
*
|
|
197
|
+
* ## Styling selection state
|
|
198
|
+
*
|
|
199
|
+
* A selected feature has the `selected` feature state property set to `true`. This can be referenced in map layer style expressions to apply selection effects.
|
|
200
|
+
*
|
|
201
|
+
* @example
|
|
202
|
+
* Apply a selection effect using the `circleStrokeWidth` property:
|
|
203
|
+
```js{14}
|
|
204
|
+
import { SelectionPlugin } from '@emuanalytics/flow-rdf-core/plugins';
|
|
205
|
+
const selectionPlugin = map.getPlugin(SelectionPlugin);
|
|
206
|
+
|
|
207
|
+
selectionPlugin.enableSelection("airquality_source", {
|
|
208
|
+
mode: "multi"
|
|
209
|
+
});
|
|
210
|
+
|
|
211
|
+
const circleLayer = new MapLayer({
|
|
212
|
+
id: "circle-layer",
|
|
213
|
+
type: "circle",
|
|
214
|
+
source: "airquality_source",
|
|
215
|
+
style: layerStyle("circle")
|
|
216
|
+
.circleColor(expr(`@no2 ? from-palette('YlOrRd', @no2, 0, 100) : gray`))
|
|
217
|
+
.circleStrokeWidth(expr("@@selected ? 5 : 0"))
|
|
218
|
+
.circleRadius(expr(`@no2 ? @no2 / 5 : 5`))
|
|
219
|
+
.build()
|
|
220
|
+
});
|
|
221
|
+
```
|
|
222
|
+
* @example
|
|
223
|
+
* Add an event listener for `selectionChanged` events:
|
|
224
|
+
```js
|
|
225
|
+
selectionPlugin.on('selectionChanged', (e) => {
|
|
226
|
+
console.log(`Selection changed for source: ${e.source}`);
|
|
227
|
+
console.log(`Selected features: ${e.features.join(',')}`);
|
|
228
|
+
});
|
|
229
|
+
```
|
|
230
|
+
*/
|
|
87
231
|
declare class SelectionPlugin extends MapPluginBase<undefined, SelectionEventTypes> {
|
|
88
232
|
private _sourceSelections;
|
|
89
233
|
private _enablePopups;
|
|
90
234
|
readonly name = "SelectionPlugin";
|
|
235
|
+
/**
|
|
236
|
+
* Constructs a new SelectionPlugin instance. This is called automatically when the plugin is added to a {@link FlowCoreMap} instance
|
|
237
|
+
* using {@link FlowCoreMap.usePlugin} method.
|
|
238
|
+
*
|
|
239
|
+
* @param pluginManager The plugin manager instance associated with the map
|
|
240
|
+
*/
|
|
91
241
|
constructor(pluginManager: PluginManager);
|
|
242
|
+
/**
|
|
243
|
+
* Clears selection for the specified map data source.
|
|
244
|
+
*
|
|
245
|
+
* @param source Map data source ID
|
|
246
|
+
*/
|
|
92
247
|
clearSelection(source: string): void;
|
|
248
|
+
/**
|
|
249
|
+
* Deselect the specified feature or features.
|
|
250
|
+
*
|
|
251
|
+
* @param source Map data source ID
|
|
252
|
+
* @param features feature ID or array of feature IDs to deselect
|
|
253
|
+
*/
|
|
93
254
|
deselectFeatures(source: string, features: MapFeatureId | MapFeatureId[]): void;
|
|
255
|
+
/**
|
|
256
|
+
* @internal
|
|
257
|
+
*/
|
|
94
258
|
destroy(): void;
|
|
259
|
+
/**
|
|
260
|
+
* Disable selection for the specified map data source.
|
|
261
|
+
*
|
|
262
|
+
* @param source Map data source ID
|
|
263
|
+
*/
|
|
95
264
|
disableSelection(source: string): void;
|
|
265
|
+
/**
|
|
266
|
+
* Enable selection support for the specified map data source.
|
|
267
|
+
*
|
|
268
|
+
* @param source Map data source ID
|
|
269
|
+
* @param options Selection options
|
|
270
|
+
*/
|
|
96
271
|
enableSelection(source: string, options: SelectionOptions): void;
|
|
272
|
+
/**
|
|
273
|
+
* @internal
|
|
274
|
+
*/
|
|
97
275
|
handleBeforeSourceRemoved(event: MapSourceEvent): void;
|
|
276
|
+
/**
|
|
277
|
+
* @internal
|
|
278
|
+
*/
|
|
98
279
|
handleClick(event: MapMouseEvent): void;
|
|
99
|
-
|
|
280
|
+
/**
|
|
281
|
+
* Select the specified feature or features.
|
|
282
|
+
*
|
|
283
|
+
* Use this method to programmatically select features on a map data source. This will update the selection state and trigger display of
|
|
284
|
+
* any associated popups if configured.
|
|
285
|
+
*
|
|
286
|
+
* @param source Map data source ID
|
|
287
|
+
* @param features feature ID or array of feature IDs to select
|
|
288
|
+
* @param showPopups Show popups for the selected features. Defaults to `true`.
|
|
289
|
+
*/
|
|
290
|
+
selectFeatures(source: string, features: MapFeatureId | MapFeatureId[], showPopups?: boolean): void;
|
|
291
|
+
/**
|
|
292
|
+
* Gets the selected feature IDs for the specified map data source.
|
|
293
|
+
*
|
|
294
|
+
* @param source map data source ID
|
|
295
|
+
* @returns Array of selected feature IDs
|
|
296
|
+
*/
|
|
100
297
|
selectedFeatureIds(source: string): MapFeatureId[];
|
|
298
|
+
/**
|
|
299
|
+
* Returns a {@link MapFeatureStream} of selected features for the specified map data source.
|
|
300
|
+
*
|
|
301
|
+
* Subscribe to the stream to receive updates when the selection state changes and receive full feature property data
|
|
302
|
+
* from the map.
|
|
303
|
+
*
|
|
304
|
+
* @param source Map data source ID
|
|
305
|
+
* @returns {@link MapFeatureStream} of selected features
|
|
306
|
+
*/
|
|
101
307
|
selectedFeatureStream(source: string): MapFeatureStream;
|
|
102
|
-
|
|
308
|
+
/**
|
|
309
|
+
* Enable display of popups when a feature is clicked and an associated popup has been registered with the map data source.
|
|
310
|
+
* See {@link PopupPlugin} for more details of how to define and register popups.
|
|
311
|
+
*
|
|
312
|
+
* Note that popups are enabled by default.
|
|
313
|
+
*/
|
|
314
|
+
enablePopups(): void;
|
|
315
|
+
/**
|
|
316
|
+
* Disable display of popups when a feature is clicked. This will also close any currently open popups.
|
|
317
|
+
*/
|
|
103
318
|
disablePopups(): void;
|
|
104
319
|
}
|
|
105
320
|
|
|
321
|
+
/**
|
|
322
|
+
* An {@link AnnotationPlugin} operation to support undo/redo functionality. Annotation operations are
|
|
323
|
+
* stored on the AnnotationPlugin's undo/redo stacks. State to undo and redo operations is captured as closures
|
|
324
|
+
* over the `do` and `undo` functions.
|
|
325
|
+
*/
|
|
106
326
|
interface AnnotationOperation {
|
|
327
|
+
/** Function to perform the operation. */
|
|
107
328
|
do: Func;
|
|
329
|
+
/** Function to undo the operation. */
|
|
108
330
|
undo: Func;
|
|
109
331
|
}
|
|
332
|
+
/**
|
|
333
|
+
* AnnotationPlugin configuration options specified when adding the plugin to a {@link FlowCoreMap} instance.
|
|
334
|
+
*/
|
|
110
335
|
interface AnnotationPluginOptions {
|
|
336
|
+
/**
|
|
337
|
+
* Set to `true` to enable user interaction to create and edit annotation features. Set to `false` to display
|
|
338
|
+
* fixed programmatically-created annotations.
|
|
339
|
+
*/
|
|
111
340
|
interactive?: boolean;
|
|
341
|
+
/** Default style to apply to annotation features. */
|
|
112
342
|
defaultStyle?: Partial<AnnotationStyle>;
|
|
343
|
+
/** Selection options passed to {@link SelectionPlugin.enableSelection} when adding annotation layers to the map. */
|
|
113
344
|
selectionOptions?: SelectionOptions;
|
|
114
345
|
}
|
|
346
|
+
/**
|
|
347
|
+
* @noInheritDoc
|
|
348
|
+
*
|
|
349
|
+
* This plugin provides functionality to allow a user to draw annotations on the map. It supports creating and editing:
|
|
350
|
+
*
|
|
351
|
+
* - Polygons
|
|
352
|
+
* - Circles with geographic center and radius
|
|
353
|
+
* - Line strings
|
|
354
|
+
* - Points with geographic center and pixel radius
|
|
355
|
+
*
|
|
356
|
+
* ### Data Model
|
|
357
|
+
*
|
|
358
|
+
* The {@link AnnotationPlugin} maintains a set of annotation features stored as GeoJSON features. In addition to the feature geometry,
|
|
359
|
+
* each feature has properties that define:
|
|
360
|
+
*
|
|
361
|
+
* - The feature's style (fill color, stroke color, label color, label text etc.)
|
|
362
|
+
* - The feature's visibility and selection state
|
|
363
|
+
*
|
|
364
|
+
* Methods are provided by the plugin to add features, remove features, and update feature properties. To respond to changes initiated by the user,
|
|
365
|
+
* the `annotationStateChanged` event is emitted by the plugin. See {@link AnnotationEvent} for full details.
|
|
366
|
+
*
|
|
367
|
+
* ## User interaction
|
|
368
|
+
*
|
|
369
|
+
* Th plugin handles all mouse events to allow a user to create and edit annotation features.
|
|
370
|
+
*
|
|
371
|
+
* Call {@link AnnotationPlugin.createdFeature} to start drawing a new feature. This is typically done when a user selects an annotation type to add from a palette or menu.
|
|
372
|
+
*
|
|
373
|
+
* Double-clicking by the user on an existing annotation feature on the map will initiate editing. To initiate editing programmatically, call {@link AnnotationPlugin.editFeature}.
|
|
374
|
+
*
|
|
375
|
+
* To programmatically delete an annotation feature, call {@link AnnotationPlugin.deleteFeature}.
|
|
376
|
+
*
|
|
377
|
+
* :::info
|
|
378
|
+
* The plugin registers keyboard shortcuts to commit editing, delete a feature, undo/redo an operation, and create a new feature.
|
|
379
|
+
* See {@link AnnotationPlugin.initialize} for details.
|
|
380
|
+
* :::
|
|
381
|
+
*
|
|
382
|
+
* ## Undo/Redo
|
|
383
|
+
*
|
|
384
|
+
* The plugin maintains undo/redo stacks of user-initiated operations to support unlimited undo and redo. Changes to the availability of undo/redo are
|
|
385
|
+
* communicated via the `annotationStateChanged` event to allow UI elements such as toolbar buttons to be enabled or disabled.
|
|
386
|
+
*
|
|
387
|
+
* ## Selection Support
|
|
388
|
+
*
|
|
389
|
+
* The plugin integrates with the {@link SelectionPlugin} to allow annotation features to be selected programmatically and to respond to selection of
|
|
390
|
+
* annotation features by the user.
|
|
391
|
+
*
|
|
392
|
+
* When registering the plugin, specify the {@link AnnotationPluginOptions.selectionOptions} parameter to enable selection
|
|
393
|
+
* of features from the annotation plugin's internal MapDataSource. Use the `mode`, `clear` and `group` selection options to determine how selection of annotation features
|
|
394
|
+
* interacts with selection of other map features. Specify the `selectionState` option to configure two-way binding of annotation selection with reactive state (see{@link SelectionPlugin}).
|
|
395
|
+
*
|
|
396
|
+
* Note that in creation or editing mode, the {@link AnnotationPlugin} disables hover styling
|
|
397
|
+
* and selection of other non-annotation map features.
|
|
398
|
+
*
|
|
399
|
+
* :::warning
|
|
400
|
+
* The SelectionPlugin must be registered by calling {@link FlowCoreMap.usePlugin} before the AnnotationPlugin is registered.
|
|
401
|
+
* :::
|
|
402
|
+
*
|
|
403
|
+
* ## How it works
|
|
404
|
+
*
|
|
405
|
+
* The plugin adds an internally-managed {@link MapDataSource} to expose its set of GeoJSON annotation features to the map. {@link MapLayer}s are also added to the map
|
|
406
|
+
* to display annotation feature fills, strokes and labels. Features are styled using MapLayer style rules referencing feature properties such as `strokeColor` and `labelText`.
|
|
407
|
+
*
|
|
408
|
+
* The plugin integrates [mapbox-gl-draw](https://github.com/mapbox/mapbox-gl-draw) to
|
|
409
|
+
* provide user interaction for creating and editing features.
|
|
410
|
+
*
|
|
411
|
+
* :::warning
|
|
412
|
+
* The plugin is not responsible for persistence of annotation features. It is up to the application to persist and reload features as required by handling
|
|
413
|
+
* the `annotationStateChanged` event to respond to changes and to call {@link AnnotationPlugin.setFeatures} to reload features.
|
|
414
|
+
* :::
|
|
415
|
+
*
|
|
416
|
+
* @example
|
|
417
|
+
* Initialize the plugin:
|
|
418
|
+
```js
|
|
419
|
+
// Selection plugin is required for annotation plugin to operate
|
|
420
|
+
map.usePlugin(SelectionPlugin);
|
|
421
|
+
|
|
422
|
+
// Initialize the annotation plugin
|
|
423
|
+
const annotationPlugin = map.usePlugin(AnnotationPlugin, { selectionOptions: { mode: 'single' } });
|
|
424
|
+
|
|
425
|
+
// Add handler for annotation state changes
|
|
426
|
+
annotationPlugin.on('annotationStateChanged', (event) => {
|
|
427
|
+
console.log('Annotation state changed', event);
|
|
428
|
+
});
|
|
429
|
+
```
|
|
430
|
+
*
|
|
431
|
+
*/
|
|
115
432
|
declare class AnnotationPlugin extends MapPluginBase<AnnotationPluginOptions, AnnotationEventTypes> {
|
|
116
433
|
readonly name = "AnnotationPlugin";
|
|
117
434
|
private static _defaultOptions;
|
|
@@ -126,29 +443,161 @@ declare class AnnotationPlugin extends MapPluginBase<AnnotationPluginOptions, An
|
|
|
126
443
|
private _annotationDataSource;
|
|
127
444
|
private _drawControl;
|
|
128
445
|
private _removeKeyboardShortcuts;
|
|
446
|
+
/**
|
|
447
|
+
* Constructs a new AnnotationPlugin instance. This is called automatically when the plugin is added to a {@link FlowCoreMap} instance
|
|
448
|
+
* using {@link FlowCoreMap.usePlugin} method. {@link AnnotationPluginOptions} should be specified when calling `usePlugin`.
|
|
449
|
+
*
|
|
450
|
+
* @param pluginManager The plugin manager instance associated with the map
|
|
451
|
+
* @param options Plugin-specific options
|
|
452
|
+
*/
|
|
129
453
|
constructor(pluginManager: PluginManager, options?: AnnotationPluginOptions);
|
|
454
|
+
/**
|
|
455
|
+
* @internal
|
|
456
|
+
*
|
|
457
|
+
* Called by {@link PluginManager} when the plugin is added to the map.
|
|
458
|
+
*/
|
|
130
459
|
initialize(): void;
|
|
460
|
+
/**
|
|
461
|
+
* @internal
|
|
462
|
+
*
|
|
463
|
+
* Called by {@link PluginManager} when the plugin is destroyed.
|
|
464
|
+
*/
|
|
131
465
|
destroy(): void;
|
|
466
|
+
/**
|
|
467
|
+
* Clears all map annotations and reset the plugin state.
|
|
468
|
+
*
|
|
469
|
+
* @returns The annotation plugin instance to allow method chaining
|
|
470
|
+
*/
|
|
132
471
|
clear(): this;
|
|
472
|
+
/**
|
|
473
|
+
* Undoes the last operation on the operation stack and pushes it to the redo stack.
|
|
474
|
+
*
|
|
475
|
+
* @returns The annotation plugin instance to allow method chaining
|
|
476
|
+
*/
|
|
133
477
|
undo(): this;
|
|
134
478
|
/**
|
|
135
|
-
*
|
|
479
|
+
* Redoes the last operation on the redo stack.
|
|
480
|
+
*
|
|
481
|
+
* @returns The annotation plugin instance to allow method chaining
|
|
136
482
|
*/
|
|
137
483
|
redo(): this;
|
|
484
|
+
/**
|
|
485
|
+
* Returns the specified annotation feature by id.
|
|
486
|
+
*
|
|
487
|
+
* @param featureId
|
|
488
|
+
*/
|
|
138
489
|
getFeature(featureId: string): AnnotationFeature;
|
|
490
|
+
/**
|
|
491
|
+
* Returns all annotation features.
|
|
492
|
+
*/
|
|
139
493
|
getFeatures(): AnnotationFeature[];
|
|
494
|
+
/**
|
|
495
|
+
* Sets all annotation features in bulk.
|
|
496
|
+
*
|
|
497
|
+
* This operation can be undone.
|
|
498
|
+
*
|
|
499
|
+
* @param features Array of annotation features to set
|
|
500
|
+
* @returns The annotation plugin instance to allow method chaining
|
|
501
|
+
*/
|
|
140
502
|
setFeatures(features: Array<PartialBy<AnnotationFeature, 'id'>>): this;
|
|
503
|
+
/**
|
|
504
|
+
* Adds an annotation feature. Note that `id` is set automatically and is available from the returned feature.
|
|
505
|
+
*
|
|
506
|
+
* This operation can be undone.
|
|
507
|
+
*
|
|
508
|
+
* @param feature The annotation feature to add
|
|
509
|
+
* @returns The added annotation feature with `id` set
|
|
510
|
+
*/
|
|
141
511
|
addFeature(feature: PartialBy<AnnotationFeature, 'id'>): AnnotationFeature;
|
|
512
|
+
/**
|
|
513
|
+
* Deletes the specified annotation feature.
|
|
514
|
+
*
|
|
515
|
+
* This operation can be undone.
|
|
516
|
+
*
|
|
517
|
+
* @param featureId The id of the annotation feature to delete
|
|
518
|
+
* @returns The annotation plugin instance to allow method chaining
|
|
519
|
+
*
|
|
520
|
+
*/
|
|
142
521
|
deleteFeature(featureId: string): this;
|
|
522
|
+
/**
|
|
523
|
+
* Starts drawing a new annotation feature. The plugin handles subsequent mouse events to allow the user to complete the feature.
|
|
524
|
+
*
|
|
525
|
+
* Creation mode is exited when the user has completed drawing the feature or {@link AnnotationPlugin.commit} is called. Call {@link AnnotationPlugin.cancel}
|
|
526
|
+
* to programmatically exit edit mode.
|
|
527
|
+
*
|
|
528
|
+
* @param featureType The type of the feature to create
|
|
529
|
+
*/
|
|
143
530
|
createFeature(featureType: AnnotationFeatureType): void;
|
|
531
|
+
/**
|
|
532
|
+
* Starts editing the specified annotation feature. The plugin handles subsequent mouse events to allow the user to move the feature
|
|
533
|
+
* and modify the feature geometry.
|
|
534
|
+
*
|
|
535
|
+
* Editing mode is exited when the user deselect the feature or {@link AnnotationPlugin.commit} is called. Call {@link AnnotationPlugin.cancel}
|
|
536
|
+
* to programmatically exit edit mode.
|
|
537
|
+
*
|
|
538
|
+
* @param featureId The id of the annotation feature to edit
|
|
539
|
+
*/
|
|
144
540
|
editFeature(featureId: string): void;
|
|
541
|
+
/**
|
|
542
|
+
* Zoom the map to the specified annotation feature.
|
|
543
|
+
*
|
|
544
|
+
* @param featureId
|
|
545
|
+
* @param animationOptions
|
|
546
|
+
* @returns The annotation plugin instance to allow method chaining
|
|
547
|
+
*/
|
|
145
548
|
zoomToFeature(featureId: string, animationOptions: MapAnimationOptions): this;
|
|
549
|
+
/**
|
|
550
|
+
* Sets a property of the specified annotation feature.
|
|
551
|
+
*
|
|
552
|
+
* @param featureId ID of annotation feature
|
|
553
|
+
* @param property Property name to set
|
|
554
|
+
* @param value Property value to set
|
|
555
|
+
* @returns The annotation plugin instance to allow method chaining
|
|
556
|
+
*/
|
|
146
557
|
setFeatureProperty(featureId: string, property: string, value: any): this;
|
|
558
|
+
/**
|
|
559
|
+
* Sets multiple properties of the specified annotation feature.
|
|
560
|
+
*
|
|
561
|
+
* @param featureId ID of annotation feature
|
|
562
|
+
* @param properties Map of name/value pairs
|
|
563
|
+
* @returns The annotation plugin instance to allow method chaining
|
|
564
|
+
*/
|
|
147
565
|
setFeatureProperties(featureId: string, properties: Record<string, any>): this;
|
|
566
|
+
/**
|
|
567
|
+
* Commits the current creation or editing operation.
|
|
568
|
+
*
|
|
569
|
+
* This operation can be undone.
|
|
570
|
+
*
|
|
571
|
+
* @returns The annotation plugin instance to allow method chaining
|
|
572
|
+
*/
|
|
148
573
|
commit(): this;
|
|
574
|
+
/**
|
|
575
|
+
* Cancel the current creation or editing operation.
|
|
576
|
+
*
|
|
577
|
+
* This operation **cannot** be undone.
|
|
578
|
+
*
|
|
579
|
+
* @returns The annotation plugin instance to allow method chaining
|
|
580
|
+
*/
|
|
149
581
|
cancel(): this;
|
|
582
|
+
/**
|
|
583
|
+
* Render the current state of the annotation features to the map.
|
|
584
|
+
*
|
|
585
|
+
* Note that rendering is performed automatically after creation or editing operations.
|
|
586
|
+
*
|
|
587
|
+
* @returns The annotation plugin instance to allow method chaining
|
|
588
|
+
*/
|
|
150
589
|
render(): this;
|
|
590
|
+
/**
|
|
591
|
+
* @internal
|
|
592
|
+
*
|
|
593
|
+
* MapPluginBase event handler
|
|
594
|
+
*/
|
|
151
595
|
handleDblClick?(event: MapMouseEvent): void;
|
|
596
|
+
/**
|
|
597
|
+
* @internal
|
|
598
|
+
*
|
|
599
|
+
* MapPluginBase event handler
|
|
600
|
+
*/
|
|
152
601
|
handleBeforeStyleChanged(event: MapStyleChangeEvent): MapStyleSpecification;
|
|
153
602
|
private startDrawing;
|
|
154
603
|
private endDrawing;
|
|
@@ -166,90 +615,286 @@ declare class AnnotationPlugin extends MapPluginBase<AnnotationPluginOptions, An
|
|
|
166
615
|
}
|
|
167
616
|
|
|
168
617
|
interface DataJoinOptions {
|
|
169
|
-
/** Set to `true` to clear feature state before applying data join. */
|
|
618
|
+
/** Set to `true` to clear feature state before applying the data join. */
|
|
170
619
|
clear?: boolean;
|
|
620
|
+
/** Data to join with map data source features. A datasetId, URL, reactive expression or an array of data objects. */
|
|
171
621
|
data: string | any[];
|
|
172
|
-
/** Data join foreign key.
|
|
622
|
+
/** Data join foreign key. The name of a property in the joined data to use as the unique identifier for the join.*/
|
|
173
623
|
foreignKey: string;
|
|
624
|
+
/** Additional parameters to include when querying data to join. */
|
|
174
625
|
parameters?: DataJoinParameter[];
|
|
626
|
+
/** Map data source ID to which the data join is applied. */
|
|
175
627
|
source: string;
|
|
628
|
+
/** Map data source layer. This is only required for custom vector data sources. */
|
|
176
629
|
sourceLayer?: string;
|
|
177
630
|
}
|
|
631
|
+
/**
|
|
632
|
+
* A data join parameter that is added to a dataset query when querying data to join.
|
|
633
|
+
*/
|
|
178
634
|
interface DataJoinParameter {
|
|
635
|
+
/** Parameter name */
|
|
179
636
|
name: string;
|
|
637
|
+
/** Set to `true` if parameter must be non-null */
|
|
180
638
|
required?: boolean;
|
|
639
|
+
/** Parameter value: reactive expression, literal number or boolean */
|
|
181
640
|
value: string | number | boolean;
|
|
182
641
|
}
|
|
642
|
+
/**
|
|
643
|
+
* @internal
|
|
644
|
+
*
|
|
645
|
+
* Implementation of of a single data join.
|
|
646
|
+
*/
|
|
183
647
|
declare class DataJoin {
|
|
184
648
|
readonly id: string;
|
|
185
649
|
readonly map: FlowCoreMap;
|
|
186
650
|
private static defaultOptions;
|
|
651
|
+
private options;
|
|
187
652
|
private autorunDisposer;
|
|
653
|
+
/** Reactive expression that returns array of data objects to be joined. */
|
|
188
654
|
private dataExpression;
|
|
189
|
-
|
|
655
|
+
/** Parameter key/value pairs where value is a reactive expression */
|
|
190
656
|
private parameterExpressions;
|
|
191
657
|
constructor(id: string, map: FlowCoreMap, options: DataJoinOptions);
|
|
192
658
|
get source(): string;
|
|
659
|
+
/**
|
|
660
|
+
* Starts the reactive data join. Changes to the reactive data expression or reactive parameters will trigger new data to be obtained
|
|
661
|
+
* and joined with the map data source features.
|
|
662
|
+
*/
|
|
193
663
|
start(): void;
|
|
664
|
+
/**
|
|
665
|
+
* Stops the reactive data join.
|
|
666
|
+
*/
|
|
194
667
|
stop(): void;
|
|
668
|
+
/** Performs the data join given an array of data objects. */
|
|
195
669
|
private doDataJoin;
|
|
670
|
+
/**
|
|
671
|
+
* Load data to join using the specified datasetId or a custom URL.
|
|
672
|
+
*
|
|
673
|
+
* Reactive parameters are added to the query as name/value querystring parameters.
|
|
674
|
+
*/
|
|
196
675
|
private loadData;
|
|
197
676
|
}
|
|
198
677
|
/**
|
|
199
|
-
*
|
|
678
|
+
* @noInheritDoc
|
|
679
|
+
*
|
|
680
|
+
* This plugin provides data join functionality that allows additional non-geospatial data to be set as feature state on map features. This data can be accessed
|
|
681
|
+
* in {@link MapLayer} style expressions to style features based on the joined data.
|
|
682
|
+
*
|
|
683
|
+
* Typically, data joins are used to join dynamic data to static map features. This allows feature geometry to be queried once and then properties
|
|
684
|
+
* dynamically updated in-place. For example, consider a map displaying county polygons. The polygons can be loaded once and then styled to display different metrics
|
|
685
|
+
* using color or other style properties by applying a data join.
|
|
686
|
+
*
|
|
687
|
+
*
|
|
688
|
+
* ## Data sources
|
|
689
|
+
*
|
|
690
|
+
* The data to join is specified using the `data` property of the data join options when adding a data join.
|
|
691
|
+
* The supported sources of data match those supported by {@link MapDataSource}:
|
|
692
|
+
*
|
|
693
|
+
* | Data source | Description |
|
|
694
|
+
* |--------------|---------------|
|
|
695
|
+
* | Dataset ID | Specify a dataset ID to load data from a Flo.w dataset. Any parameters configured for the data join will be included with the dataset query. |
|
|
696
|
+
* | URL | Specify a URL to load data from a custom API. Any parameters configured for the data join will be included with the `GET` request as query string name/value pairs. |
|
|
697
|
+
* | Reactive expression | Specify a reactive expression that returns an array of data objects. This is typically a reactive query or a computed derivation of a reactive query. |
|
|
698
|
+
* | Array of data objects | Specify a literal array of data objects to join. |
|
|
699
|
+
*
|
|
700
|
+
*
|
|
701
|
+
* ## Performing the join
|
|
702
|
+
*
|
|
703
|
+
* When loaded, non-geospatial data is joined with the {@link MapDataSource}'s features by matching the primary key of map features with a foreign key in the joined data. It is analogous to performing a LEFT JOIN in SQL.
|
|
704
|
+
* Use the `foreignKey` property of the data join options to specify the foreign key in the joined dataset. The primary key of the {@link MapDataSource}'s features is specified using the `featureId` property of the {@link MapDataSource}.
|
|
705
|
+
*
|
|
706
|
+
* Specify the `clear` property to determine the meaning of 'missing' features in the data to join. If set to `true`, joined data is cleared from all features before applying new joined data. This option is typically used when the joined data
|
|
707
|
+
* represents the complete current state and missing features are interpreted as 'no data'. If set to `false`, existing joined data is not cleared before applying new joined data. This option is typically used when the joined data represents a
|
|
708
|
+
* set of changes to apply to existing data as an update.
|
|
709
|
+
*
|
|
710
|
+
* The data join is performed reactively. This means that any changes to the data to join or the parameters used to query the data will automatically trigger a new data join.
|
|
711
|
+
*
|
|
712
|
+
* ## Accessing joined data
|
|
713
|
+
*
|
|
714
|
+
* Joined data is set using {@link FlowCoreMap.setFeatureState} on the {@link MapDataSource}'s features. It can be accessed using the `@@` notation in {@link MapLayer} style expressions
|
|
715
|
+
* to retrieve feature state. To access a property in a style expression use the following format: `@@<dataJoinID>.<propertyName>`.
|
|
716
|
+
* Joined data for a particular feature may be null if no data for that feature is present in the joined dataset. Use the ternary operator to supply a 'no data' value in style expressions.
|
|
717
|
+
*
|
|
718
|
+
* ## Restrictions
|
|
719
|
+
*
|
|
720
|
+
* The joined data is applied to a map data source using feature state properties. These properties can only be used to set 'paint-type' style properties including
|
|
721
|
+
* color, width, opacity, radius, etc. They cannot be used to set 'layout-type' style properties such as text labels that trigger layout processing.
|
|
722
|
+
*
|
|
723
|
+
* Joined data cannot be used in {@link MapLayer} filter expressions for the same reason. Filtering features requires map layout processing to be performed.
|
|
724
|
+
*
|
|
725
|
+
* See [Mapbox GL JS documentation](https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#feature-state) for more information.
|
|
726
|
+
*
|
|
727
|
+
* @example
|
|
728
|
+
* Add a data join to a {@link MapDataSource}:
|
|
729
|
+
```js
|
|
730
|
+
import { DataJoinPlugin } from '@emuanalytics/flow-rdf-core/plugins';
|
|
731
|
+
|
|
732
|
+
const dataJoinPlugin = map.getPlugin(DataJoinPlugin);
|
|
733
|
+
|
|
734
|
+
dataJoinPlugin.addDataJoin('dataJoin1', {
|
|
735
|
+
data: '$queries.dataQuery.results',
|
|
736
|
+
source: 'cities-source',
|
|
737
|
+
foreignKey: 'cityId',
|
|
738
|
+
clear: true
|
|
739
|
+
});
|
|
740
|
+
```
|
|
741
|
+
*
|
|
742
|
+
* @example
|
|
743
|
+
* Access joined data in a {@link MapLayer} style expression:
|
|
744
|
+
```js{8}
|
|
745
|
+
const circleLayer = new MapLayer({
|
|
746
|
+
id: "circle-layer",
|
|
747
|
+
type: "circle",
|
|
748
|
+
source: "cities-source",
|
|
749
|
+
style: layerStyle("circle")
|
|
750
|
+
.circleColor(expr(`@no2 ? from-palette('YlOrRd', @no2, 0, 100) : gray`))
|
|
751
|
+
.circleStrokeWidth(expr("@@selected ? 5 : 0"))
|
|
752
|
+
.circleRadius(expr(`@@dataJoin1.totalPopulation ? @@dataJoin1.totalPopulation / 1000 : 5`))
|
|
753
|
+
.build()
|
|
754
|
+
});
|
|
755
|
+
```
|
|
756
|
+
*
|
|
200
757
|
*
|
|
201
|
-
* @noInheritDoc
|
|
202
758
|
*
|
|
203
759
|
*/
|
|
204
760
|
declare class DataJoinPlugin extends MapPluginBase {
|
|
205
761
|
private _joins;
|
|
206
762
|
readonly name = "DataJoinPlugin";
|
|
763
|
+
/**
|
|
764
|
+
* Constructs a new DataJoinPlugin instance. This is called automatically when the plugin is added to a {@link FlowCoreMap} instance
|
|
765
|
+
* using {@link FlowCoreMap.usePlugin} method.
|
|
766
|
+
*
|
|
767
|
+
* @param pluginManager The plugin manager instance associated with the map
|
|
768
|
+
*/
|
|
207
769
|
constructor(pluginManager: PluginManager);
|
|
770
|
+
/**
|
|
771
|
+
* Add a new data join to the map using the specified options.
|
|
772
|
+
*
|
|
773
|
+
* The joined data can be accessed in map layer style expressions using the specified data join ID.
|
|
774
|
+
*
|
|
775
|
+
* @param id Data join ID
|
|
776
|
+
* @param options Data join options
|
|
777
|
+
*/
|
|
208
778
|
addDataJoin(id: string, options: DataJoinOptions): void;
|
|
779
|
+
/**
|
|
780
|
+
* @internal
|
|
781
|
+
*
|
|
782
|
+
* Used internally to set the {@link StateStore} to use for retrieving reactive properties.
|
|
783
|
+
*/
|
|
209
784
|
bindState(state: StateStore): void;
|
|
785
|
+
/** @internal */
|
|
210
786
|
destroy(): void;
|
|
787
|
+
/** @internal */
|
|
211
788
|
handleSourceRemoved(event: MapSourceEvent): void;
|
|
789
|
+
/**
|
|
790
|
+
* Removes the specified data join from the map.
|
|
791
|
+
*
|
|
792
|
+
* @param id Data join ID
|
|
793
|
+
*/
|
|
212
794
|
removeDataJoin(id: string): void;
|
|
213
795
|
}
|
|
214
796
|
|
|
215
797
|
/** Callback function to indicate map export overlay drawing has finished. */
|
|
216
798
|
type DrawOverlayCallback = (error: Error) => void;
|
|
217
|
-
/**
|
|
799
|
+
/**
|
|
800
|
+
* Function to draw an overlay on an exported map.
|
|
801
|
+
*
|
|
802
|
+
* If provided to {@link ExportPlugin.exportMap}, this function will be called after the map image has been rendered to the canvas.
|
|
803
|
+
* The function should draw the desired overlay on the canvas using the provided `ctx` (CanvasRenderingContext2D) and call
|
|
804
|
+
* the `callback` function when finished. Call the `callback` function with an error to indicate that drawing has failed.
|
|
805
|
+
*
|
|
806
|
+
* @param ctx The canvas context to draw on
|
|
807
|
+
* @param width The width of the canvas in pixels
|
|
808
|
+
* @param height The height of the canvas in pixels
|
|
809
|
+
* @param dpmm The resolution of the canvas in dots per mm
|
|
810
|
+
* @param callback Callback to be called when drawing is finished
|
|
811
|
+
*
|
|
812
|
+
*/
|
|
218
813
|
type DrawOverlayFn = (ctx: CanvasRenderingContext2D, width: number, height: number, dpmm: number, callback: DrawOverlayCallback) => void;
|
|
219
814
|
/**
|
|
220
|
-
* Options for
|
|
815
|
+
* Options for {@link ExportPlugin.exportMap}.
|
|
221
816
|
*/
|
|
222
817
|
interface FlowMapExportOptions {
|
|
223
|
-
/** Name of exported file. */
|
|
818
|
+
/** Name of the exported file. */
|
|
224
819
|
name: string;
|
|
225
|
-
/** Width of exported map in millimeters. */
|
|
820
|
+
/** Width of the exported map in millimeters. */
|
|
226
821
|
width: number;
|
|
227
|
-
/** Height of exported map in millimeters. */
|
|
822
|
+
/** Height of the exported map in millimeters. */
|
|
228
823
|
height: number;
|
|
229
|
-
/** Resolution of exported map
|
|
824
|
+
/** Resolution of the exported map (dots per mm). */
|
|
230
825
|
dpmm: number;
|
|
231
|
-
/** Format of exported map. */
|
|
826
|
+
/** Format of the exported map. Note that only `png` is currently supported. */
|
|
232
827
|
format: 'png' | 'pdf';
|
|
233
828
|
/**
|
|
234
|
-
* Geographic bounds of area to export ([left, bottom, right top]).
|
|
829
|
+
* Geographic bounds of the area to export ([left, bottom, right top]).
|
|
235
830
|
*
|
|
236
831
|
* This should be a subregion of the full map area.
|
|
832
|
+
*
|
|
833
|
+
* Note that `bounds` is ignored when exporting a map in globe projection at zoom levels below 4.
|
|
237
834
|
*/
|
|
238
835
|
bounds?: number[];
|
|
239
|
-
/**
|
|
836
|
+
/** Background color as CSS color value - this only applies when exporting a map in globe projection. (default = 'white') */
|
|
837
|
+
background?: string;
|
|
838
|
+
/** Optionally provide a function to draw an overlay over the map image before exporting to file. */
|
|
240
839
|
drawOverlayFn?: DrawOverlayFn;
|
|
241
840
|
}
|
|
242
841
|
|
|
842
|
+
/**
|
|
843
|
+
* Note: ExportPlugin does not expose any options.
|
|
844
|
+
*/
|
|
243
845
|
interface ExportPluginOptions {
|
|
244
846
|
}
|
|
847
|
+
/**
|
|
848
|
+
* @noInheritDoc
|
|
849
|
+
*
|
|
850
|
+
* This plugin provides map export functionality. It currently allows exporting the map in PNG format only.
|
|
851
|
+
*
|
|
852
|
+
* @example
|
|
853
|
+
* Export the map to a PNG file:
|
|
854
|
+
* ```js
|
|
855
|
+
// Get export plugin
|
|
856
|
+
const exportPlugin = map.getPlugin(ExportPlugin);
|
|
857
|
+
if (!exportPlugin) {
|
|
858
|
+
throw new Error('Export plugin not registered');
|
|
859
|
+
}
|
|
860
|
+
|
|
861
|
+
// Get visible bounds of map
|
|
862
|
+
const bounds = map.getVisibleBounds();
|
|
863
|
+
|
|
864
|
+
// Fixed export at A4 landscape (297x210mm) at 6dpmm
|
|
865
|
+
await exportPlugin.exportMap({
|
|
866
|
+
name: `map-${DateTime.now().toFormat('yyyyMMddHHmmss')}`,
|
|
867
|
+
format: 'png',
|
|
868
|
+
width: 297,
|
|
869
|
+
height: 210,
|
|
870
|
+
dpmm: 6,
|
|
871
|
+
bounds
|
|
872
|
+
});
|
|
873
|
+
```
|
|
874
|
+
*
|
|
875
|
+
*/
|
|
245
876
|
declare class ExportPlugin extends MapPluginBase<ExportPluginOptions> {
|
|
246
877
|
readonly name = "ExportPlugin";
|
|
878
|
+
/**
|
|
879
|
+
* Constructs an instance of the ExportPlugin. Note that this is called automatically
|
|
880
|
+
* when the plugin is registered with a map.
|
|
881
|
+
*
|
|
882
|
+
* @param pluginManager
|
|
883
|
+
*/
|
|
247
884
|
constructor(pluginManager: PluginManager);
|
|
885
|
+
/**
|
|
886
|
+
* Export the map an image file. The map will be exported in the format specified in the options.
|
|
887
|
+
*
|
|
888
|
+
* Note that only PNG format is supported currently.
|
|
889
|
+
*
|
|
890
|
+
* @param options Export options
|
|
891
|
+
* @returns Promise that resolves to the filename of the exported map image when the export has finished
|
|
892
|
+
*/
|
|
248
893
|
exportMap(options: FlowMapExportOptions): Promise<string>;
|
|
249
894
|
}
|
|
250
895
|
|
|
251
896
|
/**
|
|
252
|
-
* This plugin
|
|
897
|
+
* This plugin adds hover styling support to map features.
|
|
253
898
|
*
|
|
254
899
|
* When active, features that are hovered over will have their `hover`
|
|
255
900
|
* feature state property set to `true`. This can be referenced in map layer
|
|
@@ -278,33 +923,97 @@ declare class ExportPlugin extends MapPluginBase<ExportPluginOptions> {
|
|
|
278
923
|
declare class HoverEffectPlugin extends MapPluginBase {
|
|
279
924
|
private hoveredFeature;
|
|
280
925
|
readonly name = "HoverEffectPlugin";
|
|
926
|
+
/**
|
|
927
|
+
* Constructs a new HoverEffectPlugin instance. This is called automatically when the plugin is added to a {@link FlowCoreMap} instance
|
|
928
|
+
* using {@link FlowCoreMap.usePlugin} method.
|
|
929
|
+
*
|
|
930
|
+
* @param pluginManager The plugin manager instance associated with the map
|
|
931
|
+
*/
|
|
281
932
|
constructor(pluginManager: PluginManager);
|
|
933
|
+
/** @internal MapPluginBase handler */
|
|
282
934
|
handleMouseMove(event: MapMouseEvent): void;
|
|
935
|
+
/** @internal MapPluginBase handler */
|
|
283
936
|
handleMouseOut(event: MapEvent): void;
|
|
937
|
+
/** @internal MapPluginBase handler */
|
|
284
938
|
handleSetExclusivePlugin(exclusivePlugins: MapPluginBase[]): void;
|
|
285
939
|
private compareFeatures;
|
|
286
940
|
private clearHover;
|
|
287
941
|
}
|
|
288
942
|
|
|
943
|
+
/**
|
|
944
|
+
* @noInheritDoc
|
|
945
|
+
*
|
|
946
|
+
* This plugin provides support for displaying popups on the map. It integrates with the SelectionPlugin to automatically display popups when
|
|
947
|
+
* map features are selected by the user. It also provides methods to open and close popups programmatically.
|
|
948
|
+
*
|
|
949
|
+
*
|
|
950
|
+
* @example
|
|
951
|
+
* Register a popup using a [lit-html](https://lit.dev/docs/v1/lit-html/introduction/) template and attach to feature selection:
|
|
952
|
+
```js
|
|
953
|
+
import { html } from '@emuanalytics/flow-rdf-core';
|
|
954
|
+
import { PopupPlugin, SelectionPlugin } from '@emuanalytics/flow-rdf-core/plugins';
|
|
955
|
+
|
|
956
|
+
const popupPlugin = map.getPlugin(PopupPlugin);
|
|
957
|
+
const selectionPlugin = map.getPlugin(SelectionPlugin);
|
|
958
|
+
|
|
959
|
+
popupPlugin.registerPopup('airqualityPopup', {
|
|
960
|
+
content: (feature) => html`
|
|
961
|
+
<h2>Air Quality</h2>
|
|
962
|
+
<ul>
|
|
963
|
+
<li>Name: ${feature?.properties.name}</li>
|
|
964
|
+
<li>NO2: ${feature?.properties.no2} ppm</li>
|
|
965
|
+
</ul>
|
|
966
|
+
`
|
|
967
|
+
});
|
|
968
|
+
|
|
969
|
+
selectionPlugin.enableSelection('airquality_source', {
|
|
970
|
+
mode: 'single',
|
|
971
|
+
selectionState: 'selectedFeatureId',
|
|
972
|
+
popup: 'airqualityPopup'
|
|
973
|
+
});
|
|
974
|
+
|
|
975
|
+
```
|
|
976
|
+
* See {@link MapPopup} for more information about defining and rendering popups.
|
|
977
|
+
*/
|
|
289
978
|
declare class PopupPlugin extends MapPluginBase {
|
|
290
979
|
private _popupTemplates;
|
|
291
980
|
private _popups;
|
|
292
981
|
readonly name = "PopupPlugin";
|
|
982
|
+
/**
|
|
983
|
+
* Constructs a new PopupPlugin instance. This is called automatically when the plugin is added to a {@link FlowCoreMap} instance
|
|
984
|
+
* using {@link FlowCoreMap.usePlugin} method.
|
|
985
|
+
*
|
|
986
|
+
* @param pluginManager The plugin manager instance associated with the map
|
|
987
|
+
*/
|
|
293
988
|
constructor(pluginManager: PluginManager);
|
|
294
989
|
registerPopup(id: string, options: MapPopupOptions): void;
|
|
990
|
+
/**
|
|
991
|
+
* Opens a popup following a mouse click event.
|
|
992
|
+
*
|
|
993
|
+
* @param id The ID of the registered popup to display
|
|
994
|
+
* @param event The mouse event associated with the popup
|
|
995
|
+
* @return The opened {@link MapPopup} instance
|
|
996
|
+
*/
|
|
295
997
|
openPopup(id: string, event: MapMouseEvent): MapPopup;
|
|
998
|
+
/**
|
|
999
|
+
* Opens a popup at the specified location. If `feature` is provided, the popup
|
|
1000
|
+
* will have access to the corresponding map feature's properties for rendering
|
|
1001
|
+
* the popup content.
|
|
1002
|
+
*
|
|
1003
|
+
* @param id The ID of the registered popup to display
|
|
1004
|
+
* @param lngLat The coordinate at which to display the popup
|
|
1005
|
+
* @param feature Feature to associate with the popup
|
|
1006
|
+
* @return The opened {@link MapPopup} instance
|
|
1007
|
+
*/
|
|
296
1008
|
openPopup(id: string, lngLat: [number, number], feature?: MapFeatureIdentifier): MapPopup;
|
|
1009
|
+
/**
|
|
1010
|
+
* Closes all open popups.
|
|
1011
|
+
*/
|
|
297
1012
|
closeAllPopups(): void;
|
|
1013
|
+
/**
|
|
1014
|
+
* Closes open popups for the specified {@link MapDataSource}s.
|
|
1015
|
+
*/
|
|
298
1016
|
closePopupsForSources(sources: string | string[]): void;
|
|
299
1017
|
}
|
|
300
1018
|
|
|
301
|
-
|
|
302
|
-
readonly name = "UrlSyncPlugin";
|
|
303
|
-
constructor(pluginManager: PluginManager);
|
|
304
|
-
initialize(): void;
|
|
305
|
-
handleMoveEnd(event: MapEvent): void;
|
|
306
|
-
private mapStateToHash;
|
|
307
|
-
private hashToMapState;
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
export { AnnotationEvent, type AnnotationEventData, type AnnotationEventType, type AnnotationEventTypes, type AnnotationFeature, type AnnotationFeatureProps, type AnnotationFeatureType, type AnnotationMode, type AnnotationOperation, AnnotationPlugin, type AnnotationPluginOptions, type AnnotationStyle, type AnnotationsServiceConfig, DataJoin, type DataJoinOptions, DataJoinPlugin, type DrawOverlayCallback, type DrawOverlayFn, ExportPlugin, type ExportPluginOptions, type FlowMapExportOptions, HoverEffectPlugin, MapPluginBase, PluginManager, PopupPlugin, SelectionEvent, type SelectionEventType, type SelectionEventTypes, type SelectionMode, type SelectionOptions, SelectionPlugin, UrlSyncPlugin };
|
|
1019
|
+
export { AnnotationEvent, type AnnotationEventData, type AnnotationEventType, type AnnotationEventTypes, type AnnotationFeature, type AnnotationFeatureProps, type AnnotationFeatureType, type AnnotationMode, type AnnotationOperation, AnnotationPlugin, type AnnotationPluginOptions, type AnnotationStyle, DataJoin, type DataJoinOptions, DataJoinPlugin, type DrawOverlayCallback, type DrawOverlayFn, ExportPlugin, type ExportPluginOptions, type FlowMapExportOptions, HoverEffectPlugin, MapPluginBase, PluginManager, PopupPlugin, SelectionEvent, type SelectionEventType, type SelectionEventTypes, type SelectionMode, type SelectionOptions, SelectionPlugin };
|