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
Expand all
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
This diff is collapsed.
Click to expand it.
src/routePoints.js
deleted
100644 → 0
View file @
df29f729
export
const
routePoints
=
[
{
bounds
:
[
[
4.559927
,
52.446646
],
[
4.678802
,
52.50128
]
],
title
:
"
De route van Hollandse Luchten
"
,
body
:
"
<p>Intro</p>
"
},
{
latitude
:
52.493990
,
longitude
:
4.602379
,
bounds
:
[
[
4.599581
,
52.492737
],
[
4.605042
,
52.495317
]
],
title
:
"
1. Meetstation De Banjaert
"
,
body
:
'
<p>Lorem ipsum dolor sit</p><div class="embed"><iframe src="https://player.vimeo.com/video/331403502?color=2FB6BC&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div>
'
},
{
latitude
:
52.49084
,
longitude
:
4.595811
,
bounds
:
[
[
4.559927
,
52.446646
],
[
4.678802
,
52.50128
]
],
title
:
"
2. Sensorkit 42
"
,
body
:
"
<p>Lorem ipsum dolor sit</p>
"
},
{
latitude
:
52.4914211
,
longitude
:
4.5842066
,
bounds
:
[
[
4.559927
,
52.446646
],
[
4.678802
,
52.50128
]
],
title
:
"
3. Sun Sea
"
,
body
:
"
<p>Lorem ipsum dolor sit</p>
"
},
{
latitude
:
52.4560805
,
longitude
:
4.5609271
,
bounds
:
[
[
4.559927
,
52.446646
],
[
4.678802
,
52.50128
]
],
title
:
"
4. Brak IJmuiden
"
,
body
:
"
<p>Lorem ipsum dolor sit</p>
"
}
]
\ No newline at end of file
Write
Preview
Supports
Markdown
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