mirror of
https://github.com/visgl/react-map-gl.git
synced 2025-12-08 20:16:02 +00:00
86 lines
3.3 KiB
Markdown
86 lines
3.3 KiB
Markdown
# MapController
|
|
|
|
|
|
|
|
The easiest way to create a custom map control is to extend the default `MapController` class.
|
|
|
|
## Properties
|
|
|
|
##### `events` (Array)
|
|
|
|
A list of additional event names that this control subscribes to.
|
|
|
|
Available events: `click`, `dblclick`, `tap`, `doubletap`, `press`, `pinch`, `pinchin`, `pinchout`, `pinchstart`, `pinchmove`, `pinchend`, `pinchcancel`, `rotate`, `rotatestart`, `rotatemove`, `rotateend`, `rotatecancel`, `pan`, `panstart`, `panmove`, `panup`, `pandown`, `panleft`, `panright`, `panend`, `pancancel`, `swipe`, `swipeleft`, `swiperight`, `swipeup`, `swipedown`, `pointerdown`, `pointermove`, `pointerup`, `keydown`, and `keyup`.
|
|
|
|
The following events are toggled on/off by InteractiveMap props:
|
|
|
|
- `scrollZoom` - `['wheel']`
|
|
- `dragPan` and `dragRotate` - `['panstart', 'panmove', 'panend']`
|
|
- `touchZoomRotate` - `['pinchstart', 'pinchmove', 'pinchend']`
|
|
- `doubleClickZoom` - `['doubletap']`
|
|
- `keyboard` - `['keydown']`
|
|
|
|
Event object is generated by [mjolnir.js](https://github.com/uber-web/mjolnir.js). It always has the following properties:
|
|
|
|
* `type` (string) - The event type to which the event handler is subscribed, e.g. `'click'` or `'pointermove'`
|
|
* `center` (Object `{x, y}`) - The center of the event location (e.g. the centroid of a touch) relative to the viewport (basically, [`clientX/Y`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX))
|
|
* `offsetCenter` (Object `{x, y}`) - The center of the event location relative to the map.
|
|
* `target` (Object) - The target of the event, as specified by the original `srcEvent`
|
|
* `srcEvent` (Object) - The original event object dispatched by the browser to the JS runtime
|
|
|
|
Additionally, event objects for different event types contain a subset of the following properties:
|
|
|
|
* `key` (number) - The keycode of the keyboard event
|
|
* `leftButton` (boolean) - Flag indicating whether the left button is involved during the event
|
|
* `middleButton` (boolean) - Flag indicating whether the middle button is involved during the event
|
|
* `rightButton` (boolean) - Flag indicating whether the right button is involved during the event
|
|
* `pointerType` (string) - A string indicating the type of input (e.g. `'mouse'`, `'touch'`, `'pointer'`)
|
|
* `delta` (number) - The scroll magnitude/distance of a wheel event
|
|
|
|
|
|
## Methods
|
|
|
|
##### `handleEvent`
|
|
|
|
`handleEvent(event)`
|
|
|
|
Called by the event manager to handle pointer events. This method delegate to the following methods to handle the default events:
|
|
- `_onPanStart(event)`
|
|
- `_onPan(event)`
|
|
- `_onPanEnd(event)`
|
|
- `_onPinchStart(event)`
|
|
- `_onPinch(event)`
|
|
- `_onPinchEnd(event)`
|
|
- `_onDoubleTap(event)`
|
|
- `_onWheel(event)`
|
|
- `_onKeyDown(event)`
|
|
|
|
##### `getMapState`
|
|
|
|
`getMapState(overrides)`
|
|
|
|
Get a new descriptor object of the map state. If specified, props in the `overrides` object override the current map props.
|
|
|
|
##### `setOptions`
|
|
|
|
`setOptions(options)`
|
|
|
|
Add/remove event listeners based on the latest `InteractiveMap` props.
|
|
|
|
##### `setState`
|
|
|
|
`setState(newState)`
|
|
|
|
Save a persistent state (e.g. isDragging) for future use.
|
|
|
|
##### `updateViewport`
|
|
|
|
`updateViewport(newMapState, extraProps, extraState)`
|
|
|
|
Invoke `onViewportChange` callback with a new map state.
|
|
|
|
|
|
## Source
|
|
|
|
[map-controller.js](https://github.com/visgl/react-map-gl/tree/6.0-release/src/utils/map-controller.js)
|