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>