fix(map): Fix issues related to map auto-fitting to results

Author: David Emory

lib/components/map/base-map.js

@@ -1,13 +1,12 @@
-import { latLngBounds } from 'leaflet'
-import polyline from '@mapbox/polyline'
 import objectPath from 'object-path'
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { Map, TileLayer, LayersControl, Marker, Popup } from 'react-leaflet'
+import { Map, TileLayer, LayersControl } from 'react-leaflet'
 
 import { setLocation } from '../../actions/map'
 import { constructLocation } from '../../util/map'
 import { getActiveItinerary, getActiveSearch } from '../../util/state'
+import { getItineraryBounds } from '../../util/itinerary'
 
 class BaseMap extends Component {
   static propTypes = {
@@ -45,20 +44,19 @@ class BaseMap extends Component {
 
   componentWillReceiveProps(nextProps) {
     // TODO: maybe setting bounds ought to be handled in map props...
-    // Pan to to entire itinerary if made active (clicked)
-    /*if (nextProps.itinerary && nextProps.activeLeg === null) {
-      let coords = []
-      nextProps.itinerary.legs.forEach(leg => {
-        const legCoords = polyline
-          .toGeoJSON(leg.legGeometry.points)
-          .coordinates.map(c => [c[1], c[0]])
-        coords = [...coords, ...legCoords]
-      })
+
+    // Fit map to to entire itinerary if active itinerary bounds changed
+    const oldItinBounds = this.props.itinerary && getItineraryBounds(this.props.itinerary)
+    const newItinBounds = nextProps.itinerary && getItineraryBounds(nextProps.itinerary)
+    if (
+      (!oldItinBounds && newItinBounds) ||
+      (oldItinBounds && newItinBounds && !oldItinBounds.equals(newItinBounds))
+    ) {
       this.refs.map &&
-        this.refs.map.leafletElement.fitBounds(latLngBounds(coords), {
+        this.refs.map.leafletElement.fitBounds(newItinBounds, {
           padding: [3, 3]
         })
-    }*/
+    }
     // Pan to to itinerary step if made active (clicked)
     if (
       nextProps.itinerary &&
@@ -86,6 +84,12 @@ class BaseMap extends Component {
 
   resized () {
     this.refs.map.leafletElement.invalidateSize()
+    if (this.props.itinerary) {
+      this.refs.map &&
+        this.refs.map.leafletElement.fitBounds(getItineraryBounds(this.props.itinerary), {
+          padding: [3, 3]
+        })
+    }
   }
 
   render () {

lib/util/itinerary.js

@@ -1,4 +1,6 @@
 import React from 'react'
+import { latLngBounds } from 'leaflet'
+import polyline from '@mapbox/polyline'
 
 import ModeIcon from '../components/icons/mode-icon'
 
@@ -70,3 +72,14 @@ export function getModeIcon (mode, customIcons) {
   }
   return <ModeIcon mode={mode} />
 }
+
+export function getItineraryBounds (itinerary) {
+  let coords = []
+  itinerary.legs.forEach(leg => {
+    const legCoords = polyline
+      .toGeoJSON(leg.legGeometry.points)
+      .coordinates.map(c => [c[1], c[0]])
+    coords = [...coords, ...legCoords]
+  })
+  return latLngBounds(coords)
+}