diff --git a/docs/Components.md b/docs/Components.md index 3074648a..53eefaf1 100644 --- a/docs/Components.md +++ b/docs/Components.md @@ -81,6 +81,7 @@ This is the top-level component that must be mounted for children ones to be ren - `className: string` (optional): className property of the `
` container for the map. - `maxBounds: bounds` (optional) - `style: object` (optional): style property of the `
` container for the map. +- `useFlyTo: boolean` (optional): boolean to control whether to use flyTo functions for bounds and center. If false `map.fitBounds` and `map.setView` will be used. If true `map.flyToBounds` and `map.flyTo` will be used. Defaults to false. - `zoom: number` (optional) **Other properties** diff --git a/src/Map.js b/src/Map.js index beff5cf4..f256a5ae 100644 --- a/src/Map.js +++ b/src/Map.js @@ -38,11 +38,13 @@ export default class Map extends MapComponent { maxZoom: PropTypes.number, minZoom: PropTypes.number, style: PropTypes.object, + useFlyTo: PropTypes.bool, zoom: PropTypes.number, }; static defaultProps = { animate: false, + useFlyTo: false, }; static childContextTypes = { @@ -66,20 +68,31 @@ export default class Map extends MapComponent { } componentDidUpdate (prevProps: Object) { - const { bounds, boundsOptions, center, maxBounds, zoom, animate } = this.props + const { animate, bounds, boundsOptions, center, maxBounds, useFlyTo, zoom } = this.props + if (center && this.shouldUpdateCenter(center, prevProps.center)) { - this.leafletElement.setView(center, zoom, {animate}) + if (useFlyTo) { + this.leafletElement.flyTo(center, zoom, {animate}) + } else { + this.leafletElement.setView(center, zoom, {animate}) + } } else if (zoom && zoom !== prevProps.zoom) { this.leafletElement.setZoom(zoom) } + if (maxBounds && this.shouldUpdateBounds(maxBounds, prevProps.maxBounds)) { this.leafletElement.setMaxBounds(maxBounds) } + if (bounds && ( this.shouldUpdateBounds(bounds, prevProps.bounds) || boundsOptions !== prevProps.boundsOptions )) { - this.leafletElement.fitBounds(bounds, boundsOptions) + if (useFlyTo) { + this.leafletElement.flyToBounds(bounds, boundsOptions) + } else { + this.leafletElement.fitBounds(bounds, boundsOptions) + } } }