Commit a397b6ee authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Started work on location popup for the map.

parent 3af2f0c8
Pipeline #2378 passed with stage
in 1 minute and 59 seconds
...@@ -23,5 +23,7 @@ yarn-error.log* ...@@ -23,5 +23,7 @@ yarn-error.log*
#local dotfiles #local dotfiles
/.storybook /.storybook
/.idea
/.vscode
/src/stories /src/stories
/src/styles/build /src/styles/build
import React from 'react'; import React from 'react';
import ReactMapboxGl, {Marker} from 'react-mapbox-gl'; import ReactMapboxGl, {Marker, Popup} from 'react-mapbox-gl';
import {MenuItem} from 'material-ui/Menu'; import {MenuItem} from 'material-ui/Menu';
import Select from 'material-ui/Select'; import Select from 'material-ui/Select';
import {FormControl} from 'material-ui/Form'; 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';
import {Typography} from 'material-ui';
const mapboxToken = 'pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA'; const mapboxToken = 'pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA';
...@@ -31,7 +32,9 @@ class FacilitiesMap extends React.Component { ...@@ -31,7 +32,9 @@ class FacilitiesMap extends React.Component {
this.state = { this.state = {
maxBounds: getMaxBounds(campusRegion), maxBounds: getMaxBounds(campusRegion),
campusRegion: campusRegion, campusRegion: campusRegion,
fitBoundsOptions: {} fitBoundsOptions: {},
facilityLocations: [],
selectedLocation: null
}; };
} }
...@@ -40,6 +43,7 @@ class FacilitiesMap extends React.Component { ...@@ -40,6 +43,7 @@ class FacilitiesMap extends React.Component {
const campusRegion = facility && facility.facility_location ? facility.facility_location.campus_region : 'fairfax'; const campusRegion = facility && facility.facility_location ? facility.facility_location.campus_region : 'fairfax';
this.changeRegion(campusRegion); this.changeRegion(campusRegion);
this.generateLocationArray(nextProps.facilities);
} }
changeRegion = (campusRegion) => { changeRegion = (campusRegion) => {
...@@ -49,13 +53,42 @@ class FacilitiesMap extends React.Component { ...@@ -49,13 +53,42 @@ class FacilitiesMap extends React.Component {
}); });
}; };
generateLocationArray = (facilities) => {
const locations = [];
facilities.forEach((facility) => {
const location = locations.find((loc) => loc.location.id === facility.facility_location.id);
if (location) {
location.facilities.push(facility);
} else {
locations.push({
location: facility.facility_location,
facilities: [facility]
});
}
});
this.setState({
facilityLocations: locations
});
}
selectLocation = (location) => {
this.setState({
selectedLocation: location
});
}
render() { render() {
const {facilities, facility, interactive = true} = this.props; const {facility, interactive = true} = this.props;
const {maxBounds, fitBoundsOptions} = this.state; const {maxBounds, fitBoundsOptions, facilityLocations, selectedLocation} = this.state;
let center, zoom; let center, zoom;
if (facility && facility.facility_location && facility.facility_location.campus_region === this.state.campusRegion) { if (selectedLocation) {
center = selectedLocation.location.coordinate_location.coordinates;
zoom = [17];
} else 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];
} else { } else {
...@@ -107,16 +140,40 @@ class FacilitiesMap extends React.Component { ...@@ -107,16 +140,40 @@ class FacilitiesMap extends React.Component {
</FormControl> </FormControl>
)} )}
{(facilities.length > 0) && facilities.map((item) => { {(facilityLocations.length > 0) && facilityLocations.map((item) => {
const location = item.location;
return ( return (
<Marker <Marker
key={item.slug} key={location.id}
coordinates={item.facility_location.coordinate_location.coordinates} coordinates={location.coordinate_location.coordinates}
anchor="bottom"> anchor="bottom"
<div style={Mark}/> onClick={() => this.selectLocation(item)}>
<div style={Mark} />
</Marker> </Marker>
); );
})} })}
{selectedLocation && (
<Popup coordinates={selectedLocation.location.coordinate_location.coordinates} anchor="top">
<div>
<Typography type="subheading" align={'center'}>
{selectedLocation.location.building}
</Typography>
</div>
<div>
<ul className={'facilities-map-popup-list'}>
{selectedLocation.facilities.map((facility) => {
return (
<li key={facility.slug}>
<Typography type="caption">{facility.facility_name}</Typography>
</li>
);
})}
</ul>
</div>
</Popup>
)}
</this.Map> </this.Map>
); );
} }
......
...@@ -8,4 +8,11 @@ ...@@ -8,4 +8,11 @@
background-color: white !important; background-color: white !important;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 0 0 2px rgba(0,0,0,0.1); box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
}
.facilities-map-popup-list {
margin: 0;
padding-left: 16px;
max-height: 100px;
overflow-y: auto;
} }
\ No newline at end of file
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