import * as React from 'react'; import ReactMapboxGl, {Marker, Popup} from 'react-mapbox-gl'; import {getMaxBounds, getCenterOfCampusRegion} from '../utils/mapboxUtils'; import * as mapboxgl from 'mapbox-gl'; import {removeBrackets} from '../utils/nameUtils'; import { IFacility, CampusRegion, IFacilityLocation } from '../models/facility.model'; import MenuItem from '@material-ui/core/MenuItem'; import Select from '@material-ui/core/Select'; import FormControl from '@material-ui/core/FormControl'; import Typography from '@material-ui/core/Typography'; const mapboxToken = 'pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA'; const Mark = { backgroundColor: '#e74c3c', borderRadius: '50%', width: '12px', height: '12px', border: '3px solid #EAA29B' }; class FacilitiesMap extends React.Component { private Map: any; constructor(props: FacilitiesMapProps) { super(props); const {facility, interactive = true} = props; const campusRegion = facility && facility.facility_location ? facility.facility_location.campus_region : CampusRegion.Fairfax; this.Map = ReactMapboxGl({ accessToken: mapboxToken, interactive: interactive, attributionControl: false }); this.state = { maxBounds: getMaxBounds(campusRegion), campusRegion: campusRegion, zoom: [17], center: facility ? facility.facility_location.coordinate_location.coordinates : getCenterOfCampusRegion(campusRegion), facilityLocations: [], selectedLocation: null, isLoaded: false }; } componentWillReceiveProps(nextProps: FacilitiesMapProps) { const {facility, facilities} = nextProps; const campusRegion = facility && facility.facility_location ? facility.facility_location.campus_region : CampusRegion.Fairfax; this.changeRegion(campusRegion, facility); if (this.state.facilityLocations.length === 0) { this.generateLocationArray(facilities); } } changeRegion = (campusRegion: CampusRegion, facility: IFacility = this.props.facility) => { const facilityLocationExists = facility && facility.facility_location && facility.facility_location.campus_region === campusRegion; const newState = { maxBounds: getMaxBounds(campusRegion), campusRegion: campusRegion, center: facilityLocationExists ? facility.facility_location.coordinate_location.coordinates : getCenterOfCampusRegion(campusRegion), zoom: [17] }; setTimeout(() => { this.setState(newState); }, 100); }; generateLocationArray = (facilities: IFacility[]) => { const locations: FacilityMapLocation[] = []; 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: FacilityMapLocation) => { const {interactive = true} = this.props; const oldSelectedLocation = this.state.selectedLocation; if (!interactive) { return; } this.setState({ selectedLocation: oldSelectedLocation !== location ? location : null, center: location && location.location.coordinate_location.coordinates, zoom: [17] }); } render() { const {interactive = true} = this.props; const {maxBounds, facilityLocations, selectedLocation, center, zoom} = this.state; return ( { if (interactive) { map.addControl(new mapboxgl.GeolocateControl({ positionOptions: { enableHighAccuracy: true }, trackUserLocation: true })); } }} animationOptions={{ animate: true, duration: 1250 }} style="mapbox://styles/mduffy8/cjbcdxi3v73hp2spiyhxbkjde" movingMethod="easeTo" containerStyle={{ height: '100%', width: '100%', borderRadius: '5px', cursor: 'pointer' }} center={center} fitBounds={maxBounds} zoom={zoom} maxBounds={maxBounds}> {interactive && ( )} {(facilityLocations.length > 0) && facilityLocations.map((item) => { const location = item.location; return ( this.selectLocation(item)}>
); })} {selectedLocation && (
{selectedLocation.location.building}
    {selectedLocation.facilities.map((facility) => { return (
  • {removeBrackets(facility.facility_name)}
  • ); })}
)} ); } } export interface FacilitiesMapProps { facility: IFacility; facilities: IFacility[]; interactive: boolean; } interface FacilityMapLocation { location: IFacilityLocation; facilities: IFacility[]; } export interface FacilitiesMapState { maxBounds: number[][]; campusRegion: CampusRegion; zoom: number[]; center: number[]; facilityLocations: FacilityMapLocation[]; selectedLocation: FacilityMapLocation; isLoaded: boolean; } export default FacilitiesMap;