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
b783da93
Commit
b783da93
authored
Sep 15, 2020
by
alain
🐙
Browse files
i's under the dots
parent
2f2a3e31
Changes
5
Hide whitespace changes
Inline
Side-by-side
src/App.js
View file @
b783da93
...
...
@@ -74,13 +74,13 @@ function App() {
longitude
:
long
,
bounds
:
[[
long
-
boundsSize
,
lat
-
boundsSize
],
[
long
+
boundsSize
,
lat
+
boundsSize
]]
}
}).
sort
((
a
,
b
)
=>
{
return
b
.
latitude
-
a
.
latitude
});
});
//console.log(points)
setRoutePoints
(
points
)
const
point
=
window
.
location
.
hash
?
data
[
window
.
location
.
hash
.
replace
(
'
#
'
,
''
)]
:
points
.
find
(
point
=>
point
.
number
===
null
)
const
point
=
window
.
location
.
hash
?
points
[
window
.
location
.
hash
.
replace
(
'
#
'
,
''
)]
:
points
[
0
]
//
.find(point => point.number === null)
if
(
point
)
{
setModalContent
(
point
)
changeViewportBounds
(
null
,
point
.
bounds
)
...
...
@@ -128,14 +128,14 @@ function App() {
<
MapControls
mapControlSettings
=
{
mapControlSettings
}
viewport
=
{
viewport
}
changeViewport
=
{
changeViewport
}
/
>
<
div
className
=
'
mapboxgl-ctrl-top-left
'
>
{
routePoints
&&
<
MapLocations
mapLocations
=
{
routePoints
}
changeViewportBounds
=
{
changeViewportBounds
}
selectedCenter
=
{
selectedCenter
}
/>
}
{
routePoints
&&
<
MapLocations
mapLocations
=
{
routePoints
}
changeViewportBounds
=
{
changeViewportBounds
}
selectedCenter
=
{
selectedCenter
}
setModalContent
=
{
setModalContent
}
/>
}
<
/div
>
<
Source
type
=
"
geojson
"
data
=
{
routeData
}
>
<
Layer
id
=
"
route
"
type
=
"
line
"
{...
routeStyle
}
/
>
<
/Source
>
{
routePoints
&&
routePoints
.
filter
(
point
=>
point
.
number
).
map
(
point
=>
(
{
routePoints
&&
routePoints
.
filter
(
point
=>
point
.
number
).
sort
((
a
,
b
)
=>
{
return
b
.
latitude
-
a
.
latitude
}).
map
(
point
=>
(
<
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
>
...
...
@@ -146,12 +146,12 @@ function App() {
<
/ReactMapGL
>
{
modalContent
&&
<
Modal
closeModal
=
{
closeModal
}
>
<
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>
}
{
modalContent
.
title
&&
<
h4
style
=
{{
fontWeight
:
"
400
"
,
margin
:
"
0.5em 0 0.75em 0
"
}}
>
{
modalContent
.
title
}
<
/h4>
}
<
div
style
=
{{
display
:
"
flex
"
,
justifyContent
:
"
flex-start
"
,
alignItems
:
"
center
"
}}
>
{
modalContent
.
number
===
null
&&
<
img
src
=
"
https://hollandseluchten.waag.org/hl-route/route-logo.png
"
style
=
{{
width
:
"
3rem
"
,
height
:
"
3rem
"
,
marginRight
:
"
1rem
"
}}
/>
}
{
modalContent
.
subtitle
&&
<
h2
>
{
modalContent
.
subtitle
}
<
/h2>
}
<
/div
>
{
modalContent
.
subtitle
&&
<
h2
>
{
modalContent
.
subtitle
}
<
/h2>
}
<
div
dangerouslySetInnerHTML
=
{{
__html
:
modalContent
.
body
}}
/
>
<
div
style
=
{{
marginTop
:
"
3rem
"
}}
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/MapLocations.js
View file @
b783da93
import
React
from
'
react
'
//import { connect } from 'react-redux'
//import { setPanelStatus } from "../actions"
import
IconArrowDown
from
"
./IconArrowDown
"
class
MapLocations
extends
React
.
Component
{
...
...
@@ -33,43 +30,28 @@ class MapLocations extends React.Component {
return
null
}
addListOptions
=
(
locations
,
sub
,
options
=
[])
=>
{
for
(
let
i
=
0
;
i
<
locations
.
length
;
i
++
)
{
options
.
push
({
title
:
locations
[
i
].
title
,
bounds
:
locations
[
i
].
bounds
,
sub
:
sub
})
if
(
locations
[
i
].
sublocations
)
{
this
.
addListOptions
(
locations
[
i
].
sublocations
,
true
,
options
)
}
}
return
options
}
render
()
{
const
{
mapLocations
,
changeViewportBounds
}
=
this
.
props
const
{
open
,
current
}
=
this
.
state
const
mapLocationsFlat
=
this
.
addListOptions
(
mapLocations
,
false
)
const
listOptions
=
mapLocations
.
map
(
location
=>
{
const
{
title
,
subtitle
,
bounds
,
sub
}
=
location
const
listOptions
=
mapLocationsFlat
.
map
(
location
=>
{
const
{
title
,
bounds
,
sub
}
=
location
const
titleToUse
=
title
?
title
:
subtitle
const
classNames
=
[]
if
(
current
===
title
)
classNames
.
push
(
"
selected
"
)
if
(
current
===
title
ToUse
)
classNames
.
push
(
"
selected
"
)
if
(
sub
)
classNames
.
push
(
"
sub
"
)
return
(
<
li
key
=
{
title
}
className
=
{
classNames
.
join
(
"
"
)
}
onClick
=
{(
event
)
=>
{
<
li
key
=
{
title
ToUse
}
className
=
{
classNames
.
join
(
"
"
)
}
onClick
=
{(
event
)
=>
{
changeViewportBounds
(
event
,
bounds
)
this
.
setState
({
current
:
title
,
open
:
false
}
)
if
(
location
.
number
===
null
)
this
.
props
.
setModalContent
(
location
)
}}
>
{
title
}
<
/li
>
this
.
setState
({
current
:
titleToUse
,
open
:
false
})
}}
>
{
titleToUse
}
<
/li
>
)
})
...
...
src/css/_modal.scss
View file @
b783da93
...
...
@@ -66,4 +66,28 @@
.description
{
margin-bottom
:
32px
;
}
table
{
width
:
calc
(
100%
+
40px
)
!
important
;
margin
:
2rem
-20px
;
td
{
vertical-align
:
top
;
background-color
:
#eee
;
padding
:
1rem
;
h4
{
margin-bottom
:
0
;
font-size
:
0
.85rem
;
}
p
{
font-size
:
0
.85rem
;
}
&
:last-child
{
padding-left
:
0
;
}
}
}
}
\ No newline at end of file
src/css/index.scss
View file @
b783da93
...
...
@@ -63,17 +63,18 @@
user-select
:
none
;
}
@media
(
max-width
:
700px
)
{
.mapboxgl-ctrl-top-right
{
top
:
50%
;
transform
:
translateY
(
-50%
);
}
}
//
@media (max-width: 700px) {
//
.mapboxgl-ctrl-top-right {
//
top: 50%;
//
transform: translateY(-50%);
//
}
//
}
.mapboxgl-ctrl-group
{
background-color
:
transparent
;
box-shadow
:
none
;
border-radius
:
0
;
margin
:
0
;
}
.mapboxgl-ctrl-group
button
{
...
...
src/routeData.js
View file @
b783da93
...
...
@@ -88,6 +88,21 @@ export const routeData = {
[
4.626049
,
52.48849
],
[
4.625829
,
52.488575
],
[
4.625335
,
52.488882
],
[
4.624498
,
52.489042
],
[
4.623844
,
52.489124
],
[
4.623587
,
52.489111
],
[
4.622825
,
52.489252
],
[
4.622288
,
52.489399
],
[
4.621773
,
52.489549
],
[
4.621596
,
52.489621
],
[
4.621425
,
52.489634
],
[
4.621285
,
52.489693
],
[
4.621114
,
52.489732
],
[
4.620963
,
52.489712
],
[
4.620636
,
52.489777
],
[
4.620443
,
52.489918
],
[
4.620427
,
52.489993
],
[
4.620255
,
52.490169
],
[
4.619955
,
52.490222
],
[
4.619703
,
52.490287
],
[
4.61951
,
52.490258
],
...
...
@@ -95,12 +110,298 @@ export const routeData = {
[
4.619145
,
52.490196
],
[
4.618801
,
52.490231
],
[
4.618201
,
52.490166
],
[
4.617943
,
52.490042
],
[
4.617541
,
52.490029
],
[
4.617358
,
52.490065
],
[
4.61709
,
52.490205
],
[
4.616956
,
52.490359
],
[
4.61657
,
52.490431
],
[
4.616264
,
52.490437
],
[
4.615379
,
52.490509
],
[
4.614547
,
52.490633
],
[
4.613748
,
52.490695
],
[
4.602034
,
52.493826
],
[
4.611908
,
52.49111
],
[
4.611425
,
52.491051
],
[
4.610192
,
52.490783
],
[
4.609601
,
52.490744
],
[
4.607606
,
52.491006
],
[
4.606072
,
52.49128
],
[
4.605331
,
52.491633
],
[
4.604999
,
52.491714
],
[
4.604511
,
52.491972
],
[
4.604135
,
52.492097
],
[
4.604167
,
52.492237
],
[
4.604017
,
52.492962
],
[
4.601684
,
52.493328
],
[
4.601576
,
52.493592
],
[
4.601576
,
52.493681
],
[
4.602059
,
52.493782
],
[
4.602043
,
52.493984
],
[
4.602156
,
52.49401
],
[
4.602408
,
52.493968
],
[
4.602145
,
52.494056
],
[
4.601979
,
52.494001
],
[
4.601984
,
52.493801
],
[
4.601528
,
52.493717
],
[
4.601335
,
52.493991
],
[
4.597805
,
52.494291
],
[
4.597564
,
52.493485
],
[
4.596781
,
52.49353
],
[
4.596593
,
52.493583
],
[
4.594865
,
52.493612
],
[
4.594463
,
52.493641
],
[
4.594318
,
52.493684
],
[
4.593739
,
52.493142
],
[
4.59317
,
52.49256
],
[
4.592806
,
52.492368
],
[
4.592527
,
52.492374
],
[
4.592527
,
52.491884
],
[
4.592478
,
52.491698
],
[
4.592253
,
52.491335
],
[
4.591942
,
52.490989
],
[
4.591373
,
52.490708
],
[
4.591251
,
52.490354
],
[
4.628528
,
52.474441
],
[
4.637773
,
52.450515
],
[
4.591464
,
52.490689
],
[
4.592006
,
52.490963
],
[
4.592333
,
52.491316
],
[
4.592575
,
52.491747
],
[
4.595826
,
52.491251
],
[
4.599929
,
52.491767
],
[
4.600182
,
52.491803
],
[
4.600498
,
52.491907
],
[
4.600922
,
52.49211
],
[
4.601474
,
52.492364
],
[
4.601544
,
52.492417
],
[
4.60274
,
52.492152
],
[
4.603459
,
52.491767
],
[
4.604403
,
52.491394
],
[
4.604677
,
52.491335
],
[
4.606683
,
52.491051
],
[
4.608035
,
52.490777
],
[
4.6087
,
52.49062
],
[
4.609033
,
52.490594
],
[
4.610567
,
52.490411
],
[
4.611179
,
52.490294
],
[
4.614902
,
52.489399
],
[
4.615041
,
52.489314
],
[
4.615363
,
52.489261
],
[
4.615583
,
52.489245
],
[
4.616886
,
52.488931
],
[
4.617407
,
52.488739
],
[
4.618608
,
52.488592
],
[
4.619343
,
52.488546
],
[
4.621537
,
52.488281
],
[
4.622658
,
52.488223
],
[
4.626027
,
52.488216
],
[
4.628935
,
52.487857
],
[
4.629101
,
52.487801
],
[
4.629225
,
52.487667
],
[
4.629573
,
52.487618
],
[
4.62974
,
52.48768
],
[
4.629858
,
52.4877
],
[
4.630147
,
52.48768
],
[
4.631177
,
52.48753
],
[
4.633666
,
52.486975
],
[
4.636788
,
52.486054
],
[
4.63843
,
52.48555
],
[
4.638698
,
52.485511
],
[
4.640801
,
52.484884
],
[
4.641863
,
52.484544
],
[
4.643065
,
52.484371
],
[
4.643397
,
52.48429
],
[
4.643859
,
52.484087
],
[
4.643966
,
52.483992
],
[
4.644068
,
52.483871
],
[
4.644116
,
52.483708
],
[
4.644014
,
52.483597
],
[
4.643859
,
52.483496
],
[
4.642775
,
52.483055
],
[
4.641337
,
52.482427
],
[
4.640479
,
52.482058
],
[
4.639846
,
52.481437
],
[
4.640007
,
52.481228
],
[
4.640704
,
52.480578
],
[
4.641364
,
52.479905
],
[
4.642641
,
52.479288
],
[
4.644159
,
52.478474
],
[
4.643349
,
52.478
],
[
4.642764
,
52.477791
],
[
4.64256
,
52.477759
],
[
4.642142
,
52.477635
],
[
4.638194
,
52.476279
],
[
4.637561
,
52.476148
],
[
4.63711
,
52.476112
],
[
4.636322
,
52.476145
],
[
4.635962
,
52.476118
],
[
4.635968
,
52.475811
],
[
4.636053
,
52.475677
],
[
4.636166
,
52.475553
],
[
4.635903
,
52.475458
],
[
4.635667
,
52.475367
],
[
4.63526
,
52.47524
],
[
4.631998
,
52.474815
],
[
4.62894
,
52.474419
],
[
4.628602
,
52.474367
],
[
4.628329
,
52.474263
],
[
4.627862
,
52.474125
],
[
4.627647
,
52.473985
],
[
4.627159
,
52.473864
],
[
4.62599
,
52.4737
],
[
4.62607
,
52.473485
],
[
4.62607
,
52.47341
],
[
4.625952
,
52.473289
],
[
4.626006
,
52.472606
],
[
4.626006
,
52.471766
],
[
4.62599
,
52.471126
],
[
4.626102
,
52.470835
],
[
4.626119
,
52.470645
],
[
4.62644
,
52.470472
],
[
4.627293
,
52.470279
],
[
4.62813
,
52.470142
],
[
4.628838
,
52.47007
],
[
4.629439
,
52.470047
],
[
4.63004
,
52.470067
],
[
4.634519
,
52.470429
],
[
4.634734
,
52.470423
],
[
4.634911
,
52.470394
],
[
4.635308
,
52.470224
],
[
4.635115
,
52.470129
],
[
4.634932
,
52.470031
],
[
4.634739
,
52.469858
],
[
4.634455
,
52.469675
],
[
4.633752
,
52.46908
],
[
4.633301
,
52.468606
],
[
4.632899
,
52.468008
],
[
4.632647
,
52.467528
],
[
4.632379
,
52.466573
],
[
4.632395
,
52.466142
],
[
4.632615
,
52.465943
],
[
4.632304
,
52.462638
],
[
4.633269
,
52.462347
],
[
4.633446
,
52.462024
],
[
4.633468
,
52.461936
],
[
4.633355
,
52.461651
],
[
4.63335
,
52.461279
],
[
4.633323
,
52.461154
],
[
4.633473
,
52.459092
],
[
4.633527
,
52.457974
],
[
4.633672
,
52.456487
],
[
4.635018
,
52.456457
],
[
4.637786
,
52.45633
],
[
4.638923
,
52.455983
],
[
4.640259
,
52.455418
],
[
4.639031
,
52.452263
],
[
4.638521
,
52.449997
],
[
4.63792
,
52.450069
],
[
4.63792
,
52.450471
],
[
4.637845
,
52.450046
],
[
4.638521
,
52.449952
],
[
4.63828
,
52.449334
],
[
4.638033
,
52.449344
],
[
4.637765
,
52.449435
],
[
4.636606
,
52.450007
],
[
4.634798
,
52.450932
],
[
4.634219
,
52.451181
],
[
4.63394
,
52.451194
],
[
4.633757
,
52.451233
],
[
4.633623
,
52.451325
],
[
4.633328
,
52.451341
],
[
4.633226
,
52.451308
],
[
4.633135
,
52.451217
],
[
4.632974
,
52.451171
],
[
4.63255
,
52.451165
],
[
4.632003
,
52.451155
],
[
4.631735
,
52.45123
],
[
4.630555
,
52.451822
],
[
4.630212
,
52.452034
],
[
4.629852
,
52.452328
],
[
4.629536
,
52.452531
],
[
4.629064
,
52.452734
],
[
4.628356
,
52.452891
],
[
4.627787
,
52.452963
],
[
4.62636
,
52.453276
],
[
4.624617
,
52.453672
],
[
4.622911
,
52.454035
],
[
4.622744
,
52.45412
],
[
4.621988
,
52.454306
],
[
4.621681
,
52.454307
],
[
4.620451
,
52.454578
],
[
4.619665
,
52.454748
],
[
4.618512
,
52.455094
],
[
4.617788
,
52.455176
],
[
4.616924
,
52.455114
],
[
4.616463
,
52.455065
],
[
4.615932
,
52.45498
],
[
4.615588
,
52.454885
],
[
4.615256
,
52.45477
],
[
4.613957
,
52.454189
],
[
4.611999
,
52.453852
],
[
4.611152
,
52.45359
],
[
4.610562
,
52.453463
],
[
4.609559
,
52.453306
],
[
4.609188
,
52.453175
],
[
4.608936
,
52.453476
],
[
4.608759
,
52.453862
],
[
4.607719
,
52.455058
],
[
4.60686
,
52.456039
],
[
4.606238
,
52.456761
],
[
4.605975
,
52.456722
],
[
4.605771
,
52.456787
],
[
4.60568
,
52.456915
],
[
4.604881
,
52.45663
],
[
4.604119
,
52.456421
],
[
4.601759
,
52.455689
],
[
4.60133
,
52.455444
],
[
4.599844
,
52.453989
],
[
4.598985
,
52.453126
],
[
4.598138
,
52.452325
],
[
4.595944
,
52.453146
],
[
4.594522
,
52.453711
],
[
4.594485
,
52.453813
],
[
4.594329
,
52.453914
],
[
4.594168
,
52.453921
],
[
4.594002
,
52.453914
],
[
4.593562
,
52.454022
],
[
4.592875
,
52.454296
],
[
4.59199
,
52.454643
],
[
4.591969
,
52.454872
],
[
4.591797
,
52.455039
],
[
4.591244
,
52.454859
],
[
4.590756
,
52.454787
],
[
4.590043
,
52.454793
],
[
4.589286
,
52.454806
],
[
4.583777
,
52.454937
],
[
4.582892
,
52.454976
],
[
4.582082
,
52.455003
],
[
4.58169
,
52.455016
],
[
4.581288
,
52.454996
],
[
4.580719
,
52.454954
],
[
4.580167
,
52.454927
],
[
4.57969
,
52.454954
],
[
4.57918
,
52.455016
],
[
4.577522
,
52.455055
],
[
4.57477
,
52.455091
],
[
4.574309
,
52.45531
],
[
4.573606
,
52.455699
],
[
4.573338
,
52.455807
],
[
4.573102
,
52.455862
],
[
4.572861
,
52.455885
],
[
4.572249
,
52.455826
],
[
4.572083
,
52.455833
],
[
4.571933
,
52.455888
],
[
4.571562
,
52.456268
],
[
4.571262
,
52.456585
],
[
4.570924
,
52.456804
],
[
4.570709
,
52.456885
],
[
4.569937
,
52.457095
],
[
4.569701
,
52.457248
],
[
4.569513
,
52.457301
],
[
4.569331
,
52.457333
],
[
4.569154
,
52.457323
],
[
4.568821
,
52.457422
],
[
4.567577
,
52.457752
],
[
4.566745
,
52.457843
],
[
4.562765
,
52.457134
],
[
4.562839
,
52.456153
]
]
}
...
...
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