All campuses are now supported in the map.

Closes #45

src/components/FacilitiesMap.js

 import React from 'react';
 import ReactMapboxGl, {Marker} from 'react-mapbox-gl';
+import {MenuItem} from 'material-ui/Menu';
+import Select from 'material-ui/Select';
+import {FormControl} from 'material-ui/Form';
 import {getMaxBounds} from '../utils/mapboxUtils';
 import mapboxgl from 'mapbox-gl';
 
@@ -16,12 +19,8 @@ const Mark = {
 class FacilitiesMap extends React.Component {
     constructor(props) {
         super(props);
-
-        const {campusRegion, interactive = true} = this.props;
-
-        const maxBounds = getMaxBounds(campusRegion);
-        const southWestBounds = maxBounds[0]; //Coordinates for the south-west bound
-        const northEastBounds = maxBounds[1]; //Coordinates for the north-east bound
+        const {facility, interactive = true} = this.props;
+        const campusRegion = facility && facility.facility_location ? facility.facility_location.campus_region : 'fairfax';
 
         this.Map = ReactMapboxGl({
             accessToken: mapboxToken,
@@ -30,23 +29,38 @@ class FacilitiesMap extends React.Component {
         });
 
         this.state = {
-            fitBounds: [southWestBounds, northEastBounds],
-            maxBounds: maxBounds,
+            maxBounds: getMaxBounds(campusRegion),
+            campusRegion: campusRegion,
             fitBoundsOptions: {}
         };
     }
 
+    componentWillReceiveProps(nextProps) {
+        const {facility} = nextProps;
+        const campusRegion = facility && facility.facility_location ? facility.facility_location.campus_region : 'fairfax';
+
+        this.changeRegion(campusRegion);
+    }
+
+    changeRegion = (campusRegion) => {
+        this.setState({
+            maxBounds: getMaxBounds(campusRegion),
+            campusRegion: campusRegion
+        });
+    };
+
     render() {
         const {facilities, facility, interactive = true} = this.props;
-        const {fitBounds, maxBounds, fitBoundsOptions} = this.state;
+        const {maxBounds, fitBoundsOptions} = this.state;
 
         let center, zoom;
-        try {
+
+        if (facility && facility.facility_location && facility.facility_location.campus_region === this.state.campusRegion) {
             center = facility.facility_location.coordinate_location.coordinates;
             zoom = [17];
-        } catch (e) {
+        } else {
             center = [(maxBounds[0][0] + maxBounds[1][0]) / 2, (maxBounds[0][1] + maxBounds[1][1]) / 2];
-            zoom = [17];
+            zoom = [0];
         }
 
         return (
@@ -73,10 +87,26 @@ class FacilitiesMap extends React.Component {
                     cursor: 'pointer'
                 }}
                 center={center}
-                fitBounds={fitBounds}
+                fitBounds={maxBounds}
                 fitBoundsOptions={fitBoundsOptions}
                 zoom={zoom}
                 maxBounds={maxBounds}>
+
+                {interactive &&
+                (
+                    <FormControl className={'facilities-map-campus-select'}>
+                        <Select
+                            disableUnderline
+                            value={this.state.campusRegion}
+                            onChange={(e) => this.changeRegion(e.target.value)}>
+                            <MenuItem value={'fairfax'}>Fairfax</MenuItem>
+                            <MenuItem value={'arlington'}>Arlington</MenuItem>
+                            <MenuItem value={'prince william'}>SciTech</MenuItem>
+                            <MenuItem value={'front royal'}>Front Royal</MenuItem>
+                        </Select>
+                    </FormControl>
+                )}
+
                 {(facilities.length > 0) && facilities.map((item) => {
                     return (
                         <Marker

src/components/FacilityDialog.js

@@ -82,7 +82,6 @@ class FacilityDialog extends React.Component {
                     facilities={facilities}
                     facility={facility}
                     fullScreen={true}
-                    campusRegion={facility.facility_location.campus_region}
                     onClose={this.toggleMap}
                 />
             </Dialog>

src/components/Sidebar.js

@@ -36,7 +36,7 @@ class Sidebar extends React.Component {
     };
 
     render() {
-        const {facility, isSidebarOpen, facilities, campusRegion} = this.props;
+        const {facility, isSidebarOpen, facilities} = this.props;
         const {mapDialogOpen} = this.state;
 
         return (
@@ -77,14 +77,12 @@ class Sidebar extends React.Component {
                                 facilities={facilities}
                                 facility={facility}
                                 interactive={false}
-                                campusRegion={campusRegion}
                             />
                         </div>
                         <MapDialog
                             open={mapDialogOpen}
                             facilities={facilities}
                             facility={facility}
-                            campusRegion={campusRegion}
                             height={'500px'}
                             width={'600px'}
                             onClose={this.handleMapDialogClose}

src/containers/Layout.js

@@ -51,8 +51,7 @@ class Layout extends React.Component {
                     </div>
 
                     <Sidebar facilities={facilities} facility={selectedFacility} isSidebarOpen={isSidebarOpen}
-                             setSidebar={setSidebar} setSelectedFacility={setSelectedFacility}
-                             campusRegion={campusRegion}/>
+                             setSidebar={setSidebar} setSelectedFacility={setSelectedFacility}/>
                 </div>
             </div>
         );

src/styles/components/facilitiesMap.scss

+.facilities-map-campus-select {
+  position: absolute !important;
+  z-index: 100;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 10px;
+  height: 30px !important;
+  background-color: white !important;
+  border-radius: 5px;
+  box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
+}
\ No newline at end of file

src/styles/whatsOpen.scss

@@ -4,6 +4,7 @@
 @import './components/alert';
 @import './components/appBar';
 @import './components/cardContainer';
+@import './components/facilitiesMap';
 @import './components/facilityCategory';
 @import './components/facilityDialog';
 @import './components/facilityStatus';

src/utils/mapboxUtils.js

@@ -4,16 +4,16 @@ const campusBounds = {
         [-77.295213, 38.835720]  // Northeast coordinates
     ],
     arlington: [
-        [-77.10344017, 38.88401789],
-        [-77.09945977, 38.88638969]
+        [-77.10365559, 38.88232150],
+        [-77.09969515, 38.88621749]
     ],
     'prince william': [
-        [-77.52532482, 38.75497015],
-        [-77.51772881, 38.75983938]
+        [-77.52645645, 38.75469300],
+        [-77.51416565, 38.76009113]
     ],
-    'mason korea': [
-        [126.65918827, 37.37121447],
-        [126.68343544, 37.38836766]
+    'front royal': [
+        [-77.02180979, 38.88559549],
+        [-77.01998030, 38.88663396]
     ]
 };
 /**