fix(map): Add component dimensions wrapper to BaseMap

Ensures proper map behavior on startup when bundled via webpack

Author: David Emory

lib/components/map/base-map.js

@@ -1,8 +1,8 @@
-import objectPath from 'object-path'
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
 
 import { Map, TileLayer, LayersControl, Popup, Marker } from 'react-leaflet'
+import ContainerDimensions from 'react-container-dimensions'
 
 import { setLocation } from '../../actions/map'
 import Icon from '../narrative/icon'
@@ -156,18 +156,8 @@ class BaseMap extends Component {
     })
   }
 
-  resized () {
-    this.refs.map.leafletElement.invalidateSize()
-    if (this.props.itinerary) {
-      this.refs.map &&
-        this.refs.map.leafletElement.fitBounds(getItineraryBounds(this.props.itinerary), {
-          padding: [3, 3]
-        })
-    }
-  }
-
   render () {
-    const { config, children, diagramLeg, elevationPoint } = this.props
+    const { config, children, diagramLeg, elevationPoint, width, height } = this.props
     const { baseLayers } = this.props.config.map
 
     const userControlledOverlays = []
@@ -230,6 +220,7 @@ class BaseMap extends Component {
         ref='map'
         className='map'
         center={center}
+        style={{ width, height }}
         zoom={config.map.initZoom || 13}
         onClick={this._onLeftClick}
         onContextMenu={this._onRightClick}
@@ -301,6 +292,22 @@ class BaseMap extends Component {
   }
 }
 
+// ContainerDimensions-wrapped BaseMap
+
+class MapContainer extends Component {
+  render () {
+    return (
+      <ContainerDimensions>
+        {({ width, height }) => {
+          // Do not render map if width or height is undefined or 0
+          if (!width || !height) return null
+          return <BaseMap width={width} height={height} {...this.props} />
+        }}
+      </ContainerDimensions>
+    )
+  }
+}
+
 // connect to the redux store
 
 const mapStateToProps = (state, ownProps) => {
@@ -329,7 +336,4 @@ const mapDispatchToProps = {
   setLocation
 }
 
-// allow access to the wrapped BaseMap (for access to resized())
-export default connect(mapStateToProps, mapDispatchToProps, null, {
-  withRef: true
-})(BaseMap)
+export default connect(mapStateToProps, mapDispatchToProps)(MapContainer)

package.json

@@ -53,6 +53,7 @@
     "react": "^15.4.2",
     "react-addons-shallow-compare": "^15.4.2",
     "react-bootstrap": "^0.30.7",
+    "react-container-dimensions": "^1.3.4",
     "react-dates": "^6.0.2",
     "react-dom": "^15.4.2",
     "react-fontawesome": "^1.5.0",

yarn.lock

@@ -1465,6 +1465,10 @@ base@^0.11.1:
     mixin-deep "^1.2.0"
     pascalcase "^0.1.1"
 
+batch-processor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
+
 bcrypt-pbkdf@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
@@ -3014,6 +3018,12 @@ electron-to-chromium@^1.3.30:
   version "1.3.55"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.55.tgz#f150e10b20b77d9d41afcca312efe0c3b1a7fdce"
 
+element-resize-detector@^1.1.10:
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.1.14.tgz#af064a0a618a820ad570a95c5eec5b77be0128c1"
+  dependencies:
+    batch-processor "^1.0.0"
+
 elliptic@^6.0.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
@@ -7583,6 +7593,14 @@ react-bootstrap@^0.30.7:
     uncontrollable "^4.0.1"
     warning "^3.0.0"
 
+react-container-dimensions@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/react-container-dimensions/-/react-container-dimensions-1.3.4.tgz#6407cc2e1260bb208bf5e8fd6f2c53c8f4c82595"
+  dependencies:
+    element-resize-detector "^1.1.10"
+    invariant "^2.2.2"
+    prop-types "^15.5.8"
+
 react-dates@^6.0.2:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/react-dates/-/react-dates-6.1.0.tgz#8f655f71db429229a414ca13a876713519d4e0ac"