Commit 63dfe71c authored by Mattias J Duffy's avatar Mattias J Duffy
Browse files

changes to how map works

I shrunk the map on the sidebar and made it clickable
when the map is clicked you get an expanded view
parent 9f2479ad
...@@ -4,6 +4,7 @@ import MapboxClient from 'mapbox' ...@@ -4,6 +4,7 @@ import MapboxClient from 'mapbox'
import mapboxgl from 'mapbox-gl' import mapboxgl from 'mapbox-gl'
import {withStyles} from 'material-ui/styles'; import {withStyles} from 'material-ui/styles';
import {addRoute,getGeoLine} from '../utils/mapboxUtils'; import {addRoute,getGeoLine} from '../utils/mapboxUtils';
import MapDialog from './MapDialog';
const token = "pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA"; const token = "pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA";
let starbucksLogo = new Image(); let starbucksLogo = new Image();
...@@ -13,8 +14,10 @@ starbucksLogo.height = 60 ...@@ -13,8 +14,10 @@ starbucksLogo.height = 60
const images = ['starbucks',starbucksLogo,{pixelRatio:3}] const images = ['starbucks',starbucksLogo,{pixelRatio:3}]
const Map = ReactMapboxGl({ const Map = ReactMapboxGl({
accessToken: token, accessToken: token,
interactive:false,
attributionControl:false,
}); });
const client = new MapboxClient(token); // const client = new MapboxClient(token);
const Mark = { const Mark = {
backgroundColor: '#e74c3c', backgroundColor: '#e74c3c',
...@@ -45,7 +48,8 @@ class FacilitiesMap extends React.Component { ...@@ -45,7 +48,8 @@ class FacilitiesMap extends React.Component {
[ -77.295213,38.835720] // Northeast coordinates [ -77.295213,38.835720] // Northeast coordinates
], ],
fitBoundsOptions:{ fitBoundsOptions:{
} },
mapDialogOpen:false
} }
} }
componentWillMount = () =>{ componentWillMount = () =>{
...@@ -91,34 +95,57 @@ class FacilitiesMap extends React.Component { ...@@ -91,34 +95,57 @@ class FacilitiesMap extends React.Component {
// } // }
// } // }
handleRequestClose = () => {
this.setState({
mapDialogOpen:false,
})
}
render (){ render (){
const {facilities,facility,classes,isMapOpen} = this.props const {facilities,facility,classes,isMapOpen} = this.props
const {position,positionReady,fitBounds,maxBounds,mappedRoute,fitBoundsOptions} = this.state const {position,positionReady,fitBounds,maxBounds,mappedRoute,fitBoundsOptions,mapDialogOpen} = this.state
console.log(fitBounds) console.log(fitBounds)
let center,zoom;
try{
center = facility.facility_location.coordinate_location.coordinates;
zoom = 17;
}catch(e){
center = [(maxBounds[0][0]+maxBounds[1][0])/2,(maxBounds[0][1]+maxBounds[1][1])/2]
zoom=13;
}
return( return(
<div className={classes.mapContainer} style={{'transform': isMapOpen ? 'translateY(0px)' : 'translateY(436px)'}}> <div className={classes.mapContainer} style={{'transform': isMapOpen ? 'translateY(0px)' : 'translateY(436px)'}}>
<Map <Map
onStyleLoad={(map,e)=>{ onStyleLoad={(map,e)=>{
map.addControl(new mapboxgl.GeolocateControl({ // map.addControl(new mapboxgl.GeolocateControl({
positionOptions: { // positionOptions: {
enableHighAccuracy: true // enableHighAccuracy: true
}, // },
trackUserLocation: true // trackUserLocation: true
})); // }));
}}
onClick={(map,e)=>{
this.setState({
mapDialogOpen: true
})
console.log('changed')
}} }}
style="mapbox://styles/mapbox/streets-v9" style="mapbox://styles/mapbox/streets-v9"
movingMethod={'easeTo'} movingMethod={'easeTo'}
containerStyle={{ containerStyle={{
height: "400px", height: "200px",
width: "400px" width: "380px",
margin:"10px",
borderRadius:'5px',
cursor: 'pointer',
}} }}
center={center}
zoom={[zoom]}
fitBounds={fitBounds} fitBounds={fitBounds}
fitBoundsOptions={fitBoundsOptions} fitBoundsOptions={fitBoundsOptions}
maxBounds={maxBounds}> maxBounds={maxBounds}>
{(facilities.length > 0) && facilities.map((item) =>{ {(facilities.length > 0) && facilities.map((item) =>{
return( return(
<Marker <Marker
...@@ -132,6 +159,13 @@ class FacilitiesMap extends React.Component { ...@@ -132,6 +159,13 @@ class FacilitiesMap extends React.Component {
})} })}
</Map> </Map>
<MapDialog
open={mapDialogOpen}
facilities={facilities}
facility={facility}
maxBounds={maxBounds}
onRequestClose={this.handleRequestClose}
/>
</div> </div>
) )
} }
......
import React from 'react'
import ReactMapboxGl, { Layer, Feature,Marker,Source,GeoJSONLayer } from "react-mapbox-gl";
import MapboxClient from 'mapbox'
import mapboxgl from 'mapbox-gl'
import {withStyles} from 'material-ui/styles';
import {addRoute,getGeoLine} from '../utils/mapboxUtils';
import PropTypes from 'prop-types';
import Button from 'material-ui/Button';
import Avatar from 'material-ui/Avatar';
import List, { ListItem, ListItemAvatar, ListItemText } from 'material-ui/List';
import Dialog, { DialogTitle } from 'material-ui/Dialog';
import PersonIcon from 'material-ui-icons/Person';
import AddIcon from 'material-ui-icons/Add';
import Typography from 'material-ui/Typography';
import blue from 'material-ui/colors/blue';
const emails = ['username@gmail.com', 'user02@gmail.com'];
const styles = {
avatar: {
background: blue[100],
color: blue[600],
},
};
const token = "pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA";
const Map = ReactMapboxGl({
accessToken: token,
attributionControl:false,
});
let starbucksLogo = new Image();
starbucksLogo.src = require('../images/starbucksSVG.svg')
starbucksLogo.width = 60
starbucksLogo.height = 60
const images = ['starbucks',starbucksLogo,{pixelRatio:3}]
class SimpleDialog extends React.Component {
handleRequestClose = () => {
this.props.onRequestClose(this.props.selectedValue);
};
handleListItemClick = value => {
this.props.onRequestClose(value);
};
render() {
const { classes, selectedValue,facility,facilities,maxBounds,...other } = this.props;
let center,zoom
try{
center = facility.facility_location.coordinate_location.coordinates;
zoom = 17;
}catch(e){
zoom=13;
center = [(maxBounds[0][0]+maxBounds[1][0])/2,(maxBounds[0][1]+maxBounds[1][1])/2]
}
return (
<Dialog onRequestClose={this.handleRequestClose} {...other}>
<Map
onStyleLoad={(map,e)=>{
map.addControl(new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
}));
}}
onClick={(map,e)=>{
this.setState({
mapDialogOpen: true
})
console.log('changed')
}}
style="mapbox://styles/mapbox/streets-v9"
movingMethod={'easeTo'}
containerStyle={{
height: "500px",
width: "600px",
borderRadius:'5px',
}}
center={center}
zoom={[zoom]}
maxBounds={maxBounds}>
{(facilities.length > 0) && facilities.map((item) =>{
return(
<Marker
key={item.slug}
coordinates={item.facility_location.coordinate_location.coordinates}
anchor="bottom">
<img height={20} width={20} src={require('../images/starbucksSVG.svg')}/>
{/* <div style={Mark}></div> */}
</Marker>
)
})}
</Map>
</Dialog>
);
}
}
SimpleDialog.propTypes = {
classes: PropTypes.object.isRequired,
onRequestClose: PropTypes.func,
selectedValue: PropTypes.string,
};
const MapDialog = withStyles(styles)(SimpleDialog);
export default MapDialog
...@@ -57,8 +57,8 @@ const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, f ...@@ -57,8 +57,8 @@ const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, f
<div className={'sidebar-row2'}> <div className={'sidebar-row2'}>
<FacilitiesMap isMapOpen={isSidebarMapOpen} facilities={facilities} facility={facility}/> <FacilitiesMap isMapOpen={isSidebarMapOpen} facilities={facilities} facility={facility}/>
<Button className={'sidebar-toggle-map-btn'} {/* <Button className={'sidebar-toggle-map-btn'}
onClick={handleSidebarMapToggle}>{isSidebarMapOpen ? 'Close Map' : 'Open Map'}</Button> onClick={handleSidebarMapToggle}>{isSidebarMapOpen ? 'Close Map' : 'Open Map'}</Button> */}
</div> </div>
</Paper> </Paper>
) )
......
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