Commit 5c80c9d4 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Fixed map on mobile

parent ee9d5f76
......@@ -3,7 +3,7 @@ import ReactMapboxGl, { Layer, Feature,Marker,Source,GeoJSONLayer } from "react-
import MapboxClient from 'mapbox'
import mapboxgl from 'mapbox-gl'
import {withStyles} from 'material-ui/styles';
import {addRoute,getGeoLine} from '../utils/mapboxUtils';
import {addRoute,getGeoLine, getMaxBounds} from '../utils/mapboxUtils';
import MapDialog from './MapDialog';
const token = "pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA";
......@@ -43,10 +43,7 @@ class FacilitiesMap extends React.Component {
[ -77.321649,38.823919], // Southwest coordinates
[ -77.295213,38.835720] // Northeast coordinates
],
maxBounds:[
[ -77.321649,38.823919], // Southwest coordinates
[ -77.295213,38.835720] // Northeast coordinates
],
maxBounds: getMaxBounds(),
fitBoundsOptions:{
},
mapDialogOpen:false
......
......@@ -13,9 +13,9 @@ import DirectionsWalkIcon from 'material-ui-icons/DirectionsWalk';
import LocationOnIcon from 'material-ui-icons/LocationOn';
import {removeBrackets} from '../utils/nameUtils';
import classnames from 'classnames';
import FacilitiesMap from '../components/FacilitiesMap';
import Dialog, {DialogTitle, DialogContent, DialogActions} from 'material-ui/Dialog';
import MapDialog from '../components/MapDialog';
import Button from 'material-ui/Button';
import {getMaxBounds} from '../utils/mapboxUtils';
import {
amber,
......@@ -48,8 +48,9 @@ class FacilityCard extends React.Component {
super(props);
this.state = {
isHovered: false,
isMapOpen: false
}
isMapOpen: false,
maxBounds: getMaxBounds()
};
}
handleCardClick = () => {
......@@ -57,7 +58,8 @@ class FacilityCard extends React.Component {
this.props.setSelectedFacility(isSelected ? null : this.props.facility);
};
toggleMap = () => {
toggleMap = e => {
e.stopPropagation();
this.setState({isMapOpen: !this.state.isMapOpen});
};
......@@ -190,9 +192,13 @@ class FacilityCard extends React.Component {
</Grid>
</CardContent>
<Dialog open={this.state.isMapOpen} onRequestClose={this.toggleMap} classes={{paper: 'fc-map-dialog'}}>
<FacilitiesMap facilities={facilities} facility={facility} isMapOpen={true}/>
</Dialog>
<MapDialog
open={this.state.isMapOpen}
facilities={facilities}
facility={facility}
maxBounds={this.state.maxBounds}
onRequestClose={this.toggleMap}
/>
</Card>
)
}
......
......@@ -54,7 +54,7 @@
width: 100%;
}
@media screen and (max-width: 960px) {
@media screen and (max-width: map-get($breakpoints, lg)) {
.sidebar-root {
display: none !important;
}
......
......@@ -19,7 +19,7 @@ const addRoute = (map,geometry) =>{
"line-width": 5
}
});
}
};
const getGeoLine = (mapboxClient,start,end,callback) =>{
......@@ -36,5 +36,13 @@ const getGeoLine = (mapboxClient,start,end,callback) =>{
}
);
});
}
export {addRoute,getGeoLine};
\ No newline at end of file
};
const getMaxBounds = () => {
return [
[ -77.321649,38.823919], // Southwest coordinates
[ -77.295213,38.835720] // Northeast coordinates
];
};
export {addRoute, getGeoLine, getMaxBounds};
\ 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