FacilitiesMap.tsx

import * as React from 'react';
import ReactMapboxGl, {Marker, Popup} from 'react-mapbox-gl';
import {getMaxBounds, getCenterOfCampusRegion} from '../utils/mapboxUtils';
import mapboxgl from 'mapbox-gl';
import {removeBrackets} from '../utils/nameUtils';
import { IFacility, CampusRegion, IFacilityLocation } from '../models/facility.model';

import MenuItem from '@material-ui/core/Menu';
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<FacilitiesMapProps, FacilitiesMapState> {
    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 (
            <this.Map
                onStyleLoad={(map: any) => {
                    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 &&
                (
                    <FormControl className={'facilities-map-campus-select'}>
                        <Select
                            disableUnderline
                            value={this.state.campusRegion}
                            onChange={(e) => this.changeRegion((CampusRegion as any)[e.target.value])}>
                            <MenuItem value={CampusRegion.Fairfax}>Fairfax</MenuItem>
                            <MenuItem value={CampusRegion.Arlington}>Arlington</MenuItem>
                            <MenuItem value={CampusRegion.PrinceWilliam}>SciTech</MenuItem>
                            <MenuItem value={CampusRegion.FrontRoyal}>Front Royal</MenuItem>
                        </Select>
                    </FormControl>
                )}

                {(facilityLocations.length > 0) && facilityLocations.map((item) => {
                    const location = item.location;

                    return (
                        <Marker
                            key={location.id}
                            coordinates={location.coordinate_location.coordinates}
                            anchor="bottom"
                            onClick={() => this.selectLocation(item)}>
                            <div style={Mark} />
                        </Marker>
                    );
                })}

                {selectedLocation && (
                    <Popup coordinates={selectedLocation.location.coordinate_location.coordinates} anchor="top">
                        <div>
                            <Typography variant="subtitle1" align={'center'}>
                                {selectedLocation.location.building}
                            </Typography>
                        </div>
                        <div>
                            <ul className={'facilities-map-popup-list'}>
                                {selectedLocation.facilities.map((facility) => {
                                    return (
                                        <li key={facility.slug}>
                                            <Typography variant="caption">{removeBrackets(facility.facility_name)}</Typography>
                                        </li>
                                    );
                                })}
                            </ul>
                        </div>
                    </Popup>
                )}
            </this.Map>
        );
    }
}

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;