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
# Custom Map Controls
|
|
|
|
## Overriding The Default Map Controller
|
|
|
|
To change the default behavior of map interaction, you can implement/extend the `MapControls`
|
|
class add pass an instance to the `mapControls` prop of `InteractiveMap`.
|
|
|
|
A simple example to disable mouse wheel:
|
|
```js
|
|
/// my-map-controls.js
|
|
import {experimental} from 'react-map-gl';
|
|
|
|
export default class MyMapControls extends experimental.MapControls {
|
|
|
|
constructor() {
|
|
super();
|
|
// subscribe to additional events
|
|
this.events = ['click'];
|
|
}
|
|
|
|
// Override the default handler in MapControls
|
|
handleEvent(event) {
|
|
if (event.type === 'click') {
|
|
console.log('hi!');
|
|
}
|
|
return super.handleEvent(event);
|
|
}
|
|
}
|
|
```
|
|
Then pass it to the map during render:
|
|
```jsx
|
|
const mapControls = new MyMapControls();
|
|
<ReactMapGL mapControls={mapControls} ... />
|
|
```
|
|
|
|
|
|
## MapControls Interface
|
|
|
|
A custom map controls class must implement the following interface:
|
|
|
|
### 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`, `touchstart`, `touchmove`, `touchend`, `mousedown`, `mousemove`, `mouseup`, `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']`
|
|
- `keyboar` - `['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(event)`
|
|
|
|
Called by `InteractiveMap` to handle pointer events.
|
|
|
|
##### `setOptions(options)`
|
|
|
|
Called by `InteractiveMap` when props change.
|
|
|
|
|