Set map bounds on narrative

src/components/Map.jsx

@@ -44,7 +44,10 @@ class Map extends React.Component {
         this.map.setView([eventPoint.latitude, eventPoint.longitude]);
       }
     }
-  }
+    if (hash(nextProps.app.mapBounds) !== hash(this.props.app.mapBounds) && nextProps.app.mapBounds !== null) {
+      this.map.fitBounds(nextProps.app.mapBounds);
+    }
+  }  
 
   initializeMap() {
     /**
@@ -246,6 +249,7 @@ function mapStateToProps(state) {
       selected: state.app.selected,
       highlighted: state.app.highlighted,
       mapAnchor: state.app.mapAnchor,
+      mapBounds: state.app.filters.mapBounds
       narrative: state.app.narrative,
       flags: {
         isShowingSites: state.app.flags.isShowingSites

src/reducers/app.js

@@ -39,6 +39,10 @@ function updateNarrative(appState, action) {
   let minTime = appState.filters.timerange[0];
   let maxTime = appState.filters.timerange[1];
 
+  let cornerBound0 = [180, 180];
+  let cornerBound1 = [-180, -180];
+
+  // Compute narrative time range and map bounds
   if (!!action.narrative) {
     minTime = parseDate('2100-01-01T00:00:00');
     maxTime = parseDate('1900-01-01T00:00:00');
@@ -47,6 +51,11 @@ function updateNarrative(appState, action) {
       const stepTime = parseDate(step.timestamp);
       if (stepTime < minTime) minTime = stepTime;
       if (stepTime > maxTime) maxTime = stepTime;
+
+      if (+step.longitude < cornerBound0[1]) cornerBound0[1] = +step.longitude;
+      if (+step.longitude > cornerBound1[1]) cornerBound1[1] = +step.longitude;
+      if (+step.latitude < cornerBound0[0]) cornerBound0[0] = +step.latitude;
+      if (+step.latitude > cornerBound1[0]) cornerBound1[0] = +step.latitude;
     });
   }
 
@@ -58,7 +67,8 @@ function updateNarrative(appState, action) {
     },
     filters: {
       ...appState.filters,
-      timerange: [minTime, maxTime]
+      timerange: [minTime, maxTime],
+      mapBounds: [cornerBound0, cornerBound1]
     }
   }
 }

src/store/initial.js

@@ -41,6 +41,7 @@ const initial = {
         d3.timeParse("%Y-%m-%dT%H:%M:%S")("2013-02-23T12:00:00"),
         d3.timeParse("%Y-%m-%dT%H:%M:%S")("2016-02-23T12:00:00")
       ],
+      mapBounds: null,
       tags: [],
       categories: [],
       views: {