Commit 65ffc402 authored by alain's avatar alain 🐙
Browse files

get routePoints from wp

parent df29f729
......@@ -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>
......
......@@ -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.titleNoNumber}</h1>
<div dangerouslySetInnerHTML={{ __html: modalContent.body}} />
</Modal> }
</>
......
......@@ -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>
......
......@@ -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,9 +15,8 @@
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 {
&:after {
content: "";
position: absolute;
top: 100%;
......@@ -34,11 +28,28 @@
border-top: 5px solid #FFF;
}
.mapboxgl-marker h3 {
margin: 0;
.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;
}
&.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 @@
}
}
This diff is collapsed.
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
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment