Make the map always 100% width with 2:1 aspect ratio

src/components/world-map/world-map.jsx

@@ -69,6 +69,7 @@ const WorldMap = props => (
                 autosize: true
             }
         }
+        style={{position: 'absolute', display: 'block'}}
     />
 );
 
@@ -76,8 +77,6 @@ WorldMap.propTypes = {
     colorIndex: PropTypes.arrayOf(PropTypes.string),
     countryData: PropTypes.arrayOf(PropTypes.string),
     countryNames: PropTypes.arrayOf(PropTypes.string)
-    // mapHeight: PropTypes.number,
-    // mapWidth: PropTypes.number
 };
 
 module.exports = WorldMap;

src/views/annual-report/annual-report.jsx

@@ -738,7 +738,6 @@ class AnnualReport extends React.Component {
                                             colorIndex={colorIndex}
                                             countryData={countryData}
                                             countryNames={countryNames}
-                                            mapHeight={471}
                                         />
                                     </MediaQuery>
                                     <MediaQuery
@@ -750,7 +749,6 @@ class AnnualReport extends React.Component {
                                             colorIndex={colorIndex}
                                             countryData={countryData}
                                             countryNames={countryNames}
-                                            mapHeight={384}
                                         />
                                     </MediaQuery>
                                     <MediaQuery
@@ -762,7 +760,6 @@ class AnnualReport extends React.Component {
                                             colorIndex={colorIndex}
                                             countryData={countryData}
                                             countryNames={countryNames}
-                                            mapHeight={320}
                                         />
                                     </MediaQuery>
                                     <MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
@@ -771,7 +768,6 @@ class AnnualReport extends React.Component {
                                             colorIndex={colorIndex}
                                             countryData={countryData}
                                             countryNames={countryNames}
-                                            mapHeight={240}
                                         />
                                     </MediaQuery>
                                 </div>

src/views/annual-report/annual-report.scss

@@ -577,10 +577,17 @@ p {
         
         .map-wrapper {
           width: 100%;
+          height: 0;
+          position: relative;
+          padding-top: 50%;
         }
         
         .map {
           width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
         }
         
     }