From ca941f4bd7c35fa10b8d00ce3d872a40712b469c Mon Sep 17 00:00:00 2001
From: Franc Camps-Febrer <francamps@gmail.com>
Date: Fri, 8 Feb 2019 11:27:10 -0500
Subject: [PATCH] Put event locations on top of narrative arrows in map

---
 src/components/Map.jsx                           |  4 ++--
 src/components/presentational/Map/Events.jsx     |  4 +++-
 src/components/presentational/Map/Narratives.jsx | 10 ++++++++--
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/Map.jsx b/src/components/Map.jsx
index 97cf11b..2b8e03d 100644
--- a/src/components/Map.jsx
+++ b/src/components/Map.jsx
@@ -243,9 +243,9 @@ class Map extends React.Component {
         {this.renderMarkers()}
         {isShowingSites ? this.renderSites() : null}
         {this.renderShapes()}
-        {this.renderEvents()}
         {this.renderNarratives()}
-        {this.renderSelected()}
+        {this.renderEvents()}
+        {this.renderSelected()}        
       </React.Fragment>
     ) : null
 
diff --git a/src/components/presentational/Map/Events.jsx b/src/components/presentational/Map/Events.jsx
index e4ca77c..9640386 100644
--- a/src/components/presentational/Map/Events.jsx
+++ b/src/components/presentational/Map/Events.jsx
@@ -108,7 +108,9 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
 
   return (
     <Portal node={svg}>
-      {locations.map(renderLocation)}
+      <g className='event-locations'>
+        {locations.map(renderLocation)}
+      </g>
     </Portal>
   )
 }
diff --git a/src/components/presentational/Map/Narratives.jsx b/src/components/presentational/Map/Narratives.jsx
index e3957d7..5fafac6 100644
--- a/src/components/presentational/Map/Narratives.jsx
+++ b/src/components/presentational/Map/Narratives.jsx
@@ -135,11 +135,17 @@ function MapNarratives ({ styles, onSelectNarrative, svg, narrative, narratives,
     )
   }
 
-  if (narrative === null) return (<div />)
+  if (narrative === null) return (
+    <Portal node={svg}>
+      <g/>
+    </Portal>
+  )
 
   return (
     <Portal node={svg}>
-      {narratives.map(n => renderNarrative(n))}
+      <g className='narratives'>
+        {narratives.map(n => renderNarrative(n))}
+      </g>
     </Portal>
   )
 }