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

src/components/FacilitiesMap.js

@@ -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>
     )
 }

src/components/MapDialog.js

+
+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 

src/components/Sidebar.js

@@ -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>
     )