mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-18 15:54:22 +00:00
57 lines
2.2 KiB
Markdown
57 lines
2.2 KiB
Markdown
# 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:
|
|
```jsx
|
|
<ReactMapGL
|
|
{...this.state.viewport}
|
|
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:
|
|
|
|
```jsx
|
|
_onViewportChange = viewport => {
|
|
if (viewport.longitude > 0) {
|
|
viewport.longitude = 0;
|
|
}
|
|
this.setState({viewport});
|
|
}
|
|
|
|
render() {
|
|
return <ReactMapGL {...this.state.viewport} onViewportChange={this._onViewportChange} />
|
|
}
|
|
```
|
|
|
|
Or manipulate the viewport outside of the ReactMap component:
|
|
|
|
```jsx
|
|
_goToNYC = () => {
|
|
const viewport = {...this.state.viewport, longitude: -74.1, latitude: 40.7};
|
|
this.setState({viewport});
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<ReactMapGL {...this.state.viewport} onViewportChange={this._onViewportChange} />
|
|
<button onClick={this._goToNYC}>New York City</button>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
|
|
## 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.
|
|
|
|
You can even use the package [redux-map-gl](https://github.com/Willyham/redux-map-gl) to save you some writing.
|