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

Modified map moving method, center and zoom do not re-calculate every render.

parent a397b6ee
...@@ -3,7 +3,7 @@ import ReactMapboxGl, {Marker, Popup} from 'react-mapbox-gl'; ...@@ -3,7 +3,7 @@ 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, getCenterOfCampusRegion} from '../utils/mapboxUtils';
import mapboxgl from 'mapbox-gl'; import mapboxgl from 'mapbox-gl';
import {Typography} from 'material-ui'; import {Typography} from 'material-ui';
...@@ -29,9 +29,13 @@ class FacilitiesMap extends React.Component { ...@@ -29,9 +29,13 @@ class FacilitiesMap extends React.Component {
attributionControl: false attributionControl: false
}); });
const facilityLocationExists = facility && facility.facility_location && facility.facility_location.campus_region === campusRegion;
this.state = { this.state = {
maxBounds: getMaxBounds(campusRegion), maxBounds: getMaxBounds(campusRegion),
campusRegion: campusRegion, campusRegion: campusRegion,
center: facilityLocationExists ? facility.facility_location.coordinate_location.coordinates : getCenterOfCampusRegion(campusRegion),
zoom: facilityLocationExists ? [17] : [0],
fitBoundsOptions: {}, fitBoundsOptions: {},
facilityLocations: [], facilityLocations: [],
selectedLocation: null selectedLocation: null
...@@ -42,14 +46,22 @@ class FacilitiesMap extends React.Component { ...@@ -42,14 +46,22 @@ class FacilitiesMap extends React.Component {
const {facility} = nextProps; const {facility} = nextProps;
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, facility);
this.generateLocationArray(nextProps.facilities); this.generateLocationArray(nextProps.facilities);
} }
changeRegion = (campusRegion) => { changeRegion = (campusRegion, facility) => {
if (!facility) {
facility = this.props.facility;
}
const facilityLocationExists = facility && facility.facility_location && facility.facility_location.campus_region === campusRegion;
this.setState({ this.setState({
maxBounds: getMaxBounds(campusRegion), maxBounds: getMaxBounds(campusRegion),
campusRegion: campusRegion campusRegion: campusRegion,
center: facilityLocationExists ? facility.facility_location.coordinate_location.coordinates : getCenterOfCampusRegion(campusRegion),
zoom: facilityLocationExists ? [17] : [0],
}); });
}; };
...@@ -74,27 +86,23 @@ class FacilitiesMap extends React.Component { ...@@ -74,27 +86,23 @@ class FacilitiesMap extends React.Component {
} }
selectLocation = (location) => { selectLocation = (location) => {
const {interactive = true} = this.props;
const oldSelectedLocation = this.state.selectedLocation;
if (!interactive) {
return;
}
this.setState({ this.setState({
selectedLocation: location selectedLocation: oldSelectedLocation !== location ? location : null,
center: location && location.location.coordinate_location.coordinates,
zoom: [17]
}); });
} }
render() { render() {
const {facility, interactive = true} = this.props; const {interactive = true} = this.props;
const {maxBounds, fitBoundsOptions, facilityLocations, selectedLocation} = this.state; const {maxBounds, fitBoundsOptions, facilityLocations, selectedLocation, center, zoom} = this.state;
let center, zoom;
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;
zoom = [17];
} else {
center = [(maxBounds[0][0] + maxBounds[1][0]) / 2, (maxBounds[0][1] + maxBounds[1][1]) / 2];
zoom = [0];
}
return ( return (
<this.Map <this.Map
...@@ -109,10 +117,11 @@ class FacilitiesMap extends React.Component { ...@@ -109,10 +117,11 @@ class FacilitiesMap extends React.Component {
} }
}} }}
animationOptions={{ animationOptions={{
animate: false animate: true,
duration: 1500
}} }}
style="mapbox://styles/mduffy8/cjbcdxi3v73hp2spiyhxbkjde" style="mapbox://styles/mduffy8/cjbcdxi3v73hp2spiyhxbkjde"
movingMethod={'easeTo'} movingMethod="easeTo"
containerStyle={{ containerStyle={{
height: '100%', height: '100%',
width: '100%', width: '100%',
......
...@@ -68,16 +68,27 @@ const getGeoLine = (mapboxClient, start, end) => { ...@@ -68,16 +68,27 @@ const getGeoLine = (mapboxClient, start, end) => {
); );
}); });
}; };
/** /**
* Calculates the number of days between dayFrom and dayTo. * Gets the maximum bounds of the specified campus region
*[ *
[-77.321649, 38.823919], // Southwest coordinates * @param campus The specified campus region
[-77.295213, 38.835720] // Northeast coordinates * @returns {array} the bounds of the specified campus region
];
* @returns {array} the bounds of the George Mason Fairfax Campus
*/ */
const getMaxBounds = (campus) => { const getMaxBounds = (campus) => {
return campusBounds[campus]; return campusBounds[campus];
}; };
export {addRoute, getGeoLine, getMaxBounds};
\ No newline at end of file /**
* Calculates the center of the specified campus region
*
* @param campus The specified campus region
* @returns {array} the center of the specified campus region
*/
const getCenterOfCampusRegion = (campus) => {
const maxBounds = getMaxBounds(campus);
return [(maxBounds[0][0] + maxBounds[1][0]) / 2, (maxBounds[0][1] + maxBounds[1][1]) / 2];
};
export {addRoute, getGeoLine, getMaxBounds, getCenterOfCampusRegion};
\ 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