diff --git a/docs/components/interactive-map.md b/docs/components/interactive-map.md index 953ffc64..9f08a9ed 100644 --- a/docs/components/interactive-map.md +++ b/docs/components/interactive-map.md @@ -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) diff --git a/docs/components/pointer-event.md b/docs/components/pointer-event.md new file mode 100644 index 00000000..fffd3108 --- /dev/null +++ b/docs/components/pointer-event.md @@ -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. diff --git a/docs/components/static-map.md b/docs/components/static-map.md index 1c514b5b..c6e140ec 100644 --- a/docs/components/static-map.md +++ b/docs/components/static-map.md @@ -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` diff --git a/src/components/interactive-map.js b/src/components/interactive-map.js index fbc5ddc0..08580c65 100644 --- a/src/components/interactive-map.js +++ b/src/components/interactive-map.js @@ -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); diff --git a/website/src/constants/pages.js b/website/src/constants/pages.js index 539595ae..7548f3c4 100644 --- a/website/src/constants/pages.js +++ b/website/src/constants/pages.js @@ -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') }, {