-
-
Notifications
You must be signed in to change notification settings - Fork 643
/
events.ts
751 lines (710 loc) · 27.6 KB
/
events.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
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
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
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
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
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
import {Event} from '../util/evented';
import {DOM} from '../util/dom';
import Point from '@mapbox/point-geometry';
import {extend} from '../util/util';
import type {MapGeoJSONFeature} from '../util/vectortile_to_geojson';
import type {Map} from './map';
import type {LngLat} from '../geo/lng_lat';
import type {SourceSpecification} from '@maplibre/maplibre-gl-style-spec';
/**
* An event from the mouse relevant to a specific layer.
*
* @group Event Related
*/
export type MapLayerMouseEvent = MapMouseEvent & { features?: MapGeoJSONFeature[] };
/**
* An event from a touch device relevat to a specific layer.
*
* @group Event Related
*/
export type MapLayerTouchEvent = MapTouchEvent & { features?: MapGeoJSONFeature[] };
/**
* The source event data type
*/
export type MapSourceDataType = 'content' | 'metadata' | 'visibility' | 'idle';
/**
* `MapLayerEventType` - a mapping between the event name and the event.
* **Note:** These events are compatible with the optional `layerId` parameter.
* If `layerId` is included as the second argument in {@link Map#on}, the event listener will fire only when the
* event action contains a visible portion of the specified layer.
* The following example can be used for all the events.
*
* @group Event Related
* @example
* ```ts
* // Initialize the map
* let map = new Map({ // map options });
* // Set an event listener for a specific layer
* map.on('the-event-name', 'poi-label', (e) => {
* console.log('An event has occurred on a visible portion of the poi-label layer');
* });
* ```
*/
export type MapLayerEventType = {
/**
* Fired when a pointing device (usually a mouse) is pressed and released contains a visible portion of the specified layer.
*
* @see [Measure distances](https://maplibre.org/maplibre-gl-js/docs/examples/measure/)
* @see [Center the map on a clicked symbol](https://maplibre.org/maplibre-gl-js/docs/examples/center-on-symbol/)
*/
click: MapLayerMouseEvent;
/**
* Fired when a pointing device (usually a mouse) is pressed and released twice contains a visible portion of the specified layer.
*
* **Note:** Under normal conditions, this event will be preceded by two `click` events.
*/
dblclick: MapLayerMouseEvent;
/**
* Fired when a pointing device (usually a mouse) is pressed while inside a visible portion of the specified layer.
* @see [Create a draggable point](https://maplibre.org/maplibre-gl-js/docs/examples/drag-a-point/)
*/
mousedown: MapLayerMouseEvent;
/**
* Fired when a pointing device (usually a mouse) is released while inside a visible portion of the specified layer.
* @see [Create a draggable point](https://maplibre.org/maplibre-gl-js/docs/examples/drag-a-point/)
*/
mouseup: MapLayerMouseEvent;
/**
* Fired when a pointing device (usually a mouse) is moved while the cursor is inside a visible portion of the specified layer.
* As you move the cursor across the layer, the event will fire every time the cursor changes position within that layer.
*
* @see [Get coordinates of the mouse pointer](https://maplibre.org/maplibre-gl-js/docs/examples/mouse-position/)
* @see [Highlight features under the mouse pointer](https://maplibre.org/maplibre-gl-js/docs/examples/hover-styles/)
* @see [Display a popup on over](https://maplibre.org/maplibre-gl-js/docs/examples/popup-on-hover/)
*/
mousemove: MapLayerMouseEvent;
/**
* Fired when a pointing device (usually a mouse) enters a visible portion of a specified layer from
* outside that layer or outside the map canvas.
*
* @see [Center the map on a clicked symbol](https://maplibre.org/maplibre-gl-js/docs/examples/center-on-symbol/)
* @see [Display a popup on click](https://maplibre.org/maplibre-gl-js/docs/examples/popup-on-click/)
*/
mouseenter: MapLayerMouseEvent;
/**
* Fired when a pointing device (usually a mouse) leaves a visible portion of a specified layer, or leaves
* the map canvas.
*
* @see [Highlight features under the mouse pointer](https://maplibre.org/maplibre-gl-js/docs/examples/hover-styles/)
* @see [Display a popup on click](https://maplibre.org/maplibre-gl-js/docs/examples/popup-on-click/)
*/
mouseleave: MapLayerMouseEvent;
/**
* Fired when a pointing device (usually a mouse) is moved inside a visible portion of the specified layer.
*
* @see [Get coordinates of the mouse pointer](https://maplibre.org/maplibre-gl-js/docs/examples/mouse-position/)
* @see [Highlight features under the mouse pointer](https://maplibre.org/maplibre-gl-js/docs/examples/hover-styles/)
* @see [Display a popup on hover](https://maplibre.org/maplibre-gl-js/docs/examples/popup-on-hover/)
*/
mouseover: MapLayerMouseEvent;
/**
* Fired when a point device (usually a mouse) leaves the visible portion of the specified layer.
*/
mouseout: MapLayerMouseEvent;
/**
* Fired when the right button of the mouse is clicked or the context menu key is pressed within visible portion of the specified layer.
*/
contextmenu: MapLayerMouseEvent;
/**
* Fired when a [`touchstart`](https://developer.mozilla.org/en-US/docs/Web/Events/touchstart) event occurs within the visible portion of the specified layer.
* @see [Create a draggable point](https://maplibre.org/maplibre-gl-js/docs/examples/drag-a-point/)
*/
touchstart: MapLayerTouchEvent;
/**
* Fired when a [`touchend`](https://developer.mozilla.org/en-US/docs/Web/Events/touchend) event occurs within the visible portion of the specified layer.
* @see [Create a draggable point](https://maplibre.org/maplibre-gl-js/docs/examples/drag-a-point/)
*/
touchend: MapLayerTouchEvent;
/**
* Fired when a [`touchstart`](https://developer.mozilla.org/en-US/docs/Web/Events/touchstart) event occurs within the visible portion of the specified layer.
* @see [Create a draggable point](https://maplibre.org/maplibre-gl-js/docs/examples/drag-a-point/)
*/
touchcancel: MapLayerTouchEvent;
};
/**
* `MapEventType` - a mapping between the event name and the event value.
* These events are used with the {@link Map#on} method.
* When using a `layerId` with {@link Map#on} method, please refer to {@link MapLayerEventType}.
* The following example can be used for all the events.
*
* @group Event Related
* @example
* ```ts
* // Initialize the map
* let map = new Map({ // map options });
* // Set an event listener
* map.on('the-event-name', () => {
* console.log('An event has occurred!');
* });
* ```
*/
export type MapEventType = {
/**
* Fired when an error occurs. This is GL JS's primary error reporting
* mechanism. We use an event instead of `throw` to better accommodate
* asynchronous operations. If no listeners are bound to the `error` event, the
* error will be printed to the console.
*/
error: ErrorEvent;
/**
* Fired immediately after all necessary resources have been downloaded
* and the first visually complete rendering of the map has occurred.
*
* @see [Draw GeoJSON points](https://maplibre.org/maplibre-gl-js/docs/examples/geojson-markers/)
* @see [Add live realtime data](https://maplibre.org/maplibre-gl-js/docs/examples/live-geojson/)
* @see [Animate a point](https://maplibre.org/maplibre-gl-js/docs/examples/animate-point-along-line/)
*/
load: MapLibreEvent;
/**
* Fired after the last frame rendered before the map enters an
* "idle" state:
*
* - No camera transitions are in progress
* - All currently requested tiles have loaded
* - All fade/transition animations have completed
*/
idle: MapLibreEvent;
/**
* Fired immediately after the map has been removed with {@link Map#remove}.
*/
remove: MapLibreEvent;
/**
* Fired whenever the map is drawn to the screen, as the result of
*
* - a change to the map's position, zoom, pitch, or bearing
* - a change to the map's style
* - a change to a GeoJSON source
* - the loading of a vector tile, GeoJSON file, glyph, or sprite
*/
render: MapLibreEvent;
/**
* Fired immediately after the map has been resized.
*/
resize: MapLibreEvent;
/**
* Fired when the WebGL context is lost.
*/
webglcontextlost: MapContextEvent;
/**
* Fired when the WebGL context is restored.
*/
webglcontextrestored: MapContextEvent;
/**
* Fired when any map data (style, source, tile, etc) begins loading or
* changing asynchronously. All `dataloading` events are followed by a `data`,
* `dataabort` or `error` event.
*/
dataloading: MapDataEvent;
/**
* Fired when any map data loads or changes. See {@link MapDataEvent} for more information.
* @see [Display HTML clusters with custom properties](https://maplibre.org/maplibre-gl-js/docs/examples/cluster-html/)
*/
data: MapDataEvent;
tiledataloading: MapDataEvent;
/**
* Fired when one of the map's sources begins loading or changing asynchronously.
* All `sourcedataloading` events are followed by a `sourcedata`, `sourcedataabort` or `error` event.
*/
sourcedataloading: MapSourceDataEvent;
/**
* Fired when the map's style begins loading or changing asynchronously.
* All `styledataloading` events are followed by a `styledata`
* or `error` event.
*/
styledataloading: MapStyleDataEvent;
/**
* Fired when one of the map's sources loads or changes, including if a tile belonging
* to a source loads or changes.
*/
sourcedata: MapSourceDataEvent;
/**
* Fired when the map's style loads or changes.
*/
styledata: MapStyleDataEvent;
/**
* Fired when an icon or pattern needed by the style is missing. The missing image can
* be added with {@link Map#addImage} within this event listener callback to prevent the image from
* being skipped. This event can be used to dynamically generate icons and patterns.
* @see [Generate and add a missing icon to the map](https://maplibre.org/maplibre-gl-js/docs/examples/add-image-missing-generated/)
*/
styleimagemissing: MapStyleImageMissingEvent;
/**
* Fired when a request for one of the map's sources' tiles or data is aborted.
*/
dataabort: MapDataEvent;
/**
* Fired when a request for one of the map's sources' data is aborted.
*/
sourcedataabort: MapSourceDataEvent;
/**
* Fired when the user cancels a "box zoom" interaction, or when the bounding box does not meet the minimum size threshold.
* See {@link BoxZoomHandler}.
*/
boxzoomcancel: MapLibreZoomEvent;
/**
* Fired when a "box zoom" interaction starts. See {@link BoxZoomHandler}.
*/
boxzoomstart: MapLibreZoomEvent;
/**
* Fired when a "box zoom" interaction ends. See {@link BoxZoomHandler}.
*/
boxzoomend: MapLibreZoomEvent;
/**
* Fired when a [`touchcancel`](https://developer.mozilla.org/en-US/docs/Web/Events/touchcancel) event occurs within the map.
*/
touchcancel: MapTouchEvent;
/**
* Fired when a [`touchmove`](https://developer.mozilla.org/en-US/docs/Web/Events/touchmove) event occurs within the map.
* @see [Create a draggable point](https://maplibre.org/maplibre-gl-js/docs/examples/drag-a-point/)
*/
touchmove: MapTouchEvent;
/**
* Fired when a [`touchend`](https://developer.mozilla.org/en-US/docs/Web/Events/touchend) event occurs within the map.
* @see [Create a draggable point](https://maplibre.org/maplibre-gl-js/docs/examples/drag-a-point/)
*/
touchend: MapTouchEvent;
/**
* Fired when a [`touchstart`](https://developer.mozilla.org/en-US/docs/Web/Events/touchstart) event occurs within the map.
* @see [Create a draggable point](https://maplibre.org/maplibre-gl-js/docs/examples/drag-a-point/)
*/
touchstart: MapTouchEvent;
/**
* Fired when a pointing device (usually a mouse) is pressed and released at the same point on the map.
*
* @see [Measure distances](https://maplibre.org/maplibre-gl-js/docs/examples/measure/)
* @see [Center the map on a clicked symbol](https://maplibre.org/maplibre-gl-js/docs/examples/center-on-symbol/)
*/
click: MapMouseEvent;
/**
* Fired when the right button of the mouse is clicked or the context menu key is pressed within the map.
*/
contextmenu: MapMouseEvent;
/**
* Fired when a pointing device (usually a mouse) is pressed and released twice at the same point on the map in rapid succession.
*
* **Note:** Under normal conditions, this event will be preceded by two `click` events.
*/
dblclick: MapMouseEvent;
/**
* Fired when a pointing device (usually a mouse) is moved while the cursor is inside the map.
* As you move the cursor across the map, the event will fire every time the cursor changes position within the map.
*
* @see [Get coordinates of the mouse pointer](https://maplibre.org/maplibre-gl-js/docs/examples/mouse-position/)
* @see [Highlight features under the mouse pointer](https://maplibre.org/maplibre-gl-js/docs/examples/hover-styles/)
* @see [Display a popup on over](https://maplibre.org/maplibre-gl-js/docs/examples/popup-on-hover/)
*/
mousemove: MapMouseEvent;
/**
* Fired when a pointing device (usually a mouse) is released within the map.
*
* @see [Create a draggable point](https://maplibre.org/maplibre-gl-js/docs/examples/drag-a-point/)
*/
mouseup: MapMouseEvent;
/**
* Fired when a pointing device (usually a mouse) is pressed within the map.
*
* @see [Create a draggable point](https://maplibre.org/maplibre-gl-js/docs/examples/drag-a-point/)
*/
mousedown: MapMouseEvent;
/**
* Fired when a point device (usually a mouse) leaves the map's canvas.
*/
mouseout: MapMouseEvent;
/**
* Fired when a pointing device (usually a mouse) is moved within the map.
* As you move the cursor across a web page containing a map,
* the event will fire each time it enters the map or any child elements.
*
* @see [Get coordinates of the mouse pointer](https://maplibre.org/maplibre-gl-js/docs/examples/mouse-position/)
* @see [Highlight features under the mouse pointer](https://maplibre.org/maplibre-gl-js/docs/examples/hover-styles/)
* @see [Display a popup on hover](https://maplibre.org/maplibre-gl-js/docs/examples/popup-on-hover/)
*/
mouseover: MapMouseEvent;
/**
* Fired just before the map begins a transition from one
* view to another, as the result of either user interaction or methods such as {@link Map#jumpTo}.
*
*/
movestart: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>;
/**
* Fired repeatedly during an animated transition from one view to
* another, as the result of either user interaction or methods such as {@link Map#flyTo}.
*
* @see [Display HTML clusters with custom properties](https://maplibre.org/maplibre-gl-js/docs/examples/cluster-html/)
*/
move: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>;
/**
* Fired just after the map completes a transition from one
* view to another, as the result of either user interaction or methods such as {@link Map#jumpTo}.
*
* @see [Display HTML clusters with custom properties](https://maplibre.org/maplibre-gl-js/docs/examples/cluster-html/)
*/
moveend: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>;
/**
* Fired just before the map begins a transition from one zoom level to another,
* as the result of either user interaction or methods such as {@link Map#flyTo}.
*/
zoomstart: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>;
/**
* Fired repeatedly during an animated transition from one zoom level to another,
* as the result of either user interaction or methods such as {@link Map#flyTo}.
*/
zoom: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>;
/**
* Fired just after the map completes a transition from one zoom level to another,
* as the result of either user interaction or methods such as {@link Map#flyTo}.
*/
zoomend: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>;
/**
* Fired when a "drag to rotate" interaction starts. See {@link DragRotateHandler}.
*/
rotatestart: MapLibreEvent<MouseEvent | TouchEvent | undefined>;
/**
* Fired repeatedly during a "drag to rotate" interaction. See {@link DragRotateHandler}.
*/
rotate: MapLibreEvent<MouseEvent | TouchEvent | undefined>;
/**
* Fired when a "drag to rotate" interaction ends. See {@link DragRotateHandler}.
*/
rotateend: MapLibreEvent<MouseEvent | TouchEvent | undefined>;
/**
* Fired when a "drag to pan" interaction starts. See {@link DragPanHandler}.
*/
dragstart: MapLibreEvent<MouseEvent | TouchEvent | undefined>;
/**
* Fired repeatedly during a "drag to pan" interaction. See {@link DragPanHandler}.
*/
drag: MapLibreEvent<MouseEvent | TouchEvent | undefined>;
/**
* Fired when a "drag to pan" interaction ends. See {@link DragPanHandler}.
* @see [Create a draggable marker](https://maplibre.org/maplibre-gl-js/docs/examples/drag-a-marker/)
*/
dragend: MapLibreEvent<MouseEvent | TouchEvent | undefined>;
/**
* Fired whenever the map's pitch (tilt) begins a change as
* the result of either user interaction or methods such as {@link Map#flyTo} .
*/
pitchstart: MapLibreEvent<MouseEvent | TouchEvent | undefined>;
/**
* Fired repeatedly during the map's pitch (tilt) animation between
* one state and another as the result of either user interaction
* or methods such as {@link Map#flyTo}.
*/
pitch: MapLibreEvent<MouseEvent | TouchEvent | undefined>;
/**
* Fired immediately after the map's pitch (tilt) finishes changing as
* the result of either user interaction or methods such as {@link Map#flyTo}.
*/
pitchend: MapLibreEvent<MouseEvent | TouchEvent | undefined>;
/**
* Fired when a [`wheel`](https://developer.mozilla.org/en-US/docs/Web/Events/wheel) event occurs within the map.
*/
wheel: MapWheelEvent;
/**
* Fired when terrain is changed
*/
terrain: MapTerrainEvent;
};
/**
* The base event for MapLibre
*
* @group Event Related
*/
export type MapLibreEvent<TOrig = unknown> = {
type: keyof MapEventType | keyof MapLayerEventType;
target: Map;
originalEvent: TOrig;
}
/**
* The style data event
*
* @group Event Related
*/
export type MapStyleDataEvent = MapLibreEvent & {
dataType: 'style';
}
/**
* The source data event interface
*
* @group Event Related
*/
export type MapSourceDataEvent = MapLibreEvent & {
dataType: 'source';
/**
* True if the event has a `dataType` of `source` and the source has no outstanding network requests.
*/
isSourceLoaded: boolean;
/**
* The [style spec representation of the source](https://maplibre.org/maplibre-style-spec/#sources) if the event has a `dataType` of `source`.
*/
source: SourceSpecification;
sourceId: string;
sourceDataType: MapSourceDataType;
/**
* The tile being loaded or changed, if the event has a `dataType` of `source` and
* the event is related to loading of a tile.
*/
tile: any;
}
/**
* `MapMouseEvent` is the event type for mouse-related map events.
*
* @group Event Related
*
* @example
* ```ts
* // The `click` event is an example of a `MapMouseEvent`.
* // Set up an event listener on the map.
* map.on('click', (e) => {
* // The event object (e) contains information like the
* // coordinates of the point on the map that was clicked.
* console.log('A click event has occurred at ' + e.lngLat);
* });
* ```
*/
export class MapMouseEvent extends Event implements MapLibreEvent<MouseEvent> {
/**
* The event type
*/
type: 'mousedown' | 'mouseup' | 'click' | 'dblclick' | 'mousemove' | 'mouseover' | 'mouseenter' | 'mouseleave' | 'mouseout' | 'contextmenu';
/**
* The `Map` object that fired the event.
*/
target: Map;
/**
* The DOM event which caused the map event.
*/
originalEvent: MouseEvent;
/**
* The pixel coordinates of the mouse cursor, relative to the map and measured from the top left corner.
*/
point: Point;
/**
* The geographic location on the map of the mouse cursor.
*/
lngLat: LngLat;
/**
* Prevents subsequent default processing of the event by the map.
*
* Calling this method will prevent the following default map behaviors:
*
* * On `mousedown` events, the behavior of {@link DragPanHandler}
* * On `mousedown` events, the behavior of {@link DragRotateHandler}
* * On `mousedown` events, the behavior of {@link BoxZoomHandler}
* * On `dblclick` events, the behavior of {@link DoubleClickZoomHandler}
*
*/
preventDefault() {
this._defaultPrevented = true;
}
/**
* `true` if `preventDefault` has been called.
*/
get defaultPrevented(): boolean {
return this._defaultPrevented;
}
_defaultPrevented: boolean;
constructor(type: string, map: Map, originalEvent: MouseEvent, data: any = {}) {
const point = DOM.mousePos(map.getCanvas(), originalEvent);
const lngLat = map.unproject(point);
super(type, extend({point, lngLat, originalEvent}, data));
this._defaultPrevented = false;
this.target = map;
}
}
/**
* `MapTouchEvent` is the event type for touch-related map events.
*
* @group Event Related
*/
export class MapTouchEvent extends Event implements MapLibreEvent<TouchEvent> {
/**
* The event type.
*/
type: 'touchstart' | 'touchmove' | 'touchend' | 'touchcancel';
/**
* The `Map` object that fired the event.
*/
target: Map;
/**
* The DOM event which caused the map event.
*/
originalEvent: TouchEvent;
/**
* The geographic location on the map of the center of the touch event points.
*/
lngLat: LngLat;
/**
* The pixel coordinates of the center of the touch event points, relative to the map and measured from the top left
* corner.
*/
point: Point;
/**
* The array of pixel coordinates corresponding to a
* [touch event's `touches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches) property.
*/
points: Array<Point>;
/**
* The geographical locations on the map corresponding to a
* [touch event's `touches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches) property.
*/
lngLats: Array<LngLat>;
/**
* Prevents subsequent default processing of the event by the map.
*
* Calling this method will prevent the following default map behaviors:
*
* * On `touchstart` events, the behavior of {@link DragPanHandler}
* * On `touchstart` events, the behavior of {@link TwoFingersTouchZoomRotateHandler}
*
*/
preventDefault() {
this._defaultPrevented = true;
}
/**
* `true` if `preventDefault` has been called.
*/
get defaultPrevented(): boolean {
return this._defaultPrevented;
}
_defaultPrevented: boolean;
constructor(type: string, map: Map, originalEvent: TouchEvent) {
const touches = type === 'touchend' ? originalEvent.changedTouches : originalEvent.touches;
const points = DOM.touchPos(map.getCanvasContainer(), touches);
const lngLats = points.map((t) => map.unproject(t));
const point = points.reduce((prev, curr, i, arr) => {
return prev.add(curr.div(arr.length));
}, new Point(0, 0));
const lngLat = map.unproject(point);
super(type, {points, point, lngLats, lngLat, originalEvent});
this._defaultPrevented = false;
}
}
/**
* `MapWheelEvent` is the event type for the `wheel` map event.
*
* @group Event Related
*/
export class MapWheelEvent extends Event {
/**
* The event type.
*/
type: 'wheel';
/**
* The `Map` object that fired the event.
*/
target: Map;
/**
* The DOM event which caused the map event.
*/
originalEvent: WheelEvent;
/**
* Prevents subsequent default processing of the event by the map.
*
* Calling this method will prevent the behavior of {@link ScrollZoomHandler}.
*/
preventDefault() {
this._defaultPrevented = true;
}
/**
* `true` if `preventDefault` has been called.
*/
get defaultPrevented(): boolean {
return this._defaultPrevented;
}
_defaultPrevented: boolean;
/** */
constructor(type: string, map: Map, originalEvent: WheelEvent) {
super(type, {originalEvent});
this._defaultPrevented = false;
}
}
/**
* A `MapLibreZoomEvent` is the event type for the boxzoom-related map events emitted by the {@link BoxZoomHandler}.
*
* @group Event Related
*/
export type MapLibreZoomEvent = {
/**
* The type of boxzoom event. One of `boxzoomstart`, `boxzoomend` or `boxzoomcancel`
*/
type: 'boxzoomstart' | 'boxzoomend' | 'boxzoomcancel';
/**
* The `Map` instance that triggered the event
*/
target: Map;
/**
* The DOM event that triggered the boxzoom event. Can be a `MouseEvent` or `KeyboardEvent`
*/
originalEvent: MouseEvent;
};
/**
* A `MapDataEvent` object is emitted with the `data`
* and `dataloading` events. Possible values for
* `dataType`s are:
*
* - `'source'`: The non-tile data associated with any source
* - `'style'`: The [style](https://maplibre.org/maplibre-style-spec/) used by the map
*
* Possible values for `sourceDataType`s are:
*
* - `'metadata'`: indicates that any necessary source metadata has been loaded (such as TileJSON) and it is ok to start loading tiles
* - `'content'`: indicates the source data has changed (such as when source.setData() has been called on GeoJSONSource)
* - `'visibility'`: send when the source becomes used when at least one of its layers becomes visible in style sense (inside the layer's zoom range and with layout.visibility set to 'visible')
* - `'idle'`: indicates that no new source data has been fetched (but the source has done loading)
*
* @group Event Related
*
* @example
* ```ts
* // The sourcedata event is an example of MapDataEvent.
* // Set up an event listener on the map.
* map.on('sourcedata', (e) => {
* if (e.isSourceLoaded) {
* // Do something when the source has finished loading
* }
* });
* ```
*/
export type MapDataEvent = {
/**
* The event type.
*/
type: string;
/**
* The type of data that has changed. One of `'source'`, `'style'`.
*/
dataType: string;
/**
* Included if the event has a `dataType` of `source` and the event signals that internal data has been received or changed. Possible values are `metadata`, `content`, `visibility` and `idle`.
*/
sourceDataType: MapSourceDataType;
};
/**
* The terrain event
*
* @group Event Related
*/
export type MapTerrainEvent = {
type: 'terrain';
};
/**
* An event related to the web gl context
*
* @group Event Related
*/
export type MapContextEvent = {
type: 'webglcontextlost' | 'webglcontextrestored';
originalEvent: WebGLContextEvent;
};
/**
* The style image missing event
*
* @group Event Related
*
* @see [Generate and add a missing icon to the map](https://maplibre.org/maplibre-gl-js/docs/examples/add-image-missing-generated/)
*/
export type MapStyleImageMissingEvent = MapLibreEvent & {
type: 'styleimagemissing';
id: string;
}