From 813d912d05b2dcc30dc38e040002789cf6861be2 Mon Sep 17 00:00:00 2001 From: Joel Date: Sat, 23 Jul 2016 06:53:51 -0500 Subject: [PATCH 1/6] add useFlyTo, flyToBounds, and flyTo --- src/Map.js | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/Map.js b/src/Map.js index beff5cf4..f006a4c6 100644 --- a/src/Map.js +++ b/src/Map.js @@ -38,6 +38,7 @@ export default class Map extends MapComponent { maxZoom: PropTypes.number, minZoom: PropTypes.number, style: PropTypes.object, + useFlyTo: PropTypes.bool, zoom: PropTypes.number, }; @@ -66,20 +67,33 @@ export default class Map extends MapComponent { } componentDidUpdate (prevProps: Object) { - const { bounds, boundsOptions, center, maxBounds, zoom, animate } = this.props + const { bounds, boundsOptions, center, maxBounds, zoom, animate, useFlyTo } = 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) + } + } } From 945bd629efc58b3af51bfacc69b10dc82495bd62 Mon Sep 17 00:00:00 2001 From: Joel Date: Sat, 23 Jul 2016 06:55:44 -0500 Subject: [PATCH 2/6] fix tests, use uniqueId from lodash --- src/Map.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/Map.js b/src/Map.js index f006a4c6..e66fc0c4 100644 --- a/src/Map.js +++ b/src/Map.js @@ -3,7 +3,7 @@ import Leaflet from 'leaflet' import type { LatLng, LatLngBounds } from 'leaflet' -import { isUndefined, omit } from 'lodash' +import { isUndefined, omit, uniqueId } from 'lodash' import React, { PropTypes } from 'react' import boundsType from './types/bounds' @@ -56,6 +56,12 @@ export default class Map extends MapComponent { } } + constructor (props: Object, context: Object) { + super(props, context) + this.state = { + id: props.id || uniqueId('map'), + } + } componentDidMount () { const props = omit(this.props, ['children', 'className', 'id', 'style']) this.leafletElement = Leaflet.map(this.container, props) @@ -87,13 +93,11 @@ export default class Map extends MapComponent { this.shouldUpdateBounds(bounds, prevProps.bounds) || boundsOptions !== prevProps.boundsOptions )) { - if (useFlyTo) { this.leafletElement.flyToBounds(bounds, boundsOptions) } else { this.leafletElement.fitBounds(bounds, boundsOptions) } - } } @@ -129,7 +133,7 @@ export default class Map extends MapComponent { return (
{children} From bad4103ac58819b8873dda8b9869c76dcca92c76 Mon Sep 17 00:00:00 2001 From: Joel Date: Sat, 23 Jul 2016 07:04:03 -0500 Subject: [PATCH 3/6] deconstruct in alphabetical order --- src/Map.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Map.js b/src/Map.js index e66fc0c4..99fca1aa 100644 --- a/src/Map.js +++ b/src/Map.js @@ -73,7 +73,7 @@ export default class Map extends MapComponent { } componentDidUpdate (prevProps: Object) { - const { bounds, boundsOptions, center, maxBounds, zoom, animate, useFlyTo } = this.props + const { animate, bounds, boundsOptions, center, maxBounds, useFlyTo, zoom } = this.props if (center && this.shouldUpdateCenter(center, prevProps.center)) { if (useFlyTo) { From 60a2deea27a2c1ef12bd1d7394977303411c4951 Mon Sep 17 00:00:00 2001 From: Joel Date: Sat, 23 Jul 2016 07:11:24 -0500 Subject: [PATCH 4/6] add documentation for flyTo --- docs/Components.md | 1 + 1 file changed, 1 insertion(+) 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** From 1e9c6e586ae65a16a55687a10518d6614b7cb557 Mon Sep 17 00:00:00 2001 From: Joel Date: Sat, 23 Jul 2016 07:11:57 -0500 Subject: [PATCH 5/6] set default value for useFlyTo --- src/Map.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Map.js b/src/Map.js index 99fca1aa..a0f1adef 100644 --- a/src/Map.js +++ b/src/Map.js @@ -44,6 +44,7 @@ export default class Map extends MapComponent { static defaultProps = { animate: false, + useFlyTo: false, }; static childContextTypes = { From bbd23d29dada5a68aa638d23f77dfe82ac1d1b22 Mon Sep 17 00:00:00 2001 From: Joel Date: Sun, 24 Jul 2016 04:51:39 -0500 Subject: [PATCH 6/6] remove custom id generator. --- src/Map.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/Map.js b/src/Map.js index a0f1adef..f256a5ae 100644 --- a/src/Map.js +++ b/src/Map.js @@ -3,7 +3,7 @@ import Leaflet from 'leaflet' import type { LatLng, LatLngBounds } from 'leaflet' -import { isUndefined, omit, uniqueId } from 'lodash' +import { isUndefined, omit } from 'lodash' import React, { PropTypes } from 'react' import boundsType from './types/bounds' @@ -57,12 +57,6 @@ export default class Map extends MapComponent { } } - constructor (props: Object, context: Object) { - super(props, context) - this.state = { - id: props.id || uniqueId('map'), - } - } componentDidMount () { const props = omit(this.props, ['children', 'className', 'id', 'style']) this.leafletElement = Leaflet.map(this.container, props) @@ -134,7 +128,7 @@ export default class Map extends MapComponent { return (
{children}