Commit 3af2f0c8 authored by Andrew Hrdy's avatar Andrew Hrdy

All campuses are now supported in the map.

Closes #45
parent f0753f32
Pipeline #2194 passed with stage
in 1 minute and 45 seconds
import React from 'react'; import React from 'react';
import ReactMapboxGl, {Marker} from 'react-mapbox-gl'; 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 {getMaxBounds} from '../utils/mapboxUtils';
import mapboxgl from 'mapbox-gl'; import mapboxgl from 'mapbox-gl';
...@@ -16,12 +19,8 @@ const Mark = { ...@@ -16,12 +19,8 @@ const Mark = {
class FacilitiesMap extends React.Component { class FacilitiesMap extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
const {facility, interactive = true} = this.props;
const {campusRegion, interactive = true} = this.props; const campusRegion = facility && facility.facility_location ? facility.facility_location.campus_region : 'fairfax';
const maxBounds = getMaxBounds(campusRegion);
const southWestBounds = maxBounds[0]; //Coordinates for the south-west bound
const northEastBounds = maxBounds[1]; //Coordinates for the north-east bound
this.Map = ReactMapboxGl({ this.Map = ReactMapboxGl({
accessToken: mapboxToken, accessToken: mapboxToken,
...@@ -30,23 +29,38 @@ class FacilitiesMap extends React.Component { ...@@ -30,23 +29,38 @@ class FacilitiesMap extends React.Component {
}); });
this.state = { this.state = {
fitBounds: [southWestBounds, northEastBounds], maxBounds: getMaxBounds(campusRegion),
maxBounds: maxBounds, campusRegion: campusRegion,
fitBoundsOptions: {} 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() { render() {
const {facilities, facility, interactive = true} = this.props; const {facilities, facility, interactive = true} = this.props;
const {fitBounds, maxBounds, fitBoundsOptions} = this.state; const {maxBounds, fitBoundsOptions} = this.state;
let center, zoom; let center, zoom;
try {
if (facility && facility.facility_location && facility.facility_location.campus_region === this.state.campusRegion) {
center = facility.facility_location.coordinate_location.coordinates; center = facility.facility_location.coordinate_location.coordinates;
zoom = [17]; zoom = [17];
} catch (e) { } else {
center = [(maxBounds[0][0] + maxBounds[1][0]) / 2, (maxBounds[0][1] + maxBounds[1][1]) / 2]; center = [(maxBounds[0][0] + maxBounds[1][0]) / 2, (maxBounds[0][1] + maxBounds[1][1]) / 2];
zoom = [17]; zoom = [0];
} }
return ( return (
...@@ -73,10 +87,26 @@ class FacilitiesMap extends React.Component { ...@@ -73,10 +87,26 @@ class FacilitiesMap extends React.Component {
cursor: 'pointer' cursor: 'pointer'
}} }}
center={center} center={center}
fitBounds={fitBounds} fitBounds={maxBounds}
fitBoundsOptions={fitBoundsOptions} fitBoundsOptions={fitBoundsOptions}
zoom={zoom} zoom={zoom}
maxBounds={maxBounds}> 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) => { {(facilities.length > 0) && facilities.map((item) => {
return ( return (
<Marker <Marker
......
...@@ -82,7 +82,6 @@ class FacilityDialog extends React.Component { ...@@ -82,7 +82,6 @@ class FacilityDialog extends React.Component {
facilities={facilities} facilities={facilities}
facility={facility} facility={facility}
fullScreen={true} fullScreen={true}
campusRegion={facility.facility_location.campus_region}
onClose={this.toggleMap} onClose={this.toggleMap}
/> />
</Dialog> </Dialog>
......
...@@ -36,7 +36,7 @@ class Sidebar extends React.Component { ...@@ -36,7 +36,7 @@ class Sidebar extends React.Component {
}; };
render() { render() {
const {facility, isSidebarOpen, facilities, campusRegion} = this.props; const {facility, isSidebarOpen, facilities} = this.props;
const {mapDialogOpen} = this.state; const {mapDialogOpen} = this.state;
return ( return (
...@@ -77,14 +77,12 @@ class Sidebar extends React.Component { ...@@ -77,14 +77,12 @@ class Sidebar extends React.Component {
facilities={facilities} facilities={facilities}
facility={facility} facility={facility}
interactive={false} interactive={false}
campusRegion={campusRegion}
/> />
</div> </div>
<MapDialog <MapDialog
open={mapDialogOpen} open={mapDialogOpen}
facilities={facilities} facilities={facilities}
facility={facility} facility={facility}
campusRegion={campusRegion}
height={'500px'} height={'500px'}
width={'600px'} width={'600px'}
onClose={this.handleMapDialogClose} onClose={this.handleMapDialogClose}
......
...@@ -51,8 +51,7 @@ class Layout extends React.Component { ...@@ -51,8 +51,7 @@ class Layout extends React.Component {
</div> </div>
<Sidebar facilities={facilities} facility={selectedFacility} isSidebarOpen={isSidebarOpen} <Sidebar facilities={facilities} facility={selectedFacility} isSidebarOpen={isSidebarOpen}
setSidebar={setSidebar} setSelectedFacility={setSelectedFacility} setSidebar={setSidebar} setSelectedFacility={setSelectedFacility}/>
campusRegion={campusRegion}/>
</div> </div>
</div> </div>
); );
......
.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
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
@import './components/alert'; @import './components/alert';
@import './components/appBar'; @import './components/appBar';
@import './components/cardContainer'; @import './components/cardContainer';
@import './components/facilitiesMap';
@import './components/facilityCategory'; @import './components/facilityCategory';
@import './components/facilityDialog'; @import './components/facilityDialog';
@import './components/facilityStatus'; @import './components/facilityStatus';
......
...@@ -4,16 +4,16 @@ const campusBounds = { ...@@ -4,16 +4,16 @@ const campusBounds = {
[-77.295213, 38.835720] // Northeast coordinates [-77.295213, 38.835720] // Northeast coordinates
], ],
arlington: [ arlington: [
[-77.10344017, 38.88401789], [-77.10365559, 38.88232150],
[-77.09945977, 38.88638969] [-77.09969515, 38.88621749]
], ],
'prince william': [ 'prince william': [
[-77.52532482, 38.75497015], [-77.52645645, 38.75469300],
[-77.51772881, 38.75983938] [-77.51416565, 38.76009113]
], ],
'mason korea': [ 'front royal': [
[126.65918827, 37.37121447], [-77.02180979, 38.88559549],
[126.68343544, 37.38836766] [-77.01998030, 38.88663396]
] ]
}; };
/** /**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment