Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
SRCT
whats-open-web
Commits
3d69e5ad
Commit
3d69e5ad
authored
Oct 06, 2017
by
Mattias J Duffy
Browse files
map scrolls to location when clicked
parent
2f86c347
Changes
2
Hide whitespace changes
Inline
Side-by-side
src/components/FacilitiesMap.js
View file @
3d69e5ad
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
View file @
3d69e5ad
...
...
@@ -140,7 +140,8 @@ const styleSheet = {
},
cardContainer
:{
height
:
'
calc(100% - 86px)
'
,
overflowY
:
'
scroll
'
overflowY
:
'
scroll
'
,
overflowX
:
'
hidden
'
,
}
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment