Reactify selected marker in map

src/components/Map.jsx

@@ -5,10 +5,13 @@ import { connect } from 'react-redux'
 import * as selectors from '../selectors'
 
 import hash from 'object-hash';
+import 'leaflet';
+
+import { isNotNullNorUndefined } from '../js/utilities';
 
-import MapLogic from '../js/map/map.js'
 import MapSites from './MapSites.jsx';
 import MapEvents from './MapEvents.jsx';
+import MapSelectedEvents from './MapSelectedEvents.jsx';
 import MapNarratives from './MapNarratives.jsx';
 import MapDefsMarkers from './MapDefsMarkers.jsx';
 
@@ -31,8 +34,14 @@ class Map extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (hash(nextProps.app) !== hash(this.props.app)) {
-      this.mapLogic.update(nextProps.app)
+    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.latitude && eventPoint.longitude) {
+        this.map.flyTo([eventPoint.latitude, eventPoint.longitude]);
+      }
     }
   }  
 
@@ -75,9 +84,6 @@ class Map extends React.Component {
 
     this.addResizeListener();
 
-    this.mapLogic = new MapLogic(map, this.svgRef.current, this.props.app, this.props.ui);
-    this.mapLogic.update(this.props.app);
-
     this.map = map;
   }
 
@@ -177,6 +183,19 @@ class Map extends React.Component {
     );
   }
 
+  renderSelected() {
+    return (
+      <MapSelectedEvents
+        svg={this.svgRef.current}
+        selected={this.props.app.selected}
+        map={this.map}
+        mapTransformX={this.state.mapTransformX}
+        mapTransformY={this.state.mapTransformY}
+      />
+    );
+  }
+
+
   renderMarkers() {
     return (
       <Portal node={this.svgRef.current}>
@@ -197,6 +216,7 @@ class Map extends React.Component {
         {(this.map !== null) ? this.renderSites() : ''}
         {(this.map !== null) ? this.renderEvents() : ''}
         {(this.map !== null) ? this.renderNarratives() : ''}
+        {(this.map !== null) ? this.renderSelected() : ''}
       </div>
     );
   }

src/components/MapSelectedEvents.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Portal } from 'react-portal';
+
+class MapSelectedEvents extends React.Component {
+
+  projectPoint(location) {
+    const latLng = new L.LatLng(location[0], location[1]);
+    return {
+      x: this.props.map.latLngToLayerPoint(latLng).x + this.props.mapTransformX,
+      y: this.props.map.latLngToLayerPoint(latLng).y + this.props.mapTransformY
+    };
+  }
+
+  renderMarker (event) {
+    const { x, y } = this.projectPoint([event.latitude, event.longitude]);
+    console.log(x, y)
+    return (
+      <g
+        className="location-marker"
+        transform={`translate(${x - 32}, ${y})`}
+      >
+        <path
+          className="leaflet-interactive"
+          stroke="#ffffff"
+          stroke-opacity="1"
+          stroke-width="3"
+          stroke-linecap=""
+          stroke-linejoin="round"
+          stroke-dasharray="5,2"
+          fill="none"
+          d="M0,0a32,32 0 1,0 64,0 a32,32 0 1,0 -64,0 "
+        >
+        </path>
+      </g>
+    );
+  }
+
+  render() {
+    return (
+      <Portal node={this.props.svg}>
+        {this.props.selected.map(s => this.renderMarker(s))}
+      </Portal>
+    )
+  }
+}
+export default MapSelectedEvents;