Saving map layer added

frontend/src/components/map/UnivMakers.js

@@ -24,12 +24,14 @@ class UnivMarkers extends Component {
         for (let main_campus_pk in mainCampus) {
             let campus = mainCampus[main_campus_pk]
             let univ = universities[campus.university]
-            selected_main_campus.push({
-                univ_name: univ.name,
-                lat: campus.lat,
-                lon: campus.lon,
-                id: univ.id
-            })
+            if (univ && campus) {
+                selected_main_campus.push({
+                    univ_name: univ.name,
+                    lat: campus.lat,
+                    lon: campus.lon,
+                    id: univ.id
+                })
+            }
         }
 
         return (

frontend/src/components/map/UnivMap.js

@@ -46,13 +46,20 @@ class UnivMap extends MyComponent {
 
 
     componentWillUnmount() {
-        if (this.state.leaflet_instance) {
-            let l = this.state.leaflet_instance
-            let center = [l.getCenter().lat, l.getCenter().lng]
-
+        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
+                center,
+                selected_layer
             })
         }
     }
@@ -63,6 +70,12 @@ class UnivMap extends MyComponent {
         }))
     }
 
+    saveSelectedLayer = (e) => {
+        this.setState(Object.assign(this.state, {
+            selected_layer: e.name,
+        }))
+    }
+
     render() {
         if (this.checkPropsHasError()) {
             return <p>Sorry! There was an error loading the items</p>;
@@ -71,11 +84,14 @@ class UnivMap extends MyComponent {
         if (this.checkPropsIsLoading()) {
             return <Loading />;
         }
-
+        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)}>
+            <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="OpenStreetMap France" checked={false}>
+                    <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"
@@ -83,7 +99,7 @@ class UnivMap extends MyComponent {
                         />
                     </LayersControl.BaseLayer>
 
-                    <LayersControl.BaseLayer name="Stamen Watercolor" checked={true}>
+                    <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>'
@@ -103,7 +119,7 @@ class UnivMap extends MyComponent {
                     </LayersControl.BaseLayer>
 
 
-                    <LayersControl.BaseLayer name="Esri WorldImagery">
+                    <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}"

frontend/src/reducers/map.js

 import { SAVE_MAIN_MAP_POSITION } from '../actions/action-types'
 
-export function saveMainMapPosition(state = { center: [0, 2], zoom: 2 }, action) {
+export function saveMainMapPosition(state = { center: [0, 2], zoom: 2, selected_layer: "OpenStreetMap France" }, action) {
     switch (action.type) {
         case SAVE_MAIN_MAP_POSITION:
             return {
                 center: action.new_position.center,
-                zoom: action.new_position.zoom
+                zoom: action.new_position.zoom,
+                selected_layer: action.new_position.selected_layer
             }
 
         default: