Fix map size

frontend/src/components/map/UnivMap.js

 import React from 'react';
 import MyComponent from '../MyComponent'
-import {connect} from "react-redux";
+import { connect } from "react-redux";
 import { Map, TileLayer, LayersControl, LayerGroup } from 'react-leaflet';
 
 import UnivMarkers from './UnivMakers';
@@ -8,107 +8,124 @@ import UnivMarkers from './UnivMakers';
 import { saveMainMapPosition } from '../../actions/map'
 
 class UnivMap extends MyComponent {
-    constructor() {
-        super();
-        this.state = {
-            leaflet_instance: null
-        };
-    }
-
-
-    componentWillUnmount() {
-        let l = this.state.leaflet_instance;
-        if (l) {
-            let selected_layer = "";
-            if (this.state.selected_layer) {
-                selected_layer = this.state.selected_layer;
-            } else {
-                selected_layer = this.props.map.selected_layer;
-            }
-
-            let center = [l.getCenter().lat, l.getCenter().lng];
-            this.props.saveMainMap({
-                zoom: l.getZoom(),
-                center,
-                selected_layer
-            })
-        }
-    }
-
-    saveLeafletInstance = (l) => {
-        this.setState(Object.assign({},this.state, {
-            leaflet_instance: l,
-        }))
-    }
+  constructor() {
+    super();
+    this.state = {
+      leaflet_instance: null,
+      height: 800,
+    };
+  }
 
-    saveSelectedLayer = (e) => {
-        this.setState(Object.assign({},this.state, {
-            selected_layer: e.name,
-        }))
+  updateDimensions() {
+    try {
+      const height = window.innerHeight - document.getElementById('MySuperMap').getBoundingClientRect().y;
+      this.setState({ height: Math.round(0.9 * height) })
     }
-
-    myRender() {
-        let stamen_name = "Stamen Watercolor";
-        let osm_fr_name = "OpenStreetMap France";
-        let esri_name = "Esri WorldImagery";
-
-        return (
-            <Map center={this.props.map.center} zoom={this.props.map.zoom} style={{ height: "800px" }} whenReady={(e) => this.saveLeafletInstance(e.target)} onBaselayerchange={(e) => this.saveSelectedLayer(e)}>
-                <LayersControl position="topright">
-                    <LayersControl.BaseLayer name={osm_fr_name} checked={this.props.map.selected_layer == osm_fr_name}>
-                        <TileLayer
-                            attribution='&copy; Openstreetmap France | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-                            url="https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png"
-                            maxZoom={20}
-                        />
-                    </LayersControl.BaseLayer>
-
-                    <LayersControl.BaseLayer name={stamen_name} checked={this.props.map.selected_layer == stamen_name}>
-                        <LayerGroup>
-                            <TileLayer
-                                attribution='Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-                                url="https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png"
-                                minZoom={1}
-                                maxZoom={18}
-                                subdomains='abcd'
-                            />
-                            <TileLayer
-                                attribution='Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-                                url="https://stamen-tiles-{s}.a.ssl.fastly.net/toner-labels/{z}/{x}/{y}.png"
-                                minZoom={1}
-                                subdomains='abcd'
-                                maxZoom={18}
-                            />
-                        </LayerGroup>
-                    </LayersControl.BaseLayer>
-
-
-                    <LayersControl.BaseLayer name={esri_name} checked={this.props.map.selected_layer == esri_name}>
-                        <TileLayer
-                            attribution="Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
-                            url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
-                        />
-                    </LayersControl.BaseLayer>
-
-                </LayersControl>
-                <UnivMarkers />
-            </Map>
-
-        );
+    catch (err) { }
+  }
+
+  componentWillMount() {
+    this.updateDimensions()
+  }
+
+  myComponentDidMount() {
+    window.addEventListener("resize", this.updateDimensions.bind(this))
+  }
+
+  componentWillUnmount() {
+    let l = this.state.leaflet_instance;
+    if (l) {
+      let selected_layer = "";
+      if (this.state.selected_layer) {
+        selected_layer = this.state.selected_layer;
+      } else {
+        selected_layer = this.props.map.selected_layer;
+      }
+
+      let center = [l.getCenter().lat, l.getCenter().lng];
+      this.props.saveMainMap({
+        zoom: l.getZoom(),
+        center,
+        selected_layer
+      })
     }
+    window.removeEventListener("resize", this.updateDimensions.bind(this))
+  }
+
+  saveLeafletInstance = (l) => {
+    this.setState(Object.assign({}, this.state, {
+      leaflet_instance: l,
+    }))
+  }
+
+  saveSelectedLayer = (e) => {
+    this.setState(Object.assign({}, this.state, {
+      selected_layer: e.name,
+    }))
+  }
+
+  myRender() {
+    let stamen_name = "Stamen Watercolor";
+    let osm_fr_name = "OpenStreetMap France";
+    let esri_name = "Esri WorldImagery";
+
+    return (
+      <Map id={"MySuperMap"} center={this.props.map.center} zoom={this.props.map.zoom} style={{ height: this.state.height }} whenReady={(e) => this.saveLeafletInstance(e.target)} onBaselayerchange={(e) => this.saveSelectedLayer(e)}>
+        <LayersControl position="topright">
+          <LayersControl.BaseLayer name={osm_fr_name} checked={this.props.map.selected_layer == osm_fr_name}>
+            <TileLayer
+              attribution='&copy; Openstreetmap France | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+              url="https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png"
+              maxZoom={20}
+            />
+          </LayersControl.BaseLayer>
+
+          <LayersControl.BaseLayer name={stamen_name} checked={this.props.map.selected_layer == stamen_name}>
+            <LayerGroup>
+              <TileLayer
+                attribution='Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+                url="https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png"
+                minZoom={1}
+                maxZoom={18}
+                subdomains='abcd'
+              />
+              <TileLayer
+                attribution='Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+                url="https://stamen-tiles-{s}.a.ssl.fastly.net/toner-labels/{z}/{x}/{y}.png"
+                minZoom={1}
+                subdomains='abcd'
+                maxZoom={18}
+              />
+            </LayerGroup>
+          </LayersControl.BaseLayer>
+
+
+          <LayersControl.BaseLayer name={esri_name} checked={this.props.map.selected_layer == esri_name}>
+            <TileLayer
+              attribution="Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
+              url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
+            />
+          </LayersControl.BaseLayer>
+
+        </LayersControl>
+        <UnivMarkers />
+      </Map>
+
+    );
+  }
 }
 
 
 const mapStateToProps = (state) => {
-    return {
-        map: state.app.mainMap
-    };
+  return {
+    map: state.app.mainMap
+  };
 };
 
 const mapDispatchToProps = (dispatch) => {
-    return {
-        saveMainMap: (pos) => dispatch(saveMainMapPosition(pos)),
-    };
+  return {
+    saveMainMap: (pos) => dispatch(saveMainMapPosition(pos)),
+  };
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(UnivMap);