Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in / Register
Toggle navigation
Menu
Open sidebar
code
hollandse-luchten-route-app
Commits
2f2a3e31
Commit
2f2a3e31
authored
Sep 15, 2020
by
alain
🐙
Browse files
routedata, point markup/styling, etc
parent
65ffc402
Changes
5
Hide whitespace changes
Inline
Side-by-side
src/App.js
View file @
2f2a3e31
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
ReactMapGL
,
{
Marker
,
Source
,
Layer
,
FlyToInterpolator
}
from
'
react-map-gl
'
;
import
WebMercatorViewport
from
'
@math.gl/web-mercator
'
;
import
{
mapStyle
}
from
"
./mapStyle
"
import
{
mapControlSettings
,
initialViewport
}
from
"
./mapSettings
"
import
{
mapControlSettings
,
mapDefaults
}
from
"
./mapSettings
"
import
MapControls
from
'
./MapControls
'
import
MapLocations
from
"
./MapLocations
"
import
Modal
from
'
./Modal
'
import
{
routeData
}
from
'
./routeData
'
//import { routePoints } from './routePoints'
import
{
routeStyle
}
from
'
./routeStyle
'
const
getZoomClass
=
(
zoomLevel
)
=>
{
let
className
=
""
switch
(
true
)
{
case
(
zoomLevel
<
9
):
className
=
"
very-low
"
;
break
;
case
(
zoomLevel
<
11.5
):
className
=
"
low
"
;
break
;
case
(
zoomLevel
<
12.5
):
className
=
"
medium
"
;
break
;
default
:
className
=
"
high
"
;
break
;
}
return
className
}
function
App
()
{
const
[
viewport
,
setViewport
]
=
useState
(
initialViewport
);
const
[
viewport
,
_setViewport
]
=
useState
({
...
mapDefaults
.
viewport
,
width
:
Math
.
max
(
document
.
documentElement
.
clientWidth
||
0
,
window
.
innerWidth
||
0
),
height
:
Math
.
max
(
document
.
documentElement
.
clientHeight
||
0
,
window
.
innerHeight
||
0
)
});
const
[
modalContent
,
setModalContent
]
=
useState
(
null
);
const
[
selectedCenter
,
setSelectedCenter
]
=
useState
(
null
);
const
[
routePoints
,
setRoutePoints
]
=
useState
(
null
);
const
viewportRef
=
useRef
(
viewport
);
const
setViewport
=
newViewport
=>
{
viewportRef
.
current
=
newViewport
;
_setViewport
(
newViewport
);
};
useEffect
(()
=>
{
changeViewportBounds
(
null
,
mapDefaults
.
bounds
)
loadData
();
window
.
addEventListener
(
'
resize
'
,
handleResize
)
},
[])
const
loadData
=
async
()
=>
{
const
response
=
await
fetch
(
"
https://hollandseluchten.waag.org/wp-json/wp/v2/route?_fields=id,title,content,acf.subtitle,acf.note&order=asc
"
)
const
data
=
await
response
.
json
()
...
...
@@ -47,20 +74,30 @@ function App() {
longitude
:
long
,
bounds
:
[[
long
-
boundsSize
,
lat
-
boundsSize
],
[
long
+
boundsSize
,
lat
+
boundsSize
]]
}
})
})
.
sort
((
a
,
b
)
=>
{
return
b
.
latitude
-
a
.
latitude
});
setRoutePoints
(
points
)
//console.log
(points)
console
.
log
(
points
)
setRoutePoints
(
points
)
const
point
=
window
.
location
.
hash
?
data
[
window
.
location
.
hash
.
replace
(
'
#
'
,
''
)]
:
points
[
0
]
const
point
=
window
.
location
.
hash
?
data
[
window
.
location
.
hash
.
replace
(
'
#
'
,
''
)]
:
points
.
find
(
point
=>
point
.
number
===
null
)
if
(
point
)
{
setModalContent
(
point
)
changeViewportBounds
(
null
,
point
.
bounds
)
}
}
const
handleResize
=
()
=>
{
setViewport
({
...
viewportRef
.
current
,
width
:
Math
.
max
(
document
.
documentElement
.
clientWidth
||
0
,
window
.
innerWidth
||
0
),
height
:
Math
.
max
(
document
.
documentElement
.
clientHeight
||
0
,
window
.
innerHeight
||
0
)
})
}
const
changeViewport
=
(
event
,
change
)
=>
{
event
.
stopPropagation
()
if
(
event
)
event
.
stopPropagation
()
setViewport
({...
viewport
,
...
change
})
}
...
...
@@ -81,32 +118,13 @@ function App() {
setSelectedCenter
([
longitude
,
latitude
])
}
// const changeViewportCenter = (event, center, zoom) => {
// if(event) event.stopPropagation()
// const { viewport } = this.state
// const change = {
// longitude: center[0],
// latitude: center[1],
// zoom,
// transitionDuration: 500,
// transitionInterpolator: new FlyToInterpolator()
// }
// this.setState({
// viewport: {...viewport, ...change },
// selectedCenter: center,
// })
// }
const
closeModal
=
(
e
)
=>
{
setModalContent
(
null
)
}
return
(
<>
<
ReactMapGL
width
=
"
100%
"
height
=
"
100%
"
{...
viewport
}
onViewportChange
=
{
v
iewport
=>
setViewport
(
v
iewport
)}
mapStyle
=
{
mapStyle
}
>
<
ReactMapGL
{...
viewport
}
onViewportChange
=
{
newV
iewport
=>
setViewport
(
newV
iewport
)}
mapStyle
=
{
mapStyle
}
>
<
MapControls
mapControlSettings
=
{
mapControlSettings
}
viewport
=
{
viewport
}
changeViewport
=
{
changeViewport
}
/
>
<
div
className
=
'
mapboxgl-ctrl-top-left
'
>
...
...
@@ -118,19 +136,23 @@ function App() {
<
/Source
>
{
routePoints
&&
routePoints
.
filter
(
point
=>
point
.
number
).
map
(
point
=>
(
<
Marker
className
=
{
`route-marker zoom-
${
viewport
.
zoom
<
12.5
?
viewport
.
zoom
<
11.5
?
'
low
'
:
'
medium
'
:
'
high
'
}
`
}
key
=
{
point
.
number
}
latitude
=
{
point
.
latitude
}
longitude
=
{
point
.
longitude
}
offsetLeft
=
{
-
10
}
offsetTop
=
{
-
20
}
>
<
div
onClick
=
{
e
=>
{
setModalContent
(
point
)
}
}
>
<
h3
className
=
"
marker-title
"
><
span
className
=
"
marker-title
"
>
{
point
.
number
}
<
/span><span className="marker-title-title">{ point.titleNoNumber }</
span
><
/h3
>
<
Marker
className
=
{
`route-marker zoom-
${
getZoomClass
(
viewport
.
zoom
)
}
`
}
key
=
{
point
.
number
}
latitude
=
{
point
.
latitude
}
longitude
=
{
point
.
longitude
}
offsetLeft
=
{
-
10
}
offsetTop
=
{
viewport
.
zoom
<
12.5
?
-
30
:
-
50
}
>
<
div
onClick
=
{
()
=>
{
setModalContent
(
point
)
}
}
>
<
h3
className
=
"
marker-title
"
><
span
className
=
"
marker-title
-number
"
>
{
point
.
number
}
<
/span><span className="marker-title-title">{ point.titleNoNumber }</
span
><
/h3
>
<
h4
className
=
"
marker-subtitle
"
>
{
point
.
subtitle
}
<
/h4
>
<
/div
>
<
/Marker
>
))
}
<
/ReactMapGL
>
{
modalContent
&&
<
Modal
closeModal
=
{
closeModal
}
>
<
h1
>
{
modalContent
.
titleNoNumber
}
<
/h1
>
<
div
>
{
modalContent
.
number
!==
null
&&
<
span
style
=
{{
float
:
"
right
"
,
marginTop
:
"
0.5rem
"
,
fontSize
:
"
0.75rem
"
}}
>
{
modalContent
.
latitude
},
{
modalContent
.
longitude
}
<
/span>
}
{
modalContent
.
title
&&
<
h3
style
=
{{
fontWeight
:
"
400
"
}}
>
{
modalContent
.
title
}
<
/h3>
}
<
/div
>
{
modalContent
.
subtitle
&&
<
h2
>
{
modalContent
.
subtitle
}
<
/h2>
}
<
div
dangerouslySetInnerHTML
=
{{
__html
:
modalContent
.
body
}}
/
>
{
modalContent
.
number
===
null
&&
<
p
style
=
{{
textAlign
:
"
center
"
,
marginTop
:
"
2rem
"
}}
><
button
className
=
"
button
"
onClick
=
{()
=>
{
closeModal
()
}}
>
Naar
de
route
<
/button></
p
>
}
<
/Modal>
}
<
/
>
);
...
...
src/css/index.scss
View file @
2f2a3e31
...
...
@@ -15,6 +15,7 @@
padding
:
0
.2em
0
.4em
;
white-space
:
nowrap
;
box-shadow
:
0
0
0
.4rem
0
.1rem
rgba
(
0
,
0
,
0
,
0
.15
);
cursor
:
pointer
!
important
;
&
:after
{
content
:
""
;
...
...
@@ -29,27 +30,31 @@
}
.marker-title
{
margin
:
0
.4em
0
0
0
;
margin
:
0
.2em
0
0
0
;
font-size
:
0
.9rem
;
}
&
.zoom-low
.marker-title-title
{
display
:
none
;
.marker-title-number
{
width
:
0
.9rem
;
text-align
:
center
;
}
.marker-title-title
{
margin-left
:
0
.4rem
;
}
.marker-subtitle
{
font-weight
:
400
;
margin
:
0
.
25
em
0
0
0
;
margin
:
0
.
1
em
0
0
1
.2rem
;
display
:
none
;
font-size
:
0
.9rem
;
}
&
.zoom-high
h4
{
display
:
block
;
}
&
.zoom-very-low
{
display
:
none
;
}
&
.zoom-low
.marker-title-title
{
display
:
none
;
}
&
.zoom-high
.marker-subtitle
{
display
:
block
;
}
}
.map-crtl-group
{
margin
:
10px
;
}
...
...
src/mapSettings.js
View file @
2f2a3e31
...
...
@@ -8,9 +8,13 @@ export const mapControlSettings = {
bearingStep
:
10
}
export
const
initialViewport
=
{
latitude
:
52.470253
,
longitude
:
4.600650
,
zoom
:
12.8
,
pitch
:
0
export
const
mapDefaults
=
{
bounds
:
[
[
4.5
,
52.6
],
[
5
,
52.3
]
],
viewport
:
{
pitch
:
45
,
bearing
:
0
}
}
\ No newline at end of file
src/routeData.js
View file @
2f2a3e31
...
...
@@ -9,14 +9,99 @@ export const routeData = {
"
type
"
:
"
LineString
"
,
"
coordinates
"
:
[
[
4.655064
,
52.478396
],
[
4.655221
,
52.478513
],
[
4.655081
,
52.478723
],
[
4.654185
,
52.47952
],
[
4.655178
,
52.480631
],
[
4.65403
,
52.481388
],
[
4.654461
,
52.482185
],
[
4.655811
,
52.485132
],
[
4.659448
,
52.49339
],
[
4.660907
,
52.493494
],
[
4.66242
,
52.494357
],
[
4.663332
,
52.494579
],
[
4.664581
,
52.495271
],
[
4.663911
,
52.495702
],
[
4.663664
,
52.496199
],
[
4.663385
,
52.496411
],
[
4.663448
,
52.496514
],
[
4.663294
,
52.496473
],
[
4.663171
,
52.496565
],
[
4.663181
,
52.496813
],
[
4.662881
,
52.497054
],
[
4.6628
,
52.497165
],
[
4.662548
,
52.49712
],
[
4.662146
,
52.496904
],
[
4.661958
,
52.496855
],
[
4.661728
,
52.496855
],
[
4.661583
,
52.496881
],
[
4.661352
,
52.496878
],
[
4.658922
,
52.496404
],
[
4.658348
,
52.496316
],
[
4.65808
,
52.496287
],
[
4.656739
,
52.49599
],
[
4.656374
,
52.495885
],
[
4.655548
,
52.495565
],
[
4.655371
,
52.495294
],
[
4.655097
,
52.495082
],
[
4.65418
,
52.494579
],
[
4.653032
,
52.493828
],
[
4.652946
,
52.493736
],
[
4.651546
,
52.492841
],
[
4.650393
,
52.492061
],
[
4.649094
,
52.491241
],
[
4.64873
,
52.490947
],
[
4.648751
,
52.490849
],
[
4.64874
,
52.490783
],
[
4.648574
,
52.490689
],
[
4.648429
,
52.490672
],
[
4.648317
,
52.490679
],
[
4.647099
,
52.489967
],
[
4.646916
,
52.489843
],
[
4.646772
,
52.489719
],
[
4.645876
,
52.489209
],
[
4.643816
,
52.487981
],
[
4.643129
,
52.487595
],
[
4.642721
,
52.48719
],
[
4.642614
,
52.486517
],
[
4.642593
,
52.485439
],
[
4.642689
,
52.484949
],
[
4.642716
,
52.484616
],
[
4.642121
,
52.484662
],
[
4.641557
,
52.484802
],
[
4.639739
,
52.485358
],
[
4.637759
,
52.485933
],
[
4.636998
,
52.486145
],
[
4.636622
,
52.486328
],
[
4.634525
,
52.486952
],
[
4.633028
,
52.487468
],
[
4.631799
,
52.487899
],
[
4.631531
,
52.487945
],
[
4.63071
,
52.487912
],
[
4.629927
,
52.487919
],
[
4.629766
,
52.488066
],
[
4.629605
,
52.488105
],
[
4.629369
,
52.488128
],
[
4.629128
,
52.488027
],
[
4.627846
,
52.48817
],
[
4.627283
,
52.488242
],
[
4.626049
,
52.48849
],
[
4.625829
,
52.488575
],
[
4.625335
,
52.488882
],
[
4.619955
,
52.490222
],
[
4.619703
,
52.490287
],
[
4.61951
,
52.490258
],
[
4.619295
,
52.490248
],
[
4.619145
,
52.490196
],
[
4.618801
,
52.490231
],
[
4.618201
,
52.490166
],
[
4.616956
,
52.490359
],
[
4.613748
,
52.490695
],
[
4.602034
,
52.493826
],
[
4.591251
,
52.490354
],
[
4.628528
,
52.474441
],
[
4.637773
,
52.450515
],
[
4.562839
,
52.456153
],
[
4.602963
,
52.460026
],
[
4.562839
,
52.456153
]
]
}
}]
...
...
src/routeStyle.js
View file @
2f2a3e31
export
const
routeStyle
=
{
paint
:
{
'
line-color
'
:
'
#2FB6BC
'
,
'
line-width
'
:
6
"
line-width
"
:
{
"
base
"
:
1.4
,
"
stops
"
:
[
[
5.8
,
0
],
[
6
,
1
],
[
20
,
30
]
]
}
}
}
\ No newline at end of file
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