Add ZoomPanOptions and FitBoundsOptions to Map component (#593)

* Pass zoom/pan and fit bounds options from Map props to leaflet element. Updated components docs

* Bugfix: fixed FItBoundsOptions

* Fixed Prettier errors

docs/components.md

@@ -103,6 +103,9 @@ This is the top-level component that must be mounted for child components to be
 **Dynamic properties**
 
 - `animate: boolean` (optional): If `true`, panning will always be animated if possible. Defaults to `false`.
+- `duration: number` (optional): Duration of animated panning, in seconds. Defaults to `0.25`.
+- `easeLinearity: number` (optional): The curvature factor of panning animation easing (third parameter of the Cubic Bezier curve). 1.0 means linear animation, and the smaller this number, the more bowed the curve. Defaults to `0.25`.
+- `noMoveStart: boolean` (optional): If true, panning won't fire movestart event on start (used internally for panning inertia). Defaults to `false`.
 - `bounds: bounds` (optional): A rectangle for the map to contain. It will be centered, and the map will zoom in as close as it can while still showing the full bounds. Changes are compared using the [`🍃 equals() method of LatLngBounds`](http://leafletjs.com/reference-1.5.0.html#latlngbounds-equals).
 - `boundsOptions: Object` (optional): Options passed to the `fitBounds()` method.
 - `boxZoom: boolean` (optional): If `true`, the map can be zoomed to a rectangular area specified by dragging the mouse while pressing the shift key. Defaults to true.

src/Map.js

@@ -80,6 +80,8 @@ type Props = {
   bounceAtZoomLimits?: boolean,
   // Additional options
   animate?: boolean,
+  duration?: number,
+  noMoveStart?: boolean,
   bounds?: LatLngBounds,
   boundsOptions?: {
     paddingTopLeft?: Point,
@@ -130,7 +132,6 @@ export default class Map extends MapEvented<LeafletElement, Props> {
     this._updating = true
 
     const {
-      animate,
       bounds,
       boundsOptions,
       boxZoom,
@@ -154,21 +155,29 @@ export default class Map extends MapEvented<LeafletElement, Props> {
       const c = viewport.center ? viewport.center : center
       const z = viewport.zoom == null ? zoom : viewport.zoom
       if (useFlyTo === true) {
-        this.leafletElement.flyTo(c, z, { animate })
+        this.leafletElement.flyTo(c, z, this.getZoomPanOptions(toProps))
       } else {
-        this.leafletElement.setView(c, z, { animate })
+        this.leafletElement.setView(c, z, this.getZoomPanOptions(toProps))
       }
     } else if (center && this.shouldUpdateCenter(center, fromProps.center)) {
       if (useFlyTo === true) {
-        this.leafletElement.flyTo(center, zoom, { animate })
+        this.leafletElement.flyTo(center, zoom, this.getZoomPanOptions(toProps))
       } else {
-        this.leafletElement.setView(center, zoom, { animate })
+        this.leafletElement.setView(
+          center,
+          zoom,
+          this.getZoomPanOptions(toProps),
+        )
       }
     } else if (typeof zoom === 'number' && zoom !== fromProps.zoom) {
       if (fromProps.zoom == null) {
-        this.leafletElement.setView(center, zoom)
+        this.leafletElement.setView(
+          center,
+          zoom,
+          this.getZoomPanOptions(toProps),
+        )
       } else {
-        this.leafletElement.setZoom(zoom)
+        this.leafletElement.setZoom(zoom, this.getZoomPanOptions(toProps))
       }
     }
 
@@ -182,9 +191,12 @@ export default class Map extends MapEvented<LeafletElement, Props> {
         boundsOptions !== fromProps.boundsOptions)
     ) {
       if (useFlyTo === true) {
-        this.leafletElement.flyToBounds(bounds, boundsOptions)
+        this.leafletElement.flyToBounds(
+          bounds,
+          this.getFitBoundsOptions(toProps),
+        )
       } else {
-        this.leafletElement.fitBounds(bounds, boundsOptions)
+        this.leafletElement.fitBounds(bounds, this.getFitBoundsOptions(toProps))
       }
     }
 
@@ -249,6 +261,24 @@ export default class Map extends MapEvented<LeafletElement, Props> {
     this._updating = false
   }
 
+  getZoomPanOptions(props: Props) {
+    const { animate, duration, easeLinearity, noMoveStart } = props
+    return {
+      animate,
+      duration,
+      easeLinearity,
+      noMoveStart,
+    }
+  }
+
+  getFitBoundsOptions(props: Props) {
+    const zoomPanOptions = this.getZoomPanOptions(props)
+    return {
+      ...zoomPanOptions,
+      ...props.boundsOptions,
+    }
+  }
+
   onViewportChange = () => {
     const center = this.leafletElement.getCenter()
     this.viewport = {
@@ -274,7 +304,10 @@ export default class Map extends MapEvented<LeafletElement, Props> {
     this.leafletElement.on('moveend', this.onViewportChanged)
 
     if (props.bounds != null) {
-      this.leafletElement.fitBounds(props.bounds, props.boundsOptions)
+      this.leafletElement.fitBounds(
+        props.bounds,
+        this.getFitBoundsOptions(props),
+      )
     }
 
     this.contextValue = {