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

map scrolls to location when clicked

parent 2f86c347
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]
}
}
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];
}
console.log(facilities)
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
......@@ -140,7 +140,8 @@ const styleSheet = {
},
cardContainer:{
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