Commit 3d69e5ad authored by Mattias J Duffy's avatar Mattias J Duffy
Browse files

map scrolls to location when clicked

parent 2f86c347
import React from 'react' 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'; import {withStyles} from 'material-ui/styles';
var bounds = [ var bounds = [
[ -77.321649,38.823919], // Southwest coordinates [ -77.321649,38.823919], // Southwest coordinates
[ -77.295213,38.835720] // Northeast coordinates [ -77.295213,38.835720] // Northeast coordinates
...@@ -15,46 +14,55 @@ const Map = ReactMapboxGl({ ...@@ -15,46 +14,55 @@ const Map = ReactMapboxGl({
accessToken: "pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA", accessToken: "pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA",
}); });
const FacilitiesMap = ({classes,facility,facilities}) => { class FacilitiesMap extends React.Component {
if(typeof(facility.coordinate_location)==="undefined"){ constructor(props){
facility.coordinate_location = { super(props)
"type": "Point", this.state = {
"coordinates": [ center:[0,0]
-77.30893491622413,
38.83167634001073
]
} }
} }
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> <div>
<Map <Map
style="mapbox://styles/mapbox/light-v9" style="mapbox://styles/mapbox/light-v9"
movingMethod={'easeTo'}
containerStyle={{ containerStyle={{
height: "400px", height: "400px",
width: "400px" width: "400px"
}} }}
center={center}
zoom={zoom}
maxBounds={bounds}> maxBounds={bounds}>
<Layer
type="symbol"
id="marker"
layout={{ "icon-image": "starbucks" }}
images={images}>
{(facilities.length > 0) && facilities.map((item) =>{ {(facilities.length > 0) && facilities.map((item) =>{
return( 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> </Map>
</div> </div>
) )
} }
}
const styleSheet = { const styleSheet = {
} }
export default withStyles(styleSheet)(FacilitiesMap) export default withStyles(styleSheet)(FacilitiesMap)
\ No newline at end of file
...@@ -140,7 +140,8 @@ const styleSheet = { ...@@ -140,7 +140,8 @@ const styleSheet = {
}, },
cardContainer:{ cardContainer:{
height:'calc(100% - 86px)', height:'calc(100% - 86px)',
overflowY:'scroll' overflowY:'scroll',
overflowX:'hidden',
} }
} }
......
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