react-map-gl/docs/components/interactive-map.md

InteractiveMap

This component renders MapboxGL and provides full interactivity support. It uses StaticMap underneath to render the final map component. This is the default exported component from ReactMapGL.

import {Component} from 'react';
import ReactMapGL from 'react-map-gl';

class Map extends Component {
  render() {
    return (
      <ReactMapGL
        width={400}
        height={400}
        latitude={37.7577}
        longitude={-122.4376}
        zoom={8}
        onViewportChange={(viewport) => {
          const {width, height, latitude, longitude, zoom} = viewport;
          // call `setState` and use the state to update the map.
        }}
      />
    );
  }
}

Properties

Has all properties of StaticMap and the following:

onViewportChange {Function}

Callback that is fired when the user interacted with the map. The object passed to the callback contains viewport properties such as longitude, latitude, zoom etc.

If the map is intended to be interactive, the app use this prop to listen to map updates and update the props accordingly.

maxZoom {Number} [default: 20]

Max zoom level.

minZoom {Number} [default: 0]

Min zoom level.

maxPitch {Number} [default: 60]

Max pitch in degrees.

minPitch {Number} [default: 0]

Min pitch in degrees.

scrollZoom {Bool} [default: true]

Enable croll to zoom.

dragPan {Bool} [default: true]

Enable drag to pan.

dragRotate {Bool} [default: true]

Enable drag to rotate.

doubleClickZoom {Bool} [default: true]

Enable double click to zoom.

touchZoomRotate {Bool} [default: true]

Enable touch to zoom and rotate.

clickRadius {Number} [default: 0]

Radius to detect features around a clicked point.

mapControls {Object}

A map control instance to replace the default map controls. This object must implement the following interface:

• events - An array of subscribed events
• handleEvent(event, context) - A method that handles interactive events

visibilityConstraints {Object} ==EXPERIMENTAL==

An object with the bounding minZoom, maxZoom, minPitch, maxPitch within which the map should be visible. This will manage automatically toggling the visible prop in StaticMap.

Parameters

• event - The pointer event.
  • event.lngLat - The geo coordinates that is being hovered.
  • event.features - The array of features under the pointer, queried using Mapbox's queryRenderedFeatures API. To make a layer interactive, set the interactive property in the layer style to true.

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 API. To make a layer interactive, set the interactive property in the layer style to true.

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 API. To make a layer interactive, set the interactive property in the layer style to true.

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 a clickable feature.

transitionDuration {Number}

Duration of transition in milliseconds. If specified, the map's viewport will smoothly move from the previous props to the current one. Default 0;

transitionInterpolator {Object}

An interpolator object that defines the transition behavior between two map states. react-map-gl offers two interpolators:

• LinearInterpolator - similar to Mapbox's easeTo behavior.
• FlyToInterpolator - similar to Mapbox's flyTo behavior.

You may import them as follows:

import ReactMapGL, {LinearInterpolator, FlyToInterpolator} from 'react-map-gl';

<ReactMapGL transitionDuration={1000} transitionInterpolator={new FlyToInterpolator()}>

Default: new LinearInterpolator()

For details about using transition interpolators, see transitions.

transitionEasing {Function}

Easing function that maps a value from [0, 1] to [0, 1]. Default to t => t (linear). Check out http://easings.net/ for common easing curves.

transitionInterruption {Number}

What to do if an ongoing transition is interrupted by another transition. There are 3 options:

• TRANSITION_EVENTS.BREAK - Start new transition from the current view. This is the default.
• TRANSITION_EVENTS.SNAP_TO_END - Jump to the end of the previous transition before starting the new transition.
• TRANSITION_EVENTS.IGNORE - Complete the previous transition and ignore the new viewport change.

You may import the constants as follows:

import {TRANSITION_EVENTS} from 'react-map-gl';

onTransitionStart {Function}

Callback that is fired when a transition is triggered.

onTransitionInterrupt {Function}

Callback that is fired when an ongoing transition is interrupted by another transition.

onTransitionEnd {Function}

Callback that is fired when a transition is complete.

Methods

Same methods as StaticMap.