Adjust dimensions of sites-layer innarrative mode

src/components/Map.jsx

@@ -40,8 +40,6 @@ class Map extends React.Component {
         .attr('width', width)
         .attr('height', height);
 
-      this.g = this.svg.append('g');
-
       this.state.map.on('zoomstart', () => {
         this.svg.classed('hide', true);
       });
@@ -49,7 +47,7 @@ class Map extends React.Component {
         this.svg.classed('hide', false);
       });
 
-      this.mapLogic = new MapLogic(this.state.map, this.svg, this.g, this.props.app, this.props.ui, this.props.methods)
+      this.mapLogic = new MapLogic(this.state.map, this.svg, this.props.app, this.props.ui)
       this.mapLogic.update(this.props.app)
 
       this.setState({ isInitialized: true })
@@ -66,9 +64,6 @@ class Map extends React.Component {
   initializeMap() {
     /**
      * Creates a Leaflet map and a tilelayer for the map background
-     * @param {string} id: DOM element to create map onto
-     * @param {array} center: [lat, long] coordinates the map will be centered on
-     * @param {number} zoom: zoom level
      */
     const map = 
       L.map(this.props.mapId)
@@ -99,10 +94,18 @@ class Map extends React.Component {
     map.keyboard.disable();
 
     map.on("move", () => this.updateSVG());
+    map.on("zoomend viewreset moveend", () => this.updateSVG());
+    this.addResizeListener();
 
     this.setState({ map });
   }
 
+  addResizeListener() {
+    window.addEventListener('resize', () => {
+      this.updateSVG();
+    });
+  }
+
   getSVGBoundaries() {
     const mapNode = d3.select('.leaflet-map-pane').node();
     if (mapNode === null) return { transformX: 0, transformY: 0 };
@@ -122,10 +125,10 @@ class Map extends React.Component {
   }
 
   updateSVG() {
-    //const boundingClient = d3.select(`#${this.props.mapId}`).node().getBoundingClientRect();
+    const boundingClient = d3.select(`#${this.props.mapId}`).node().getBoundingClientRect();
 
-    //let WIDTH = boundingClient.width;
-    //let HEIGHT = boundingClient.height;
+    let WIDTH = boundingClient.width;
+    let HEIGHT = boundingClient.height;
 
     // Offset with leaflet map transform boundaries
     const { transformX, transformY } = this.getSVGBoundaries();
@@ -135,9 +138,9 @@ class Map extends React.Component {
       mapTransformY: transformY
     })
 
-    /*this.svg.attr('width', WIDTH)
+    this.svg.attr('width', WIDTH)
       .attr('height', HEIGHT)
-      .attr('style', `left: ${-transformX}px; top: ${-transformY}px`);*/
+      .attr('style', `left: ${-transformX}px; top: ${-transformY}px`);
   }
 
   renderSites() {

src/components/MapEvents.jsx

@@ -42,7 +42,7 @@ class MapEvents extends React.Component {
       <circle
         className="location-event-marker"
         r={(counts) ? Math.sqrt(16 * counts) + 3 : 0}
-        style={{ fill: this.props.getCategoryColor(events), fillOpacity: 0.2 }}
+        style={{ fill: 'yellow'/*this.props.getCategoryColor(events[0])*/, fillOpacity: 0.2 }}
         onClick={() => this.props.onSelect(events)}
       >
       </circle>

src/js/map/map.js

@@ -1,11 +1,8 @@
-import {
-  areEqual,
-  isNotNullNorUndefined
-} from '../utilities';
+import { isNotNullNorUndefined } from '../utilities';
 import hash from 'object-hash';
 import 'leaflet-polylinedecorator';
 
-export default function(lMap, svg, g, newApp, ui, methods) {
+export default function(lMap, svg, newApp, ui) {
 
   const app = {
     selected: [],
@@ -15,45 +12,6 @@ export default function(lMap, svg, g, newApp, ui, methods) {
   // Icons for markPoint flags (a yellow ring around a location)
   const eventCircleMarkers = {};
 
-  function getSVGBoundaries() {
-    const mapNode = d3.select('.leaflet-map-pane').node();
-    if (mapNode === null) return { transformX: 0, transformY: 0 };
-
-    // We'll get the transform of the leaflet container,
-    // which will let us offset the SVG by the same quantity
-    const transform = window
-      .getComputedStyle(mapNode)
-      .getPropertyValue('transform');
-
-    // However getComputedStyle returns an awkward string of the format
-    // matrix(0, 0, 1, 0, 0.56523, 123123), hence this awkwardness
-    return {
-      transformX: +transform.split(',')[4],
-      transformY: +transform.split(',')[5].split(')')[0]
-    }
-  }
-
-  function updateSVG() {
-    const boundingClient = d3.select(`#${ui.dom.map}`).node().getBoundingClientRect();
-
-    let WIDTH = boundingClient.width;
-    let HEIGHT = boundingClient.height;
-
-    // Offset with leaflet map transform boundaries
-    const { transformX, transformY } = getSVGBoundaries();
-
-    svg.attr('width', WIDTH)
-      .attr('height', HEIGHT)
-      .attr('style', `left: ${-transformX}px; top: ${-transformY}px`);
-  }
-
-  lMap.on("zoomend viewreset moveend", updateSVG);
-
-
-  /*
-   * INTERACTIVE FUNCTIONS
-   */
-
   /**
    * Removes the circular ring to mark a particular location
    */
@@ -103,15 +61,11 @@ export default function(lMap, svg, g, newApp, ui, methods) {
    * Updates displayable data on the map: events, coevents and paths
    */
   function update(newApp) {
-    updateSVG();
-    const isNewAppProps = (hash(app) !== hash(newApp));
-
-    if (isNewAppProps) {
+    if (hash(app) !== hash(newApp)) {
       app.selected = newApp.selected;
       app.highlighted = newApp.highlighted;
+      renderSelectedAndHighlight();
     }
-
-    if (isNewAppProps) renderSelectedAndHighlight();
   }
 
   function renderSelectedAndHighlight () {

src/scss/map.scss

@@ -65,18 +65,20 @@
       border-top-color: rgba($black,0.6);
     }
   }
-}
 
-.sites-layer {
-  position: fixed;
-  top: 0px;
-  left: 110px;
-}
+  .sites-layer {
+    position: fixed;
+    top: 0px;
+    left: 110px;
+  }
 
-.narratives-layer {
-  position: fixed;
-  top: 0px;
-  left: 110px;
+  &.narrative-mode {
+    .sites-layer {
+      position: fixed;
+      top: 0px;
+      left: 0px;
+    }
+  }
 }
 
 /*