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'
import mapboxgl from 'mapbox-gl'
import {withStyles} from 'material-ui/styles';
import {addRoute,getGeoLine} from '../utils/mapboxUtils';
import MapDialog from './MapDialog';
const token = "pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA";
let starbucksLogo = new Image();
......@@ -13,8 +14,10 @@ starbucksLogo.height = 60
const images = ['starbucks',starbucksLogo,{pixelRatio:3}]
const Map = ReactMapboxGl({
accessToken: token,
interactive:false,
attributionControl:false,
});
const client = new MapboxClient(token);
// const client = new MapboxClient(token);
const Mark = {
backgroundColor: '#e74c3c',
......@@ -45,7 +48,8 @@ class FacilitiesMap extends React.Component {
[ -77.295213,38.835720] // Northeast coordinates
],
fitBoundsOptions:{
}
},
mapDialogOpen:false
}
}
componentWillMount = () =>{
......@@ -91,34 +95,57 @@ class FacilitiesMap extends React.Component {
// }
// }
handleRequestClose = () => {
this.setState({
mapDialogOpen:false,
})
}
render (){
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)
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(
<div className={classes.mapContainer} style={{'transform': isMapOpen ? 'translateY(0px)' : 'translateY(436px)'}}>
<Map
onStyleLoad={(map,e)=>{
map.addControl(new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
}));
// 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: "400px",
width: "400px"
height: "200px",
width: "380px",
margin:"10px",
borderRadius:'5px',
cursor: 'pointer',
}}
center={center}
zoom={[zoom]}
fitBounds={fitBounds}
fitBoundsOptions={fitBoundsOptions}
maxBounds={maxBounds}>
{(facilities.length > 0) && facilities.map((item) =>{
return(
<Marker
......@@ -132,6 +159,13 @@ class FacilitiesMap extends React.Component {
})}
</Map>
<MapDialog
open={mapDialogOpen}
facilities={facilities}
facility={facility}
maxBounds={maxBounds}
onRequestClose={this.handleRequestClose}
/>
</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
<div className={'sidebar-row2'}>
<FacilitiesMap isMapOpen={isSidebarMapOpen} facilities={facilities} facility={facility}/>
<Button className={'sidebar-toggle-map-btn'}
onClick={handleSidebarMapToggle}>{isSidebarMapOpen ? 'Close Map' : 'Open Map'}</Button>
{/* <Button className={'sidebar-toggle-map-btn'}
onClick={handleSidebarMapToggle}>{isSidebarMapOpen ? 'Close Map' : 'Open Map'}</Button> */}
</div>
</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