add MapShapes, analog of MapSites

src/components/Map.jsx

@@ -10,6 +10,7 @@ import 'leaflet';
 import { isNotNullNorUndefined } from '../js/utilities';
 
 import MapSites from './MapSites.jsx';
+import MapShapes from './MapShapes.jsx';
 import MapEvents from './MapEvents.jsx';
 import MapSelectedEvents from './MapSelectedEvents.jsx';
 import MapNarratives from './MapNarratives.jsx';
@@ -147,6 +148,17 @@ class Map extends React.Component {
     );
   }
 
+  renderShapes() {
+    return (
+      <MapShapes
+        shapes={this.props.domain.shapes}
+        map={this.map}
+        mapTransformX={this.state.mapTransformX}
+        mapTransformY={this.state.mapTransformY}
+      />
+    )
+  }
+
   renderNarratives() {
     return (
       <MapNarratives
@@ -223,16 +235,22 @@ class Map extends React.Component {
   render() {
     const { isShowingSites } = this.props.app.flags
     const classes = this.props.app.narrative ? 'map-wrapper narrative-mode' : 'map-wrapper';
+    const innerMap = !!this.map ? (
+      <React.Fragment>
+        {this.renderTiles()}
+        {this.renderMarkers()}
+        {isShowingSites ? this.renderSites() : null}
+        {this.renderShapes()}
+        {this.renderEvents()}
+        {this.renderNarratives()}
+        {this.renderSelected()}
+      </React.Fragment>
+    ) : null
 
     return (
       <div className={classes}>
         <div id={this.props.ui.dom.map} />
-        {(this.map !== null) ? this.renderTiles() : ''}
-        {(this.map !== null) ? this.renderMarkers() : ''}
-        {(this.map !== null) && isShowingSites ? this.renderSites() : ''}
-        {(this.map !== null) ? this.renderEvents() : ''}
-        {(this.map !== null) ? this.renderNarratives() : ''}
-        {(this.map !== null) ? this.renderSelected() : ''}
+        {innerMap}
       </div>
     );
   }
@@ -244,7 +262,8 @@ function mapStateToProps(state) {
       locations: selectors.selectLocations(state),
       narratives: selectors.selectNarratives(state),
       categories: selectors.selectCategories(state),
-      sites: selectors.getSites(state)
+      sites: selectors.getSites(state),
+      shapes: selectors.getShapes(state)
     },
     app: {
       views: state.app.filters.views,

src/components/MapShapes.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+function MapShapes({ map, shapes, mapTransformX, mapTransformY }) {
+  function projectPoint(location) {
+    const latLng = new L.LatLng(location[0], location[1]);
+    return {
+      x: map.latLngToLayerPoint(latLng).x + mapTransformX,
+      y: map.latLngToLayerPoint(latLng).y + mapTransformY
+    };
+  }
+
+  function renderShape(shape) {
+    const coords = shape.points.map(projectPoint)
+    return coords.map(pt => (
+      <div
+        className="leaflet-tooltip shape-label leaflet-zoom-animated leaflet-tooltip-top"
+        style={{ opacity: 1, transform: `translate3d(calc(${pt.x}px - 50%), ${pt.y - 25}px, 0px)`}}>
+        {shape.name}
+      </div>
+    ));
+  }
+
+  if (!shapes || !shapes.length) return null;
+
+  return (
+    <div className="shapes-layer">
+      {shapes.map(renderShape)}
+    </div>
+  )
+
+}
+
+export default MapShapes;

src/components/MapSites.jsx

@@ -1,36 +1,33 @@
 import React from 'react';
 
-class MapSites extends React.Component {
-
-  projectPoint(location) {
+function MapSites({ map, sites, mapTransformX, mapTransformY }) {
+  function 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
+      x: map.latLngToLayerPoint(latLng).x + mapTransformX,
+      y: map.latLngToLayerPoint(latLng).y + mapTransformY
     };
   }
 
-  renderSite(site) {
-    const { x, y } = this.projectPoint([site.latitude, site.longitude]);
+  function renderSite(site) {
+    const { x, y } = projectPoint([site.latitude, site.longitude]);
 
     return (<div
-        className="leaflet-tooltip site-label leaflet-zoom-animated leaflet-tooltip-top"
-        style={{ opacity: 1, transform: `translate3d(calc(${x}px - 50%), ${y - 25}px, 0px)`}}>
-        {site.site}
-      </div>
+      className="leaflet-tooltip site-label leaflet-zoom-animated leaflet-tooltip-top"
+      style={{ opacity: 1, transform: `translate3d(calc(${x}px - 50%), ${y - 25}px, 0px)`}}>
+      {site.site}
+    </div>
     );
   }
 
-  render () {
-    if (!this.props.sites || !this.props.sites.length) return <div />;
+  if (!sites || !sites.length) return null;
 
-    return (
-      <div className="sites-layer">
-        {this.props.sites.map(site => { return this.renderSite(site); })}
-      </div>
-    )
-  }
+  return (
+    <div className="sites-layer">
+      {sites.map(renderSite)}
+    </div>
+  )
 
 }
 
-export default MapSites;
+export default MapSites;