State Management

InteractiveMap is designed to be a stateless component. Its appearance is entirely controlled by the properties that are passed in from its parent. In this architecture, transition works the same way as interaction: the component shall notify the application of "user intent" by calling the onViewportChange callback, but ultimately the application needs to decide what to do with it.

The most simple handling of this intent is to save it and pass it back to the component:

    onViewportChange={(viewport) => this.setState({viewport})} />

User interaction and transition will not work without a valid onViewportChange handler.

The advantage of this practice is that it ensures a single source of truth regarding the viewport state (in the example above, saved in the state of the container component). When you use this viewport state to direct the rendering of other components, it is guaranteed that they will always be synced with the map.

You may apply additional constraints to the viewport:

_onViewportChange = viewport => {
    if (viewport.longitude > 0) {
        viewport.longitude = 0;

render() {
    return <ReactMapGL {...this.state.viewport} onViewportChange={this._onViewportChange} />

Or manipulate the viewport outside of the ReactMap component:

_goToNYC = () => {
    const viewport = {...this.state.viewport, longitude: -74.1, latitude: 40.7};

render() {
    return (
            <ReactMapGL {...this.state.viewport} onViewportChange={this._onViewportChange} />
            <button onClick={this._goToNYC}>New York City</button>

Using with Redux

If you're using redux, it is very easy to hook this component up to store state in the redux state tree. The simplest way is to take all properties passed to the onViewportChange function property and add them directly into the store. This state can then be passed back to the <ReactMapGL> component without any transformation.