Skip to content

GitLab

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

get routePoints from wp

parent df29f729
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.titleNoNumber}</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],
[4.63845, 52.44913],
[4.63843, 52.44918],