mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-18 15:54:22 +00:00
[v4.0] Add interaction callbacks (#626)
This commit is contained in:
Xiaoji Chen
GitHub
parent
5f0e56e844
commit
60423f49a4
@ -29,53 +29,58 @@ class Map extends Component {
|
||||
|
||||
## Properties
|
||||
|
||||
Has all properties of [StaticMap](/docs/components/static-map.md) and the following:
|
||||
### Initialization
|
||||
|
||||
##### `onViewStateChange` {Function}
|
||||
Inherit the following props from [StaticMap](/docs/components/static-map.md):
|
||||
|
||||
Callback that is fired when the map's viewport properties should be updated.
|
||||
- `attributionControl` {Bool}
|
||||
- `disableTokenWarning` {Bool}
|
||||
- `gl` {WebGLContext}
|
||||
- `mapboxApiAccessToken` {String}
|
||||
- `mapOptions` {Object}
|
||||
- `preserveDrawingBuffer` {Bool}
|
||||
- `preventStyleDiffing` {Bool}
|
||||
- `reuseMaps` {Bool}
|
||||
- `transformRequest` {Function}
|
||||
|
||||
`onViewStateChange({viewState, interactionState, oldViewState})`
|
||||
|
||||
If the map is intended to be interactive, the app uses this prop to listen to map updates and update the props accordingly.
|
||||
### Map State
|
||||
|
||||
See `onViewportChange` for details of the arguments.
|
||||
Inherit the following props from [StaticMap](/docs/components/static-map.md):
|
||||
|
||||
Note:
|
||||
* `onViewStateChange` is a newer version of the `onViewportChange` callback. Both are supported and provide equivalent functionality.
|
||||
- `mapStyle` {String | Object | Immutable.Map}
|
||||
- `width` {Number | String} (required)
|
||||
- `height` {Number | String} (required)
|
||||
- `latitude` {Number}
|
||||
- `longitude` {Number}
|
||||
- `zoom` {Number}
|
||||
- `bearing` {Number} - default: `0`
|
||||
- `pitch` {Number} - default: `0`
|
||||
- `altitude` {Number} - default: `1.5 (screen heights)`
|
||||
- `viewState` {Object}
|
||||
|
||||
##### `onViewportChange` {Function}
|
||||
|
||||
Callback that is fired when the map's viewport properties should be updated.
|
||||
### Render Options
|
||||
|
||||
`onViewportChange(viewState, interactionState, oldViewState)`
|
||||
Inherit the following props from [StaticMap](/docs/components/static-map.md):
|
||||
|
||||
Arguments:
|
||||
- `style` {Object}
|
||||
- `visible` {Bool}
|
||||
- `visibilityConstraints` {Object}
|
||||
|
||||
- `viewState` {Object} The next viewport properties, including: `width`, `height`, `latitude`, `longitude`, `zoom`, `bearing`, `pitch`, `altitude`, `maxZoom`, `minZoom`, `maxPitch`, `minPitch`, `transitionDuration`, `transitionEasing`, `transitionInterpolator`, `transitionInterruption`.
|
||||
- `interactionState` {Object} The current interaction that caused this viewport change. See `onInteractionStateChange` for possible fields.
|
||||
- `oldViewState` {Object} The current viewport properties.
|
||||
##### `getCursor` {Function}
|
||||
|
||||
Note:
|
||||
* Even if both `onViewStateChange` and `onViewportChange` callbacks are supplied, they will both be called during an update.
|
||||
Accessor that returns a cursor style to show interactive state. Called when the component is being rendered.
|
||||
|
||||
##### `onInteractionStateChange` {Function}
|
||||
Parameters
|
||||
- `state` - The current state of the component.
|
||||
+ `state.isDragging` - If the map is being dragged.
|
||||
+ `state.isHovering` - If the pointer is over an interactive feature. See `interactiveLayerIds` prop.
|
||||
|
||||
Callback that is fired when the user interacted with the map.
|
||||
The default implementation of `getCursor` returns `'pointer'` if `isHovering`, `'grabbing'` if `isDragging` and `'grab'` otherwise.
|
||||
|
||||
`onInteractionStateChange(interactionState)`
|
||||
|
||||
Possible fields include:
|
||||
|
||||
- `interactionState.inTransition` (Boolean)
|
||||
- `interactionState.isDragging` (Boolean)
|
||||
- `interactionState.isPanning` (Boolean)
|
||||
- `interactionState.isRotating` (Boolean)
|
||||
- `interactionState.isZooming` (Boolean)
|
||||
|
||||
Note:
|
||||
* `onInteractionStateChange` may be fired without `onViewportChange`. For example, when the pointer is released at the end of a drag-pan, `isDragging` are reset to `false`, without the viewport's `longitude` and `latitude` changing.
|
||||
|
||||
### Interaction Options
|
||||
|
||||
##### `maxZoom` {Number} [default: 20]
|
||||
|
||||
@ -146,44 +151,8 @@ If not specified:
|
||||
- Pointer event callbacks will query the features under the pointer of all layers.
|
||||
- The `getCursor` callback will always receive `isHovering: false`.
|
||||
|
||||
##### `onHover` {Function}
|
||||
|
||||
Called when the map is hovered over.
|
||||
|
||||
Parameters
|
||||
- `event` - The pointer event.
|
||||
+ `event.lngLat` - The geo coordinates that is being clicked.
|
||||
+ `event.features` - The array of features under the pointer, queried using Mapbox's
|
||||
[queryRenderedFeatures](https://www.mapbox.com/mapbox-gl-js/api/#Map#queryRenderedFeatures) API.
|
||||
To make only selected layers interactive, set the `interactiveLayerIds` prop.
|
||||
|
||||
##### `onClick` {Function}
|
||||
|
||||
Called when the map is clicked.
|
||||
|
||||
Parameters
|
||||
- `event` - The pointer event.
|
||||
+ `event.lngLat` - The geo coordinates that is being clicked.
|
||||
+ `event.features` - The array of features under the pointer, queried using Mapbox's
|
||||
[queryRenderedFeatures](https://www.mapbox.com/mapbox-gl-js/api/#Map#queryRenderedFeatures) API.
|
||||
To make only selected layers interactive, set the `interactiveLayerIds` prop.
|
||||
|
||||
##### `onContextMenu` {Function}
|
||||
|
||||
Called when the context menu is activated. Prevent default here to enable right button interaction.
|
||||
|
||||
Default: `event => event.preventDefault()`
|
||||
|
||||
##### `getCursor` {Function}
|
||||
|
||||
Accessor that returns a cursor style to show interactive state. Called when the component is being rendered.
|
||||
|
||||
Parameters
|
||||
- `state` - The current state of the component.
|
||||
+ `state.isDragging` - If the map is being dragged.
|
||||
+ `state.isHovering` - If the pointer is over an interactive feature. See `interactiveLayerIds` prop.
|
||||
|
||||
The default implementation of `getCursor` returns `'pointer'` if `isHovering`, `'grabbing'` if `isDragging` and `'grab'` otherwise.
|
||||
### Transitions
|
||||
|
||||
##### `transitionDuration` {Number}
|
||||
|
||||
@ -218,10 +187,123 @@ What to do if an ongoing transition is interrupted by another transition. There
|
||||
- `TRANSITION_EVENTS.IGNORE` - Complete the previous transition and ignore the new viewport change.
|
||||
|
||||
You may import the constants as follows:
|
||||
```
|
||||
|
||||
```js
|
||||
import {TRANSITION_EVENTS} from 'react-map-gl';
|
||||
```
|
||||
|
||||
|
||||
### Callbacks
|
||||
|
||||
Inherit the following props from [StaticMap](/docs/components/static-map.md):
|
||||
|
||||
- `onLoad` {Function}
|
||||
- `onResize` {Function}
|
||||
- `onError` {Function}
|
||||
|
||||
|
||||
##### `onViewportChange` {Function}
|
||||
|
||||
Callback that is fired when the map's viewport properties should be updated.
|
||||
|
||||
```js
|
||||
onViewportChange(viewState, interactionState, oldViewState);
|
||||
```
|
||||
|
||||
Arguments:
|
||||
|
||||
- `viewState` {Object} The next viewport properties, including: `width`, `height`, `latitude`, `longitude`, `zoom`, `bearing`, `pitch`, `altitude`, `maxZoom`, `minZoom`, `maxPitch`, `minPitch`, `transitionDuration`, `transitionEasing`, `transitionInterpolator`, `transitionInterruption`.
|
||||
- `interactionState` {Object} The current interaction that caused this viewport change. See `onInteractionStateChange` for possible fields.
|
||||
- `oldViewState` {Object} The current viewport properties.
|
||||
|
||||
|
||||
##### `onViewStateChange` {Function}
|
||||
|
||||
A newer version of the `onViewportChange` callback. Both are supported and provide equivalent functionality.
|
||||
|
||||
```js
|
||||
onViewStateChange({viewState, interactionState, oldViewState});
|
||||
```
|
||||
|
||||
|
||||
##### `onInteractionStateChange` {Function}
|
||||
|
||||
Callback that is fired when the user interacted with the map.
|
||||
|
||||
```js
|
||||
onInteractionStateChange(interactionState)
|
||||
```
|
||||
|
||||
Possible fields include:
|
||||
|
||||
- `interactionState.inTransition` (Boolean)
|
||||
- `interactionState.isDragging` (Boolean)
|
||||
- `interactionState.isPanning` (Boolean)
|
||||
- `interactionState.isRotating` (Boolean)
|
||||
- `interactionState.isZooming` (Boolean)
|
||||
|
||||
Note:
|
||||
* `onInteractionStateChange` may be fired without `onViewportChange`. For example, when the pointer is released at the end of a drag-pan, `isDragging` are reset to `false`, without the viewport's `longitude` and `latitude` changing.
|
||||
|
||||
|
||||
##### `onHover` {Function}
|
||||
|
||||
Called when the map is hovered over with mouse (not pressed). Receives a [PointerEvent](/docs/components/pointer-event.md) object.
|
||||
|
||||
##### `onClick` {Function}
|
||||
|
||||
Called when the map is clicked. Receives a [PointerEvent](/docs/components/pointer-event.md) object.
|
||||
|
||||
##### `onDblClick` {Function}
|
||||
|
||||
Called when the map is double clicked. Receives a [PointerEvent](/docs/components/pointer-event.md) object.
|
||||
|
||||
##### `onMouseDown` {Function}
|
||||
|
||||
Called when a pointing device (usually a mouse) is pressed within the map. Receives a [PointerEvent](/docs/components/pointer-event.md) object.
|
||||
|
||||
##### `onMouseMove` {Function}
|
||||
|
||||
Called when a pointing device (usually a mouse) is moved within the map. Receives a [PointerEvent](/docs/components/pointer-event.md) object.
|
||||
|
||||
##### `onMouseUp` {Function}
|
||||
|
||||
Called when a pointing device (usually a mouse) is released within the map. Receives a [PointerEvent](/docs/components/pointer-event.md) object.
|
||||
|
||||
##### `onTouchStart` {Function}
|
||||
|
||||
Called when a `touchstart` event occurs within the map. Receives a [PointerEvent](/docs/components/pointer-event.md) object.
|
||||
|
||||
##### `onTouchMove` {Function}
|
||||
|
||||
Called when a `touchmove` event occurs within the map. Receives a [PointerEvent](/docs/components/pointer-event.md) object.
|
||||
|
||||
##### `onTouchEnd` {Function}
|
||||
|
||||
Called when a `touchend` event occurs within the map. Receives a [PointerEvent](/docs/components/pointer-event.md) object.
|
||||
|
||||
##### `onMouseEnter` {Function}
|
||||
|
||||
Called when a pointing device (usually a mouse) enters a visible portion of one of the interactive layers, defined by the `interactiveLayerIds` prop. Receives a [PointerEvent](/docs/components/pointer-event.md) object.
|
||||
|
||||
##### `onMouseLeave` {Function}
|
||||
|
||||
Called when a pointing device (usually a mouse) leaves a visible portion of one of the interactive layers, defined by the `interactiveLayerIds` prop. Receives a [PointerEvent](/docs/components/pointer-event.md) object.
|
||||
|
||||
##### `onWheel` {Function}
|
||||
|
||||
Called when a `wheel` event occurs within the map. Receives a [PointerEvent](/docs/components/pointer-event.md) object.
|
||||
|
||||
##### `onMouseOut` {Function}
|
||||
|
||||
Called when a point device (usually a mouse) leaves the map's canvas. Receives a [PointerEvent](/docs/components/pointer-event.md) object.
|
||||
|
||||
##### `onContextMenu` {Function}
|
||||
|
||||
Called when the context menu is activated. Prevent default here to enable right button interaction.
|
||||
|
||||
Default: `event => event.preventDefault()`
|
||||
|
||||
##### `onTransitionStart` {Function}
|
||||
|
||||
Callback that is fired when a transition is triggered.
|
||||
@ -236,7 +318,11 @@ Callback that is fired when a transition is complete.
|
||||
|
||||
## Methods
|
||||
|
||||
Same methods as [StaticMap](/docs/components/static-map.md).
|
||||
Inherit the following methods from [StaticMap](/docs/components/static-map.md):
|
||||
|
||||
- `getMap()`
|
||||
- `queryRenderedFeatures(geometry, parameters)`
|
||||
|
||||
|
||||
## Source
|
||||
[interactive-map.js](https://github.com/uber/react-map-gl/tree/3.2-release/src/components/interactive-map.js)
|
||||
|
||||
25
docs/components/pointer-event.md
Normal file
25
docs/components/pointer-event.md
Normal file
@ -0,0 +1,25 @@
|
||||
# PointerEvent
|
||||
|
||||
Event object passed to some of [InteractiveMap](/docs/components/interactive-map.md)'s callback props.
|
||||
|
||||
## Members
|
||||
|
||||
##### `type` {String}
|
||||
|
||||
The name of the event.
|
||||
|
||||
##### `point` {Array}
|
||||
|
||||
The screen coordinates that is being clicked.
|
||||
|
||||
##### `lngLat` {Array}
|
||||
|
||||
The geo coordinates that is being clicked.
|
||||
|
||||
##### `target` {Element}
|
||||
|
||||
The target element of the pointer event.
|
||||
|
||||
##### `srcEvent` {Object}
|
||||
|
||||
The original browser event.
|
||||
@ -24,21 +24,67 @@ class Map extends Component {
|
||||
|
||||
## Properties
|
||||
|
||||
### Initialization
|
||||
|
||||
The following props are used during the creation of the Mapbox map.
|
||||
|
||||
##### `attributionControl` {Bool} - default: `true`
|
||||
|
||||
Equivalent to Mapbox's `attributionControl` [option](https://www.mapbox.com/mapbox-gl-js/api/#map). If `true`, shows Mapbox's attribution control.
|
||||
|
||||
##### `disableTokenWarning` {Bool} - default `false`
|
||||
|
||||
If the provided API access token is rejected by Mapbox, `StaticMap` renders a warning instead of failing silently. If you know what you are doing and want to hide this warning anyways, set this prop to `true`.
|
||||
|
||||
##### `gl` {WebGLContext} ==EXPERIMENTAL==
|
||||
|
||||
Use an existing WebGLContext instead of creating a new one. This allows multiple libraries to render into a shared buffer. Use with caution.
|
||||
|
||||
##### `mapboxApiAccessToken` {String}
|
||||
|
||||
Mapbox API access token for `MapboxGL`. Required when using Mapbox vector tiles/styles
|
||||
Mapbox WebGL context creation option. Useful when you want to export the canvas as a PNG
|
||||
|
||||
##### `mapOptions` {Object} - default: `{}`
|
||||
|
||||
> Non-public API, see https://github.com/uber/react-map-gl/issues/545
|
||||
|
||||
An object of additional options to be passed to Mapbox's [`Map` constructor](https://www.mapbox.com/mapbox-gl-js/api/#map). Options specified here
|
||||
will take precedence over those same options if set via props.
|
||||
|
||||
##### `preserveDrawingBuffer` {Bool} - default: `false`
|
||||
|
||||
Equivalent to Mapbox's `preserveDrawingBuffer` [option](https://www.mapbox.com/mapbox-gl-js/api/#map). If `true`, the map's canvas can be exported to a PNG using `map.getCanvas().toDataURL()`.
|
||||
|
||||
##### `preventStyleDiffing` {Bool} - default: `false`
|
||||
|
||||
If `mapStyle` is assigned an Immutable object, when the prop changes, `StaticMap` can diff between the two values and call the appropriate Mapbox API such as `addLayer`, `removeLayer`, `setStyle`, `setData`, etc.
|
||||
This allows apps to update data sources and layer styles efficiently. In use cases such as animation or dynamic showing/hiding layers, style diffing prevents the map from reloading and flickering when the map style changes.
|
||||
|
||||
There are known issues with style diffing. As stopgap, use this option to prevent style diffing.
|
||||
|
||||
##### `reuseMaps` {Bool} - default: `false`
|
||||
|
||||
> This prop is experimental.
|
||||
|
||||
If `true`, when the map component is unmounted, instead of calling `remove` on the Mapbox map instance, save it for later reuse. This will avoid repeatedly creating new Mapbox map instances if possible.
|
||||
|
||||
Applications that frequently mount and unmount maps may try this prop to help work around a mapbox-gl resource leak issue that can lead to a browser crash in certain situations.
|
||||
|
||||
##### `transformRequest` {Function} - default: `null`
|
||||
|
||||
A callback run before the Map makes a request for an external URL. The callback can be used to modify the url, set headers, or set the credentials property for cross-origin requests.
|
||||
Expected to return an object with a `url` property and optionally `headers` and `credentials` properties. Equivalent to Mapbox's `transformRequest` [map option](https://www.mapbox.com/mapbox-gl-js/api#map).
|
||||
|
||||
|
||||
### Map State
|
||||
|
||||
##### `mapStyle` {String | Object | Immutable.Map}
|
||||
|
||||
The Mapbox style. A string url or a
|
||||
[MapboxGL style](https://www.mapbox.com/mapbox-gl-style-spec/#layer-interactive)
|
||||
object (regular JS object or Immutable.Map).
|
||||
|
||||
##### `style` {Object}
|
||||
|
||||
The CSS style of the container.
|
||||
|
||||
##### `width` {Number | String} (required)
|
||||
|
||||
The width of the map. Can be either a number in pixels, or a valid CSS string.
|
||||
@ -47,18 +93,6 @@ The width of the map. Can be either a number in pixels, or a valid CSS string.
|
||||
|
||||
The height of the map. Can be either a number in pixels, or a valid CSS string.
|
||||
|
||||
##### `viewState` {Object}
|
||||
|
||||
An object containing the view state of the map specified by the following fields:
|
||||
* `latitude` {Number} - The latitude of the center of the map.
|
||||
* `longitude` {Number} - The longitude of the center of the map.
|
||||
* `zoom` {Number} - The tile zoom level of the map. Bounded implicitly by default `minZoom` and `maxZoom` of `MapboxGL`.
|
||||
* `bearing` {Number} - default: `0` - The bearing of the viewport.
|
||||
* `pitch` {Number} - default: `0` - The pitch of the viewport.
|
||||
* `altitude` {Number} - default: `1.5 screen heights`
|
||||
|
||||
Note: Either the `viewState`, or the `latitude`, `longitude` and `zoom` properties need to be specified.
|
||||
|
||||
##### `latitude` {Number}
|
||||
|
||||
The latitude of the center of the map, as a top level prop. Only used if `viewState` is not supplied.
|
||||
@ -75,7 +109,7 @@ Bounded implicitly by default `minZoom` and `maxZoom` of `MapboxGL`
|
||||
|
||||
##### `bearing` {Number} - default: `0`
|
||||
|
||||
Specify the bearing of the viewport, as a top level prop. Only used if `viewState` is not supplied..
|
||||
Specify the bearing of the viewport, as a top level prop. Only used if `viewState` is not supplied.
|
||||
|
||||
##### `pitch` {Number} - default: `0`
|
||||
|
||||
@ -87,61 +121,37 @@ Specify the pitch of the viewport, as a top level prop. Only used if `viewState`
|
||||
|
||||
Altitude of the viewport camera.
|
||||
|
||||
##### `viewState` {Object}
|
||||
|
||||
An object containing the view state of the map specified by the following fields:
|
||||
* `latitude` {Number} - The latitude of the center of the map.
|
||||
* `longitude` {Number} - The longitude of the center of the map.
|
||||
* `zoom` {Number} - The tile zoom level of the map. Bounded implicitly by default `minZoom` and `maxZoom` of `MapboxGL`.
|
||||
* `bearing` {Number} - default: `0` - The bearing of the viewport.
|
||||
* `pitch` {Number} - default: `0` - The pitch of the viewport.
|
||||
* `altitude` {Number} - default: `1.5 screen heights`
|
||||
|
||||
Note: Either the `viewState`, or the `latitude`, `longitude` and `zoom` properties need to be specified.
|
||||
|
||||
|
||||
### Render Options
|
||||
|
||||
##### `style` {Object}
|
||||
|
||||
The CSS style of the map container.
|
||||
|
||||
##### `visible` {Bool} - default: `true`
|
||||
|
||||
Whether the map is visible. Unmounting and re-mounting a Mapbox instance is known to be costly. This option offers a way to hide a map using CSS style.
|
||||
|
||||
##### `preserveDrawingBuffer` {Bool} - default: `false`
|
||||
|
||||
Equivalent to Mapbox's `preserveDrawingBuffer` [option](https://www.mapbox.com/mapbox-gl-js/api/#map). If `true`, the map's canvas can be exported to a PNG using `map.getCanvas().toDataURL()`.
|
||||
|
||||
##### `attributionControl` {Bool} - default: `true`
|
||||
|
||||
Equivalent to Mapbox's `attributionControl` [option](https://www.mapbox.com/mapbox-gl-js/api/#map). If `true`, shows Mapbox's attribution control.
|
||||
|
||||
##### `preventStyleDiffing` {Bool} - default: `false`
|
||||
|
||||
If `mapStyle` is assigned an Immutable object, when the prop changes, `StaticMap` can diff between the two values and call the appropriate Mapbox API such as `addLayer`, `removeLayer`, `setStyle`, `setData`, etc.
|
||||
This allows apps to update data sources and layer styles efficiently. In use cases such as animation or dynamic showing/hiding layers, style diffing prevents the map from reloading and flickering when the map style changes.
|
||||
|
||||
There are known issues with style diffing. As stopgap, use this option to prevent style diffing.
|
||||
|
||||
##### `disableTokenWarning` {Bool} - default `false`
|
||||
|
||||
If the provided API access token is rejected by Mapbox, `StaticMap` renders a warning instead of failing silently. If you know what you are doing and want to hide this warning anyways, set this prop to `true`.
|
||||
|
||||
##### `reuseMaps` {Bool} - default: `false`
|
||||
|
||||
> This prop is experimental.
|
||||
|
||||
If `true`, when the map component is unmounted, instead of calling `remove` on the Mapbox map instance, save it for later reuse. This will avoid repeatedly creating new Mapbox map instances if possible.
|
||||
|
||||
Applications that frequently mount and unmount maps may try this prop to help work around a mapbox-gl resource leak issue that can lead to a browser crash in certain situations.
|
||||
|
||||
##### `transformRequest` {Function} - default: `null`
|
||||
|
||||
A callback run before the Map makes a request for an external URL. The callback can be used to modify the url, set headers, or set the credentials property for cross-origin requests.
|
||||
Expected to return an object with a `url` property and optionally `headers` and `credentials` properties. Equivalent to Mapbox's `transformRequest` [map option](https://www.mapbox.com/mapbox-gl-js/api#map).
|
||||
|
||||
##### `mapOptions` {Object} - default: `{}`
|
||||
|
||||
> Non-public API, see https://github.com/uber/react-map-gl/issues/545
|
||||
|
||||
An object of additional options to be passed to Mapbox's [`Map` constructor](https://www.mapbox.com/mapbox-gl-js/api/#map). Options specified here
|
||||
will take precedence over those same options if set via props.
|
||||
|
||||
##### `visibilityConstraints` {Object} ==EXPERIMENTAL==
|
||||
|
||||
An object that specifies bounds for viewport props with `min*`, `max*` keys. If the viewport props are outside of these constraints, the Mapbox map is automatically hidden.
|
||||
|
||||
Default: `{ minZoom: 0, maxZoom: 20, minPitch: 0, maxPitch: 60 }`
|
||||
|
||||
##### `gl` {WebGLContext} ==EXPERIMENTAL==
|
||||
|
||||
Use an existing WebGLContext instead of creating a new one. This allows multiple libraries to render into a shared buffer. Use with caution.
|
||||
|
||||
|
||||
## Callbacks
|
||||
### Callbacks
|
||||
|
||||
##### `onLoad` {Function} - default: `no-op function`
|
||||
|
||||
|
||||
@ -66,36 +66,21 @@ const propTypes = Object.assign({}, StaticMap.propTypes, {
|
||||
// Keyboard
|
||||
keyboard: PropTypes.bool,
|
||||
|
||||
/**
|
||||
* Called when the map is hovered over.
|
||||
* @callback
|
||||
* @param {Object} event - The mouse event.
|
||||
* @param {[Number, Number]} event.lngLat - The coordinates of the pointer
|
||||
* @param {Array} event.features - The features under the pointer, using Mapbox's
|
||||
* queryRenderedFeatures API:
|
||||
* https://www.mapbox.com/mapbox-gl-js/api/#Map#queryRenderedFeatures
|
||||
* To make a layer interactive, set the `interactive` property in the
|
||||
* layer style to `true`. See Mapbox's style spec
|
||||
* https://www.mapbox.com/mapbox-gl-style-spec/#layer-interactive
|
||||
*/
|
||||
/** Event callbacks */
|
||||
onHover: PropTypes.func,
|
||||
/**
|
||||
* Called when the map is clicked.
|
||||
* @callback
|
||||
* @param {Object} event - The mouse event.
|
||||
* @param {[Number, Number]} event.lngLat - The coordinates of the pointer
|
||||
* @param {Array} event.features - The features under the pointer, using Mapbox's
|
||||
* queryRenderedFeatures API:
|
||||
* https://www.mapbox.com/mapbox-gl-js/api/#Map#queryRenderedFeatures
|
||||
* To make a layer interactive, set the `interactive` property in the
|
||||
* layer style to `true`. See Mapbox's style spec
|
||||
* https://www.mapbox.com/mapbox-gl-style-spec/#layer-interactive
|
||||
*/
|
||||
onClick: PropTypes.func,
|
||||
/**
|
||||
* Called when the context menu is activated.
|
||||
*/
|
||||
onDblClick: PropTypes.func,
|
||||
onContextMenu: PropTypes.func,
|
||||
onMouseDown: PropTypes.func,
|
||||
onMouseMove: PropTypes.func,
|
||||
onMouseUp: PropTypes.func,
|
||||
onTouchStart: PropTypes.func,
|
||||
onTouchMove: PropTypes.func,
|
||||
onTouchEnd: PropTypes.func,
|
||||
onMouseEnter: PropTypes.func,
|
||||
onMouseLeave: PropTypes.func,
|
||||
onMouseOut: PropTypes.func,
|
||||
onWheel: PropTypes.func,
|
||||
|
||||
/** Custom touch-action CSS for the event canvas. Defaults to 'none' */
|
||||
touchAction: PropTypes.string,
|
||||
@ -177,9 +162,14 @@ export default class InteractiveMap extends PureComponent {
|
||||
|
||||
// Register additional event handlers for click and hover
|
||||
eventManager.on({
|
||||
mousemove: this._onMouseMove,
|
||||
click: this._onMouseClick,
|
||||
contextmenu: this._onContextMenu
|
||||
pointerdown: this._onPointerDown,
|
||||
pointermove: this._onPointerMove,
|
||||
pointerup: this._onPointerUp,
|
||||
pointerleave: this._onEvent.bind(this, 'onMouseOut'),
|
||||
click: this._onClick,
|
||||
dblclick: this._onEvent.bind(this, 'onDblClick'),
|
||||
wheel: this._onEvent.bind(this, 'onWheel'),
|
||||
contextmenu: this._onEvent.bind(this, 'onContextMenu')
|
||||
});
|
||||
|
||||
this._setControllerProps(this.props);
|
||||
@ -261,55 +251,105 @@ export default class InteractiveMap extends PureComponent {
|
||||
}
|
||||
}
|
||||
|
||||
// HOVER AND CLICK
|
||||
_getPos(event) {
|
||||
/* Generic event handling */
|
||||
_normalizeEvent(event) {
|
||||
if (event.lngLat) {
|
||||
// Already unprojected
|
||||
return event;
|
||||
}
|
||||
|
||||
const {offsetCenter: {x, y}} = event;
|
||||
return [x, y];
|
||||
const pos = [x, y];
|
||||
|
||||
const viewport = new WebMercatorViewport(Object.assign({}, this.props, {
|
||||
width: this._width,
|
||||
height: this._height
|
||||
}));
|
||||
|
||||
event.point = pos;
|
||||
event.lngLat = viewport.unproject(pos);
|
||||
|
||||
return event;
|
||||
}
|
||||
|
||||
_onMouseMove = (event) => {
|
||||
if (!this.state.isDragging) {
|
||||
const pos = this._getPos(event);
|
||||
const features = this._getFeatures({pos, radius: this.props.clickRadius});
|
||||
_onEvent = (callbackName, event) => {
|
||||
const func = this.props[callbackName];
|
||||
if (func) {
|
||||
func(this._normalizeEvent(event));
|
||||
}
|
||||
}
|
||||
|
||||
const isHovering = this.props.interactiveLayerIds && features && features.length > 0;
|
||||
if (isHovering !== this.state.isHovering) {
|
||||
/* Special case event handling */
|
||||
_onPointerDown = (event) => {
|
||||
switch (event.pointerType) {
|
||||
case 'touch':
|
||||
this._onEvent('onTouchStart', event);
|
||||
break;
|
||||
|
||||
default:
|
||||
this._onEvent('onMouseDown', event);
|
||||
}
|
||||
}
|
||||
|
||||
_onPointerUp = (event) => {
|
||||
switch (event.pointerType) {
|
||||
case 'touch':
|
||||
this._onEvent('onTouchEnd', event);
|
||||
break;
|
||||
|
||||
default:
|
||||
this._onEvent('onMouseUp', event);
|
||||
}
|
||||
}
|
||||
|
||||
_onPointerMove = (event) => {
|
||||
switch (event.pointerType) {
|
||||
case 'touch':
|
||||
this._onEvent('onTouchMove', event);
|
||||
break;
|
||||
|
||||
default:
|
||||
this._onEvent('onMouseMove', event);
|
||||
}
|
||||
|
||||
if (!this.state.isDragging) {
|
||||
const {onHover, interactiveLayerIds} = this.props;
|
||||
let features;
|
||||
if (interactiveLayerIds || onHover) {
|
||||
event = this._normalizeEvent(event);
|
||||
features = this._getFeatures({pos: event.point, radius: this.props.clickRadius});
|
||||
}
|
||||
if (onHover) {
|
||||
// backward compatibility: v3 `onHover` interface
|
||||
event.features = features;
|
||||
onHover(event);
|
||||
}
|
||||
|
||||
const isHovering = interactiveLayerIds && features && features.length > 0;
|
||||
const isEntering = isHovering && !this.state.isHovering;
|
||||
const isExiting = !isHovering && this.state.isHovering;
|
||||
|
||||
if (isEntering) {
|
||||
this._onEvent('onMouseEnter', event);
|
||||
}
|
||||
if (isExiting) {
|
||||
this._onEvent('onMouseLeave', event);
|
||||
}
|
||||
if (isEntering || isExiting) {
|
||||
this.setState({isHovering});
|
||||
}
|
||||
|
||||
if (this.props.onHover) {
|
||||
const viewport = new WebMercatorViewport(Object.assign({}, this.props, {
|
||||
width: this._width,
|
||||
height: this._height
|
||||
}));
|
||||
event.lngLat = viewport.unproject(pos);
|
||||
event.features = features;
|
||||
|
||||
this.props.onHover(event);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_onMouseClick = (event) => {
|
||||
_onClick = (event) => {
|
||||
if (this.props.onClick) {
|
||||
const pos = this._getPos(event);
|
||||
const viewport = new WebMercatorViewport(Object.assign({}, this.props, {
|
||||
width: this._width,
|
||||
height: this._height
|
||||
}));
|
||||
event.lngLat = viewport.unproject(pos);
|
||||
event.features = this._getFeatures({pos, radius: this.props.clickRadius});
|
||||
|
||||
event = this._normalizeEvent(event);
|
||||
// backward compatibility: v3 `onClick` interface
|
||||
event.features = this._getFeatures({pos: event.point, radius: this.props.clickRadius});
|
||||
this.props.onClick(event);
|
||||
}
|
||||
}
|
||||
|
||||
_onContextMenu = (event) => {
|
||||
if (this.props.onContextMenu) {
|
||||
this.props.onContextMenu(event);
|
||||
}
|
||||
}
|
||||
|
||||
_eventCanvasLoaded = (ref) => {
|
||||
// This will be called with `null` after unmount, releasing event manager resource
|
||||
this._eventManager.setElement(ref);
|
||||
|
||||
@ -130,15 +130,19 @@ const docPages = {
|
||||
content: getDocUrl('components/map-controls.md')
|
||||
},
|
||||
{
|
||||
name: 'Navigation Control',
|
||||
name: 'NavigationControl',
|
||||
content: getDocUrl('components/navigation-control.md')
|
||||
},
|
||||
{
|
||||
name: 'PointerEvent',
|
||||
content: getDocUrl('components/pointer-event.md')
|
||||
},
|
||||
{
|
||||
name: 'Popup',
|
||||
content: getDocUrl('components/popup.md')
|
||||
},
|
||||
{
|
||||
name: 'Static Map',
|
||||
name: 'StaticMap',
|
||||
content: getDocUrl('components/static-map.md')
|
||||
},
|
||||
{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user