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 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
......
......@@ -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>
......
......@@ -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}
......
......@@ -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>
);
......
.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 @@
@import './components/alert';
@import './components/appBar';
@import './components/cardContainer';
@import './components/facilitiesMap';
@import './components/facilityCategory';
@import './components/facilityDialog';
@import './components/facilityStatus';
......
......@@ -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]
]
};
/**
......
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