From 7beb5f4039ebe30ab7fb8f1e7ee5bf7f4649ed29 Mon Sep 17 00:00:00 2001
From: Franc Camps-Febrer <francamps@gmail.com>
Date: Wed, 9 Jan 2019 07:52:52 +0100
Subject: [PATCH] Make map on narrative center in first, keep eth in scope

---
 src/components/Map.jsx      | 24 +++++++++++++-----------
 src/components/Timeline.jsx |  4 ++--
 src/reducers/app.js         | 17 +++++++++++++++++
 3 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/components/Map.jsx b/src/components/Map.jsx
index 894fcf2..14f3fd2 100644
--- a/src/components/Map.jsx
+++ b/src/components/Map.jsx
@@ -35,17 +35,19 @@ class Map extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (hash(nextProps.app.selected) !== hash(this.props.app.selected)) {
-
-      // Fly to first  of events selected
-      const eventPoint = (nextProps.app.selected.length > 0) ? nextProps.app.selected[0] : null;
-
-      if (eventPoint !== null && eventPoint.latitude && eventPoint.longitude) {
-        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);
+    // Set appropriate zoom for narrative 
+    if (hash(nextProps.app.mapBounds) !== hash(this.props.app.mapBounds)
+      && nextProps.app.mapBounds !== null) {
+        this.map.fitBounds(nextProps.app.mapBounds);
+    } else {
+      if (hash(nextProps.app.selected) !== hash(this.props.app.selected)) {
+        // Fly to first  of events selected
+        const eventPoint = (nextProps.app.selected.length > 0) ? nextProps.app.selected[0] : null;
+  
+        if (eventPoint !== null && eventPoint.latitude && eventPoint.longitude) {
+          this.map.setView([eventPoint.latitude, eventPoint.longitude]);
+        }
+      }  
     }
   }  
 
diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx
index eded3c1..e454ec7 100644
--- a/src/components/Timeline.jsx
+++ b/src/components/Timeline.jsx
@@ -60,8 +60,8 @@ class Timeline extends React.Component {
     }
 
     if (hash(nextProps.app.selected) !== hash(this.props.app.selected)) {
-      if (nextProps.app.selected !== null) {
-       this.onCenterTime(parseDate(nextProps.app.selected[0].timestamp));
+      if (!!nextProps.app.selected && nextProps.app.selected.length > 0) {
+        this.onCenterTime(parseDate(nextProps.app.selected[0].timestamp));
       }
     }
   }
diff --git a/src/reducers/app.js b/src/reducers/app.js
index 3f9eb9c..a17ec9a 100644
--- a/src/reducers/app.js
+++ b/src/reducers/app.js
@@ -47,6 +47,7 @@ function updateNarrative(appState, action) {
     minTime = parseDate('2100-01-01T00:00:00');
     maxTime = parseDate('1900-01-01T00:00:00');
 
+    // Find max and mins coordinates of narrative events
     action.narrative.steps.forEach(step => {
       const stepTime = parseDate(step.timestamp);
       if (stepTime < minTime) minTime = stepTime;
@@ -59,7 +60,23 @@ function updateNarrative(appState, action) {
         if (+step.latitude > cornerBound1[0]) cornerBound1[0] = +step.latitude;  
       }
     });
+    // Adjust bounds to center around first event, while keeping visible all others
+    // Takes first event, finds max ditance with first attempt bounds, and use this max distance
+    // on the other side, both in latitude and longitude
+    const first = action.narrative.steps[0];
+    if (!!first.longitude && !!first.latitude) {
+      const firstToLong0 = Math.abs(+first.longitude - cornerBound0[1]);
+      const firstToLong1 = Math.abs(+first.longitude - cornerBound1[1]);
+      const firstToLat0 = Math.abs(+first.latitude - cornerBound0[0]);
+      const firstToLat1 = Math.abs(+first.latitude - cornerBound1[0]);
 
+      if (firstToLong0 > firstToLong1) cornerBound1[1] = +first.longitude + firstToLong0;
+      if (firstToLong0 < firstToLong1) cornerBound0[1] = +first.longitude - firstToLong1;
+      if (firstToLat0 > firstToLat1) cornerBound1[0] = +first.latitude + firstToLat0;
+      if (firstToLat0 < firstToLat1) cornerBound0[0] = +first.latitude - firstToLat1;
+    }
+    
+    // Add some buffer on both sides of the time extent
     minTime = new Date(minTime.getTime() - Math.abs((maxTime - minTime) / 10));
     maxTime = new Date(maxTime.getTime() + Math.abs((maxTime - minTime) / 10));
   }