map scrolls to location when clicked

src/components/FacilitiesMap.js

 import React from 'react'
-import ReactMapboxGl, { Layer, Feature } from "react-mapbox-gl";
+import ReactMapboxGl, { Layer, Feature,Marker } from "react-mapbox-gl";
 import {withStyles} from 'material-ui/styles';
-
 var bounds = [
     [ -77.321649,38.823919], // Southwest coordinates
     [ -77.295213,38.835720]  // Northeast coordinates
@@ -15,46 +14,55 @@ const Map = ReactMapboxGl({
   accessToken: "pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA",
 });
 
-const FacilitiesMap = ({classes,facility,facilities}) => {
-    if(typeof(facility.coordinate_location)==="undefined"){
-        facility.coordinate_location = {
-            "type": "Point",
-            "coordinates": [
-                -77.30893491622413,
-                38.83167634001073
-            ]
+class FacilitiesMap extends React.Component { 
+    constructor(props){
+        super(props)
+        this.state = {
+            center:[0,0] 
         }
     }
-    console.log(facilities)
-    return(
+   
+    render (){ 
+        const {facilities,facility,classes} = this.props
+        let center, zoom;
+        try{
+           center = facility.facility_location.coordinate_location.coordinates;
+           zoom = [17];
+        }catch(e){
+           center = [-77.307959,38.829841]
+           zoom = [13];
+        }
+        return(
         <div>
         <Map
         style="mapbox://styles/mapbox/light-v9"
+        movingMethod={'easeTo'}
         containerStyle={{
           height: "400px",
           width: "400px"
         }}
+        center={center}
+        zoom={zoom}
         maxBounds={bounds}>
-          <Layer
-            type="symbol"
-            id="marker"
-            layout={{ "icon-image": "starbucks" }}
-            images={images}>
+         
             {(facilities.length > 0) && facilities.map((item) =>{
                     return(
-                       <Feature key={item.slug} coordinates={item.facility_location.coordinate_location.coordinates}/> 
+                       <Marker
+                            key={item.slug}
+                            coordinates={item.facility_location.coordinate_location.coordinates}
+                            anchor="bottom">
+                            <img height={20} width={20} src={require('../images/starbucksSVG.svg')}/>
+                       </Marker>
                     )
             })} 
-            <Feature coordinates={[-77.30893491622413,38.83167634001073]}/>
-          </Layer>
       </Map>
         </div>
     )
 }
+}
 const styleSheet  = {
 
 }
 
 
-
 export default withStyles(styleSheet)(FacilitiesMap)
\ No newline at end of file

src/containers/Layout.js

@@ -140,7 +140,8 @@ const styleSheet = {
     },
     cardContainer:{
         height:'calc(100% - 86px)',
-        overflowY:'scroll'
+        overflowY:'scroll',
+        overflowX:'hidden',
     }
     
 }