Merge pull request #99 from forensic-architecture/fix/event-narrative-order

Put event locations on top of narrative arrows in map

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
 

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>
   )
 }

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>
   )
 }