events have yellow outline on hover

src/components/Map.jsx

@@ -50,7 +50,13 @@ class Map extends React.Component {
         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])
+          // this.map.setView([eventPoint.latitude, eventPoint.longitude])
+          this.map.setView([eventPoint.latitude, eventPoint.longitude], this.map.getZoom(), {
+            "animate":true,
+            "pan":{
+              "duration": 0.7
+            }
+          })
         }
       }
     }
@@ -207,6 +213,7 @@ class Map extends React.Component {
         styleLocation={this.styleLocation}
         categories={this.props.domain.categories}
         projectPoint={this.projectPoint}
+        selected={this.props.app.selected}
         narrative={this.props.app.narrative}
         onSelect={this.props.methods.onSelect}
         onSelectNarrative={this.props.methods.onSelectNarrative}

src/components/presentational/Map/Events.jsx

@@ -1,13 +1,28 @@
 import React from 'react'
 import { Portal } from 'react-portal'
 
-function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation, narrative, onSelect, svg, locations }) {
+function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation, selected, narrative, onSelect, svg, locations }) {
   function getCoordinatesForPercent (radius, percent) {
     const x = radius * Math.cos(2 * Math.PI * percent)
     const y = radius * Math.sin(2 * Math.PI * percent)
     return [x, y]
   }
 
+  function renderBorder() {
+    return (
+      <React.Fragment>
+        {<circle
+          class='event-hover'
+          cx="0"
+          cy="0"
+          r="10"
+          stroke="#ffd800"
+          fill-opacity="0.0"
+        />}
+      </React.Fragment>
+    )
+  }
+
   function renderLocationSlicesByCategory (location) {
     const locCategory = location.events.length > 0 ? location.events[0].category : 'default'
     const customStyles = styleLocation ? styleLocation(location) : null
@@ -94,16 +109,20 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
     const customStyles = styleLocation ? styleLocation(location) : null
     const extraRender = (customStyles) ? customStyles[1] : null
 
-    return (
-      <g
-        className={`location ${narrative ? 'no-hover' : ''}`}
-        transform={`translate(${x}, ${y})`}
-        onClick={(!narrative) ? () => onSelect(location.events) : null}
-      >
-        {renderLocationSlicesByCategory(location)}
-        {extraRender ? extraRender() : null}
-      </g>
+    const isSelected = selected.reduce( (acc, event) => {
+      return acc || (event.latitude == location.latitude && event.longitude == location.longitude)
+    }, false)
 
+    return (
+        <g
+          className={`location-event ${narrative ? 'no-hover' : ''}`}
+          transform={`translate(${x}, ${y})`}
+          onClick={(!narrative) ? () => onSelect(location.events) : null}
+        >
+          {renderLocationSlicesByCategory(location)}
+          {extraRender ? extraRender() : null}
+          {isSelected ? null : renderBorder()}
+        </g>
     )
   }
 

src/scss/map.scss

@@ -161,7 +161,15 @@
 * Elements
 */
 
-.location {
+.event-hover {
+  opacity: 0;
+}
+
+.event-hover:hover {
+  opacity: 1;
+}
+
+.location-event {
   cursor: pointer;
 }