Commit 24c1e999 authored by Mattias J Duffy's avatar Mattias J Duffy

added route and current location. its pretty rough currently

parent 3d69e5ad
......@@ -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.
......
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>
)
......
......@@ -140,7 +140,7 @@ const styleSheet = {
},
cardContainer:{
height:'calc(100% - 86px)',
overflowY:'scroll',
overflowY:'auto',
overflowX:'hidden',
}
......
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
......@@ -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"
......
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