diff --git a/docs/get-started/state-management.md b/docs/get-started/state-management.md index 3425767f..20a0ebda 100644 --- a/docs/get-started/state-management.md +++ b/docs/get-started/state-management.md @@ -11,6 +11,41 @@ The most simple handling of this intent is to save it and pass it back to the co 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 +} +``` + +Or manipulate the viewport outside of the ReactMap component: + +```jsx +_goToNYC = () => { + const viewport = {...this.state, longitude: -74.1, latitude: 40.7}; + this.setState({viewport}); +} + +render() { + return ( +
+ + +
+ ); +} +``` + ## Using with Redux