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
65ffc402
Commit
65ffc402
authored
Sep 14, 2020
by
alain
🐙
Browse files
get routePoints from wp
parent
df29f729
Changes
6
Hide whitespace changes
Inline
Side-by-side
public/index.html
View file @
65ffc402
...
...
@@ -15,9 +15,13 @@
font-family
:
'Maax'
,
sans-serif
;
margin
:
0
;
}
h1
{
h1
,
h2
,
h3
,
h4
{
font-weight
:
500
;
}
p
{
line-height
:
1.5
;
}
</style>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div
id=
"root"
></div>
...
...
src/App.js
View file @
65ffc402
...
...
@@ -9,7 +9,7 @@ import MapLocations from "./MapLocations"
import
Modal
from
'
./Modal
'
import
{
routeData
}
from
'
./routeData
'
import
{
routePoints
}
from
'
./routePoints
'
//
import { routePoints } from './routePoints'
import
{
routeStyle
}
from
'
./routeStyle
'
...
...
@@ -17,14 +17,47 @@ function App() {
const
[
viewport
,
setViewport
]
=
useState
(
initialViewport
);
const
[
modalContent
,
setModalContent
]
=
useState
(
null
);
const
[
selectedCenter
,
setSelectedCenter
]
=
useState
(
null
);
const
[
routePoints
,
setRoutePoints
]
=
useState
(
null
);
useEffect
(()
=>
{
const
point
=
window
.
location
.
hash
?
routePoints
[
window
.
location
.
hash
.
replace
(
'
#
'
,
''
)]
:
routePoints
[
0
]
loadData
();
},
[])
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
()
const
points
=
data
.
map
((
point
,
i
)
=>
{
const
titleSplit
=
point
.
title
.
rendered
.
split
(
"
.
"
)
const
number
=
titleSplit
.
length
===
2
?
titleSplit
[
0
]
:
null
const
titleNoNumber
=
titleSplit
.
length
===
2
?
titleSplit
[
1
]
:
titleSplit
[
0
]
let
[
lat
,
long
]
=
point
.
acf
.
note
.
split
(
"
,
"
)
lat
=
Number
(
lat
)
long
=
Number
(
long
)
const
boundsSize
=
i
===
0
?
0.05
:
0.002
return
{
number
:
number
,
titleNoNumber
:
titleNoNumber
,
title
:
point
.
title
.
rendered
,
subtitle
:
point
.
acf
.
subtitle
,
body
:
point
.
content
.
rendered
,
latitude
:
lat
,
longitude
:
long
,
bounds
:
[[
long
-
boundsSize
,
lat
-
boundsSize
],
[
long
+
boundsSize
,
lat
+
boundsSize
]]
}
})
setRoutePoints
(
points
)
console
.
log
(
points
)
const
point
=
window
.
location
.
hash
?
data
[
window
.
location
.
hash
.
replace
(
'
#
'
,
''
)]
:
points
[
0
]
if
(
point
)
{
setModalContent
(
point
)
}
}
,
[])
}
const
changeViewport
=
(
event
,
change
)
=>
{
event
.
stopPropagation
()
...
...
@@ -84,16 +117,19 @@ function App() {
<
Layer
id
=
"
route
"
type
=
"
line
"
{...
routeStyle
}
/
>
<
/Source
>
{
routePoints
.
filter
(
point
=>
point
.
latitude
).
map
(
point
=>
(
<
Marker
className
=
"
route-marker
"
key
=
{
point
.
title
}
latitude
=
{
point
.
latitude
}
longitude
=
{
point
.
longitude
}
offsetLeft
=
{
-
10
}
offsetTop
=
{
-
20
}
>
<
h3
onClick
=
{
e
=>
{
setModalContent
(
point
)
}
}
>
{
point
.
title
}
<
/h3
>
{
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
>
<
h4
className
=
"
marker-subtitle
"
>
{
point
.
subtitle
}
<
/h4
>
<
/div
>
<
/Marker
>
))
}
<
/ReactMapGL
>
{
modalContent
&&
<
Modal
closeModal
=
{
closeModal
}
>
<
h1
>
{
modalContent
.
title
}
<
/h1
>
<
h1
>
{
modalContent
.
title
NoNumber
}
<
/h1
>
<
div
dangerouslySetInnerHTML
=
{{
__html
:
modalContent
.
body
}}
/
>
<
/Modal>
}
<
/
>
...
...
src/MapLocations.js
View file @
65ffc402
...
...
@@ -75,10 +75,10 @@ class MapLocations extends React.Component {
return
(
<
div
id
=
"
map-locations
"
className
=
{(
open
?
"
select open
"
:
"
select
"
)}
>
<
div
id
=
"
map-locations
"
className
=
{(
open
?
"
select open
"
:
"
select
"
)}
>
<
IconArrowDown
/>
<
div
className
=
"
value-current
"
onClick
=
{()
=>
{
this
.
setState
({
open
:
!
open
})
}}
>
{
current
}
<
/div
>
<
ul
className
=
"
value-list
"
>
<
ul
className
=
"
value-list
"
onScroll
=
{
(
e
)
=>
{
console
.
log
(
e
)
}
}
>
{
listOptions
}
<
/ul
>
<
/div
>
...
...
src/css/index.scss
View file @
65ffc402
...
...
@@ -3,13 +3,8 @@
#root
{
@import
"modal"
;
height
:
100vh
;
h3
{
font-weight
:
500
;
}
#map-locations
{
box-shadow
:
0
0
10px
0
rgba
(
0
,
0
,
0
,
0
.15
);
min-width
:
160px
;
...
...
@@ -20,25 +15,41 @@
padding
:
0
.2em
0
.4em
;
white-space
:
nowrap
;
box-shadow
:
0
0
0
.4rem
0
.1rem
rgba
(
0
,
0
,
0
,
0
.15
);
}
.route-marker
:after
{
content
:
""
;
position
:
absolute
;
top
:
100%
;
left
:
4px
;
width
:
0
;
height
:
0
;
border-left
:
5px
solid
transparent
;
border-right
:
5px
solid
transparent
;
border-top
:
5px
solid
#FFF
;
}
&
:after
{
content
:
""
;
position
:
absolute
;
top
:
100%
;
left
:
4px
;
width
:
0
;
height
:
0
;
border-left
:
5px
solid
transparent
;
border-right
:
5px
solid
transparent
;
border-top
:
5px
solid
#FFF
;
}
.marker-title
{
margin
:
0
.4em
0
0
0
;
}
&
.zoom-low
.marker-title-title
{
display
:
none
;
}
.marker-subtitle
{
font-weight
:
400
;
margin
:
0
.25em
0
0
0
;
display
:
none
;
}
.mapboxgl-marker
h3
{
margin
:
0
;
&
.zoom-high
h4
{
display
:
block
;
}
}
.map-crtl-group
{
margin
:
10px
;
}
...
...
@@ -55,6 +66,7 @@
}
.mapboxgl-ctrl-group
{
background-color
:
transparent
;
box-shadow
:
none
;
border-radius
:
0
;
}
...
...
@@ -66,6 +78,10 @@
border-radius
:
0
;
box-shadow
:
none
;
&
:focus
{
box-shadow
:
none
;
}
.mapboxgl-ctrl-icon
{
box-shadow
:
0
0
5px
0
rgba
(
0
,
0
,
0
,
0
.15
);
border-radius
:
0
;
...
...
@@ -73,10 +89,6 @@
}
}
.mapboxgl-ctrl-group
{
background-color
:
transparent
;
}
button
.mapboxgl-ctrl-icon
{
background-color
:
white
!
important
;
...
...
@@ -85,10 +97,6 @@
}
}
.mapboxgl-ctrl-group
button
:focus
{
box-shadow
:
none
;
}
.mapboxgl-user-location-dot
,
.mapboxgl-user-location-dot
:before
{
background-color
:
#2FB6BC
;
}
...
...
@@ -241,4 +249,3 @@
}
}
src/routeData.js
View file @
65ffc402
...
...
@@ -8,963 +8,15 @@ export const routeData = {
"
geometry
"
:
{
"
type
"
:
"
LineString
"
,
"
coordinates
"
:
[
[
4.5976
,
52.49348
],
[
4.59783
,
52.49345
],
[
4.59806
,
52.49342
],
[
4.59818
,
52.4934
],
[
4.5983
,
52.49336
],
[
4.59854
,
52.49329
],
[
4.60064
,
52.49275
],
[
4.60083
,
52.49271
],
[
4.60096
,
52.49268
],
[
4.60156
,
52.49255
],
[
4.60317
,
52.49223
],
[
4.60338
,
52.49217
],
[
4.60338
,
52.49213
],
[
4.60381
,
52.49204
],
[
4.60393
,
52.49202
],
[
4.60405
,
52.49202
],
[
4.60409
,
52.49204
],
[
4.60426
,
52.49199
],
[
4.60436
,
52.49193
],
[
4.60445
,
52.49186
],
[
4.60457
,
52.4917
],
[
4.60464
,
52.49164
],
[
4.6047
,
52.49159
],
[
4.60481
,
52.49154
],
[
4.60495
,
52.4915
],
[
4.60589
,
52.49131
],
[
4.60614
,
52.49126
],
[
4.60733
,
52.49105
],
[
4.60758
,
52.49102
],
[
4.60912
,
52.4908
],
[
4.60946
,
52.49077
],
[
4.60971
,
52.49076
],
[
4.60994
,
52.49077
],
[
4.61023
,
52.49079
],
[
4.6105
,
52.49084
],
[
4.61081
,
52.4909
],
[
4.61151
,
52.49107
],
[
4.61162
,
52.49109
],
[
4.61173
,
52.4911
],
[
4.61182
,
52.4911
],
[
4.61191
,
52.49109
],
[
4.61199
,
52.49108
],
[
4.61224
,
52.49104
],
[
4.6126
,
52.49096
],
[
4.61289
,
52.4909
],
[
4.61303
,
52.49087
],
[
4.61335
,
52.49077
],
[
4.61358
,
52.4907
],
[
4.61369
,
52.49067
],
[
4.61378
,
52.49066
],
[
4.61396
,
52.49064
],
[
4.61427
,
52.49064
],
[
4.61547
,
52.49046
],
[
4.61589
,
52.49043
],
[
4.61613
,
52.49041
],
[
4.61633
,
52.49039
],
[
4.61651
,
52.49039
],
[
4.61671
,
52.49036
],
[
4.61682
,
52.49034
],
[
4.6169
,
52.4903
],
[
4.61695
,
52.49022
],
[
4.617
,
52.49017
],
[
4.61711
,
52.4901
],
[
4.61729
,
52.49002
],
[
4.61746
,
52.48999
],
[
4.61773
,
52.48998
],
[
4.61793
,
52.48997
],
[
4.61802
,
52.48997
],
[
4.61812
,
52.48998
],
[
4.61821
,
52.49001
],
[
4.61839
,
52.4901
],
[
4.61848
,
52.49015
],
[
4.61858
,
52.49018
],
[
4.61875
,
52.49019
],
[
4.61892
,
52.49018
],
[
4.61916
,
52.49015
],
[
4.61928
,
52.49015
],
[
4.6197
,
52.49024
],
[
4.61979
,
52.49024
],
[
4.61988
,
52.49022
],
[
4.62016
,
52.49012
],
[
4.62025
,
52.49007
],
[
4.62031
,
52.49
],
[
4.62043
,
52.4898
],
[
4.6205
,
52.48975
],
[
4.62057
,
52.48974
],
[
4.62081
,
52.48971
],
[
4.62095
,
52.48969
],
[
4.62139
,
52.48962
],
[
4.62159
,
52.48958
],
[
4.62284
,
52.48922
],
[
4.62306
,
52.48918
],
[
4.62334
,
52.48912
],
[
4.62356
,
52.48909
],
[
4.62381
,
52.48909
],
[
4.62393
,
52.48909
],
[
4.62409
,
52.48907
],
[
4.62424
,
52.48904
],
[
4.62436
,
52.48901
],
[
4.62456
,
52.48897
],
[
4.62483
,
52.48896
],
[
4.62501
,
52.48895
],
[
4.62516
,
52.48892
],
[
4.62533
,
52.48888
],
[
4.6256
,
52.48871
],
[
4.62581
,
52.48858
],
[
4.62602
,
52.4885
],
[
4.62646
,
52.48839
],
[
4.62734
,
52.48823
],
[
4.62786
,
52.48816
],
[
4.62838
,
52.48809
],
[
4.62877
,
52.48805
],
[
4.62914
,
52.48803
],
[
4.62937
,
52.48812
],
[
4.62946
,
52.48813
],
[
4.62956
,
52.48811
],
[
4.62969
,
52.4881
],
[
4.62977
,
52.48807
],
[
4.62983
,
52.48801
],
[
4.62993
,
52.48794
],
[
4.63004
,
52.48793
],
[
4.63017
,
52.48791
],
[
4.63043
,
52.4879
],
[
4.63063
,
52.4879
],
[
4.63089
,
52.48792
],
[
4.63119
,
52.48794
],
[
4.6315
,
52.48795
],
[
4.6318
,
52.4879
],
[
4.63289
,
52.48752
],
[
4.63353
,
52.48727
],
[
4.63427
,
52.48702
],
[
4.63418
,
52.48692
],
[
4.6341
,
52.48683
],
[
4.63434
,
52.48676
],
[
4.63507
,
52.48658
],
[
4.63677
,
52.48605
],
[
4.63746
,
52.48583
],
[
4.6377
,
52.48576
],
[
4.63786
,
52.48572
],
[
4.63834
,
52.48558
],
[
4.63866
,
52.48551
],
[
4.6408
,
52.48488
],
[
4.64097
,
52.48483
],
[
4.64109
,
52.4848
],
[
4.64144
,
52.48467
],
[
4.64187
,
52.48454
],
[
4.64217
,
52.4845
],
[
4.64262
,
52.48443
],
[
4.64268
,
52.48442
],
[
4.64296
,
52.48439
],
[
4.64308
,
52.48437
],
[
4.64315
,
52.48435
],
[
4.64341
,
52.48428
],
[
4.64352
,
52.48424
],
[
4.64385
,
52.48408
],
[
4.64395
,
52.484
],
[
4.64406
,
52.48387
],
[
4.6441
,
52.48377
],
[
4.64411
,
52.48372
],
[
4.64408
,
52.48368
],
[
4.64377
,
52.48342
],
[
4.64283
,
52.48304
],
[
4.64278
,
52.48302
],
[
4.64133
,
52.48243
],
[
4.64108
,
52.48232
],
[
4.64073
,
52.48219
],
[
4.64049
,
52.48203
],
[
4.63985
,
52.48143
],
[
4.64001
,
52.48124
],
[
4.64021
,
52.48103
],
[
4.64066
,
52.48063
],
[
4.64101
,
52.48028
],
[
4.64137
,
52.4799
],
[
4.64159
,
52.47979
],
[
4.64204
,
52.47958
],
[
4.64263
,
52.47929
],
[
4.64271
,
52.47925
],
[
4.64314
,
52.47902
],
[
4.64363
,
52.47876
],
[
4.64415
,
52.47848
],
[
4.64411
,
52.47845
],
[
4.64407
,
52.47843
],
[
4.6439
,
52.47832
],
[
4.64387
,
52.47831
],
[
4.64384
,
52.47829
],
[
4.64362
,
52.47815
],
[
4.64335
,
52.478
],
[
4.64327
,
52.47797
],
[
4.64309
,
52.47791
],
[
4.64301
,
52.47788
],
[
4.64293
,
52.47785
],
[
4.64278
,
52.4778
],
[
4.64275
,
52.47779
],
[
4.64261
,
52.47776
],
[
4.64226
,
52.47767
],
[
4.64216
,
52.47764
],
[
4.63852
,
52.47638
],
[
4.6382
,
52.47628
],
[
4.6378
,
52.47619
],
[
4.63768
,
52.47617
],
[
4.63754
,
52.47615
],
[
4.63731
,
52.47612
],
[
4.63707
,
52.47611
],
[
4.63679
,
52.47613
],
[
4.63655
,
52.47613
],
[
4.63633
,
52.47614
],
[
4.6361
,
52.47613
],
[
4.63603
,
52.47608
],
[
4.63596
,
52.47602
],
[
4.63597
,
52.47582
],
[
4.63604
,
52.47568
],
[
4.63618
,
52.47555
],
[
4.63632
,
52.47541
],
[
4.63641
,
52.47533
],
[
4.63643
,
52.47529
],
[
4.63644
,
52.47528
],
[
4.63646
,
52.47524
],
[
4.63647
,
52.47521
],
[
4.63642
,
52.47515
],
[
4.63638
,
52.47508
],
[
4.63636
,
52.47502
],
[
4.63641
,
52.4749
],
[
4.63665
,
52.47464
],
[
4.63702
,
52.47426
],
[
4.63718
,
52.47411
],
[
4.63737
,
52.47398
],
[
4.63779
,
52.47369
],
[
4.63828
,
52.47342
],
[
4.63866
,
52.47319
],
[
4.63891
,
52.47295
],
[
4.63903
,
52.47285
],
[
4.63908
,
52.4728
],
[
4.63927
,
52.47262
],
[
4.63929
,
52.47259
],
[
4.63953
,
52.47238
],
[
4.63961
,
52.47231
],
[
4.63964
,
52.47228
],
[
4.63968
,
52.47225
],
[
4.63962
,
52.47219
],
[
4.6395
,
52.47214
],
[
4.6391
,
52.47199
],
[
4.63883
,
52.47188
],
[
4.6386
,
52.47177
],
[
4.6372
,
52.47101
],
[
4.63659
,
52.47067
],
[
4.63583
,
52.47014
],
[
4.63549
,
52.47017
],
[
4.63529
,
52.47023
],
[
4.63511
,
52.47013
],
[
4.63494
,
52.47004
],
[
4.63477
,
52.46989
],
[
4.63445
,
52.46967
],
[
4.63375
,
52.46908
],
[
4.63331
,
52.46861
],
[
4.63296
,
52.46811
],
[
4.63288
,
52.46799
],
[
4.63288
,
52.46798
],
[
4.63265
,
52.46752
],
[
4.63249
,
52.46698
],
[
4.63248
,
52.46693
],
[
4.63237
,
52.46656
],
[
4.63239
,
52.46615
],
[
4.63255
,
52.466
],
[
4.63262
,
52.46594
],
[
4.63231
,
52.46265
],
[
4.6323
,
52.46252
],
[
4.63239
,
52.46251
],
[
4.63297
,
52.46248
],
[
4.63305
,
52.46247
],
[
4.63312
,
52.46245
],
[
4.63317
,
52.46243
],
[
4.63323
,
52.46239
],
[
4.63327
,
52.46234
],
[
4.63328
,
52.46232
],
[
4.63329
,
52.46229
],
[
4.63335
,
52.4622
],
[
4.63341
,
52.46208
],
[
4.63344
,
52.46203
],
[
4.63347
,
52.46193
],
[
4.63345
,
52.46187
],
[
4.63342
,
52.46182
],
[
4.63338
,
52.46173
],
[
4.63336
,
52.46164
],
[
4.63335
,
52.46155
],
[
4.63335
,
52.46129
],
[
4.63332
,
52.46116
],
[
4.63333
,
52.46102
],
[
4.63364
,
52.46104
],
[
4.63388
,
52.46107
],
[
4.63566
,
52.4614
],
[
4.63635
,
52.4615
],
[
4.63658
,
52.46153
],
[
4.6368
,
52.46156
],
[
4.63724
,
52.46156
],
[
4.63837
,
52.46157
],
[
4.63858
,
52.46157
],
[
4.63872
,
52.46157
],
[
4.63884
,
52.46156
],
[
4.63895
,
52.46153
],
[
4.639
,
52.4615
],
[
4.63902
,
52.46147
],
[
4.63903
,
52.46144
],
[
4.63904
,
52.46142
],
[
4.63903
,
52.46139
],
[
4.63902
,
52.46136
],
[
4.63895
,
52.46123
],
[
4.63901
,
52.46096
],
[
4.63905
,
52.4609
],
[
4.63908
,
52.46086
],
[
4.63913
,
52.46077
],
[
4.63916
,
52.4607
],
[
4.63918
,
52.46065
],
[
4.63918
,
52.46064
],
[
4.6392
,
52.4606
],
[
4.63942
,
52.46014
],
[
4.63957
,
52.45981
],
[
4.63965
,
52.45964
],
[
4.64017
,
52.45858
],
[
4.64004
,
52.45853
],
[
4.63994
,
52.45847
],
[
4.63985
,
52.45839
],
[
4.63977
,
52.4583
],
[
4.63971
,
52.45825
],
[
4.63963
,
52.45823
],
[
4.63958
,
52.45822
],
[
4.63948
,
52.45822
],
[
4.6392
,
52.45823
],
[
4.6391
,
52.45822
],
[
4.63901
,
52.45821
],
[
4.63893
,
52.45819
],
[
4.63887
,
52.45815
],
[
4.63871
,
52.45803
],
[
4.63851
,
52.4579
],
[
4.63837
,
52.45774
],
[
4.63836
,
52.45771
],
[
4.63837
,
52.45742
],
[
4.63838
,
52.45736
],
[
4.63844
,
52.45727
],
[
4.63855
,
52.4572
],
[
4.63865
,
52.45714
],
[
4.63876
,
52.45708
],
[
4.63885
,
52.45704
],
[
4.63894
,
52.45699
],
[
4.63898
,
52.45693
],
[
4.63902
,
52.45685
],
[
4.63906
,
52.45671
],
[
4.63907
,
52.45663
],
[
4.63905
,
52.45656
],
[
4.63899
,
52.45644
],
[
4.63899
,
52.45639
],
[
4.63915
,
52.45595
],
[
4.64024
,
52.45536
],
[
4.64014
,
52.45523
],
[
4.64002
,
52.45501
],
[
4.63998
,
52.45489
],
[
4.63996
,
52.45483
],
[
4.63962
,
52.45386
],
[
4.63937
,
52.45305
],
[
4.63932
,
52.45289
],
[
4.63924
,
52.45266
],
[
4.63915
,
52.45241
],
[
4.63909
,
52.45226
],
[
4.63887
,
52.45165
],
[
4.63869
,
52.45094
],
[
4.63853
,
52.45009
],
[
4.63852
,
52.44999
],
[
4.6385
,
52.44979
],
[
4.63825
,
52.44928
],
[
4.63819
,
52.44929
],
[
4.63813
,
52.44929
],
[
4.63807
,
52.44927
],
[
4.63802
,
52.44925
],
[
4.63796
,
52.44922
],
[
4.63793
,
52.44917
],
[
4.63792
,
52.44913
],
[
4.63792
,
52.44909
],
[
4.63796
,
52.44904
],
[
4.63801
,
52.44901
],
[
4.63807
,
52.44898
],
[
4.63814
,
52.44897
],
[
4.63821
,
52.44897
],
[
4.63827
,
52.44897
],
[
4.63833
,
52.44899
],
[
4.63838
,
52.44902
],
[
4.63841
,
52.44905
],
[
4.63844
,
52.44908
],