added route and current location. its pretty rough currently

package.json

@@ -8,6 +8,7 @@
     "fuzzysearch": "^1.0.3",
     "history": "^4.6.3",
     "immutability-helper": "^2.3.0",
+    "mapbox": "^1.0.0-beta9",
     "mapbox-gl": "^0.40.1",
     "material-ui": "next",
     "material-ui-icons": "^1.0.0-alpha.19",

public/index.html

@@ -11,6 +11,7 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Nunito" />
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css' rel='stylesheet' />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/components/FacilitiesMap.js

 import React from 'react'
-import ReactMapboxGl, { Layer, Feature,Marker } from "react-mapbox-gl";
+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';
-var bounds = [
-    [ -77.321649,38.823919], // Southwest coordinates
-    [ -77.295213,38.835720]  // Northeast coordinates
-];
+import {addRoute,getGeoLine} from '../utils/mapboxUtils';
+
+const token = "pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA";
 let starbucksLogo = new Image();
 starbucksLogo.src = require('../images/starbucksSVG.svg')
 starbucksLogo.width = 60
 starbucksLogo.height = 60
 const images = ['starbucks',starbucksLogo,{pixelRatio:3}]
 const Map = ReactMapboxGl({
-  accessToken: "pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA",
+  accessToken: token,
 });
+const client = new MapboxClient(token);
+
+const Mark = {
+backgroundColor: '#e74c3c',
+borderRadius: '50%',
+width: '12px',
+height: '12px',
+border: '3px solid #EAA29B',
+};
+
+
 
 class FacilitiesMap extends React.Component { 
     constructor(props){
         super(props)
+        var sw = new mapboxgl.LngLat(-77.307045, 38.827285);
+        var ne = new mapboxgl.LngLat(-77.303368,38.831866);
+        var llb = new mapboxgl.LngLatBounds(sw, ne);
         this.state = {
-            center:[0,0] 
+            positionReady:false,
+            position:{longitude:0,latitude:0},
+            mappedRoute:false,
+            fitBounds:[
+                [ -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
+            ],
+            fitBoundsOptions:{
+            }
         }
     }
-   
-    render (){ 
-        const {facilities,facility,classes} = this.props
-        let center, zoom;
-        try{
-           center = facility.facility_location.coordinate_location.coordinates;
-           zoom = [17];
+    componentWillMount = () =>{
+
+        if ("geolocation" in navigator) {
+            const t1 = performance.now();
+            navigator.geolocation.getCurrentPosition((position) =>{
+                const newCoords = position.coords
+                this.setState({
+                    position:position.coords,
+                    positionReady:true,
+                })
+                const t2 = performance.now()
+                console.log("took "+(t2-t1)/1000 + " seconds to load your current position")
+            })
+         } else {
+            console.log('geolocation is not availabe for your computer')
+        }
+    }
+
+    componentWillReceiveProps = (nextProps) =>{
+        try {
+            const coordsArr = nextProps.facility.facility_location.coordinate_location.coordinates
+            const coordsObj = {latitude:coordsArr[1],longitude:coordsArr[0]}
+            if(this.state.positionReady){
+                getGeoLine(client,this.state.position,coordsObj,()=>{}).then((route)=>{
+                    const coords = route.geometry.coordinates
+                    const bounds = coords.reduce(function(bounds, coord) {
+                        return bounds.extend(coord);
+                    }, new mapboxgl.LngLatBounds(coords[0], coords[0]));
+                    const boundsArr = [[bounds._sw.lng,bounds._sw.lat],[bounds._ne.lng,bounds._ne.lat]]
+                    console.log(bounds)
+                    console.log(boundsArr)
+                    this.setState({
+                        mappedRoute:coords,
+                        fitBounds:boundsArr,
+                        fitBoundsOptions:{padding:20},
+                    })
+                })
+            }
         }catch(e){
-           center = [-77.307959,38.829841]
-           zoom = [13];
+
         }
+    }
+
+
+    render (){ 
+        const {facilities,facility,classes} = this.props
+        const {position,positionReady,fitBounds,maxBounds,mappedRoute,fitBoundsOptions} = this.state
+        console.log(fitBounds)
         return(
         <div>
         <Map
-        style="mapbox://styles/mapbox/light-v9"
+        onStyleLoad={(map,e)=>{
+       
+        }}
+        style="mapbox://styles/mapbox/streets-v9"
         movingMethod={'easeTo'}
         containerStyle={{
           height: "400px",
           width: "400px"
         }}
-        center={center}
-        zoom={zoom}
-        maxBounds={bounds}>
+        fitBounds={fitBounds} 
+        fitBoundsOptions={fitBoundsOptions} 
+        maxBounds={maxBounds}>
          
             {(facilities.length > 0) && facilities.map((item) =>{
                     return(
@@ -51,10 +118,18 @@ class FacilitiesMap extends React.Component {
                             key={item.slug}
                             coordinates={item.facility_location.coordinate_location.coordinates}
                             anchor="bottom">
-                            <img height={20} width={20} src={require('../images/starbucksSVG.svg')}/>
+                            {/* <img height={20} width={20} src={require('../images/starbucksSVG.svg')}/> */}
+                            <div style={Mark}></div>
                        </Marker>
                     )
             })} 
+               {<Layer
+                        type="line"
+                        layout={{"line-join": "round","line-cap": "round"}}
+                        paint={{"line-color": "#888","line-width": 5}}
+                      >
+                      {mappedRoute && <Feature coordinates={mappedRoute}/>}
+                      </Layer>} 
       </Map>
         </div>
     )

src/containers/Layout.js

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

src/utils/mapboxUtils.js

+const addRoute = (map,geometry) =>{
+    map.addLayer({
+        "id": "route",
+        "type": "line",
+        "source": {
+            "type": "geojson",
+            "data": {
+                "type": "Feature",
+                "properties": {},
+                "geometry":geometry 
+            }
+        },
+        "layout": {
+            "line-join": "round",
+            "line-cap": "round"
+        },
+        "paint": {
+            "line-color": "#4790E5",
+            "line-width": 5
+        }
+    });
+}
+
+const getGeoLine = (mapboxClient,start,end,callback) =>{
+
+    return new Promise((resolve, reject) => {
+        mapboxClient.getDirections([
+            start,
+            end
+            ], {
+            profile: 'walking',
+            alternatives: false,
+            geometry: 'geojson'
+            }, function(err, results) {
+                resolve(results.routes[0])
+            }
+        );
+    });
+}
+export {addRoute,getGeoLine};
\ No newline at end of file

yarn.lock

@@ -4439,6 +4439,13 @@ mapbox-gl@^0.40.1:
     vt-pbf "^3.0.1"
     webworkify "^1.4.0"
 
+mapbox@^1.0.0-beta9:
+  version "1.0.0-beta9"
+  resolved "https://registry.yarnpkg.com/mapbox/-/mapbox-1.0.0-beta9.tgz#580bbacd9990bbe10f2f729ff4031a3b898d27a4"
+  dependencies:
+    es6-promise "^4.0.5"
+    rest "^2.0.0"
+
 material-ui-icons@^1.0.0-alpha.19:
   version "1.0.0-beta.5"
   resolved "https://registry.yarnpkg.com/material-ui-icons/-/material-ui-icons-1.0.0-beta.5.tgz#ff012ffd1f6c6e08d65ba91ecdc667286931b45c"
@@ -6105,6 +6112,10 @@ resolve@^1.1.5, resolve@^1.1.6, resolve@^1.3.2:
   dependencies:
     path-parse "^1.0.5"
 
+rest@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/rest/-/rest-2.0.0.tgz#6dfadf66a405c49cfbd5b4bd25b59fd29cd861bc"
+
 restore-cursor@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"