Skip to content

GitLab

H
hollandse-luchten-route-app
Commit 2f2a3e31 authored by alain's avatar alain 🐙
Browse files
Options

routedata, point markup/styling, etc

parent 65ffc402
Hide whitespace changes
Inline Side-by-side
Showing with 184 additions and 52 deletions
src/App.js
View file @ 2f2a3e31
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useRef } from 'react';
import ReactMapGL, { Marker, Source, Layer, FlyToInterpolator } from 'react-map-gl';
import WebMercatorViewport from '@math.gl/web-mercator';
import { mapStyle } from "./mapStyle"
import { mapControlSettings, initialViewport } from "./mapSettings"
import { mapControlSettings, mapDefaults } from "./mapSettings"
import MapControls from './MapControls'
import MapLocations from "./MapLocations"
import Modal from './Modal'
import { routeData } from './routeData'
//import { routePoints } from './routePoints'
import { routeStyle } from './routeStyle'
const getZoomClass = (zoomLevel) => {
let className = ""
switch (true) {
case (zoomLevel < 9): className = "very-low"; break;
case (zoomLevel < 11.5): className = "low"; break;
case (zoomLevel < 12.5): className = "medium"; break;
default: className = "high"; break;
}
return className
}
function App() {
const [viewport, setViewport] = useState(initialViewport);
const [viewport, _setViewport] = useState({
...mapDefaults.viewport,
width: Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0),
height: Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
});
const [modalContent, setModalContent] = useState(null);
const [selectedCenter, setSelectedCenter] = useState(null);
const [routePoints, setRoutePoints] = useState(null);
const viewportRef = useRef(viewport);
const setViewport = newViewport => {
viewportRef.current = newViewport;
_setViewport(newViewport);
};
useEffect(() => {
changeViewportBounds(null, mapDefaults.bounds)
loadData();
window.addEventListener('resize', handleResize)
}, [])
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()
......@@ -47,20 +74,30 @@ function App() {
longitude: long,
bounds: [[long-boundsSize, lat-boundsSize], [long+boundsSize, lat+boundsSize]]
}
})
}).sort((a, b) => {return b.latitude - a.latitude});
setRoutePoints(points)
//console.log(points)
console.log(points)
setRoutePoints(points)
const point = window.location.hash ? data[window.location.hash.replace('#', '')] : points[0]
const point = window.location.hash ? data[window.location.hash.replace('#', '')] : points.find(point => point.number === null)
if(point) {
setModalContent(point)
changeViewportBounds(null, point.bounds)
}
}
const handleResize = () => {
setViewport({
...viewportRef.current,
width: Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0),
height: Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
})
}
const changeViewport = (event, change) => {
event.stopPropagation()
if(event) event.stopPropagation()
setViewport({...viewport, ...change })
}
......@@ -81,32 +118,13 @@ function App() {
setSelectedCenter([longitude, latitude])
}
// const changeViewportCenter = (event, center, zoom) => {
// if(event) event.stopPropagation()
// const { viewport } = this.state
// const change = {
// longitude: center[0],
// latitude: center[1],
// zoom,
// transitionDuration: 500,
// transitionInterpolator: new FlyToInterpolator()
// }
// this.setState({
// viewport: {...viewport, ...change },
// selectedCenter: center,
// })
// }
const closeModal = (e) => {
setModalContent(null)
}
return (
<>
<ReactMapGL width="100%" height="100%" {...viewport} onViewportChange={viewport => setViewport(viewport)} mapStyle={mapStyle}>
<ReactMapGL {...viewport} onViewportChange={newViewport => setViewport(newViewport)} mapStyle={mapStyle}>
<MapControls mapControlSettings={mapControlSettings} viewport={viewport} changeViewport={changeViewport} />
<div className='mapboxgl-ctrl-top-left'>
......@@ -118,19 +136,23 @@ function App() {
</Source>
{ 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>
<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>
<h4 className="marker-subtitle">{ point.subtitle }</h4>
</div>
</Marker>
)) }
</ReactMapGL>
{ modalContent && <Modal closeModal={closeModal}>
<h1>{modalContent.titleNoNumber}</h1>
<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> }
</div>
{ modalContent.subtitle && <h2>{modalContent.subtitle}</h2> }
<div 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/css/index.scss
View file @ 2f2a3e31
......@@ -15,6 +15,7 @@
padding: 0.2em 0.4em;
white-space: nowrap;
box-shadow: 0 0 0.4rem 0.1rem rgba(0, 0, 0, 0.15);
cursor: pointer !important;
&:after {
content: "";
......@@ -29,27 +30,31 @@
}
.marker-title {
margin: 0.4em 0 0 0;
margin: 0.2em 0 0 0;
font-size: 0.9rem;
}
&.zoom-low .marker-title-title {
display: none;
.marker-title-number {
width: 0.9rem;
text-align: center;
}
.marker-title-title {
margin-left: 0.4rem;
}
.marker-subtitle {
font-weight: 400;
margin: 0.25em 0 0 0;
margin: 0.1em 0 0 1.2rem;
display: none;
font-size: 0.9rem;
}
&.zoom-high h4 {
display: block;
}
&.zoom-very-low { display: none; }
&.zoom-low .marker-title-title { display: none; }
&.zoom-high .marker-subtitle { display: block; }
}
.map-crtl-group {
margin: 10px;
}
......
src/mapSettings.js
View file @ 2f2a3e31
......@@ -8,9 +8,13 @@ export const mapControlSettings = {
bearingStep: 10
}
export const initialViewport = {
latitude: 52.470253,
longitude: 4.600650,
zoom: 12.8,
pitch: 0
export const mapDefaults = {
bounds: [
[4.5, 52.6],
[5, 52.3]
],
viewport: {
pitch: 45,
bearing: 0
}
}
\ No newline at end of file
src/routeData.js
View file @ 2f2a3e31
......@@ -9,14 +9,99 @@ export const routeData = {
"type": "LineString",
"coordinates": [
[4.655064, 52.478396],
[4.655221, 52.478513],
[4.655081, 52.478723],
[4.654185, 52.47952],
[4.655178, 52.480631],
[4.65403, 52.481388],
[4.654461, 52.482185],
[4.655811, 52.485132],
[4.659448, 52.49339],
[4.660907, 52.493494],
[4.66242, 52.494357],
[4.663332, 52.494579],
[4.664581, 52.495271],
[4.663911, 52.495702],
[4.663664, 52.496199],
[4.663385, 52.496411],
[4.663448, 52.496514],
[4.663294, 52.496473],
[4.663171, 52.496565],
[4.663181, 52.496813],
[4.662881, 52.497054],
[4.6628, 52.497165],
[4.662548, 52.49712],
[4.662146, 52.496904],
[4.661958, 52.496855],
[4.661728, 52.496855],
[4.661583, 52.496881],
[4.661352, 52.496878],
[4.658922, 52.496404],
[4.658348, 52.496316],
[4.65808, 52.496287],
[4.656739, 52.49599],
[4.656374, 52.495885],
[4.655548, 52.495565],
[4.655371, 52.495294],
[4.655097, 52.495082],
[4.65418, 52.494579],
[4.653032, 52.493828],
[4.652946, 52.493736],
[4.651546, 52.492841],
[4.650393, 52.492061],
[4.649094, 52.491241],
[4.64873, 52.490947],
[4.648751, 52.490849],
[4.64874, 52.490783],
[4.648574, 52.490689],
[4.648429, 52.490672],
[4.648317, 52.490679],
[4.647099, 52.489967],
[4.646916, 52.489843],
[4.646772, 52.489719],
[4.645876, 52.489209],
[4.643816, 52.487981],
[4.643129, 52.487595],
[4.642721, 52.48719],
[4.642614, 52.486517],
[4.642593, 52.485439],
[4.642689, 52.484949],
[4.642716, 52.484616],
[4.642121, 52.484662],
[4.641557, 52.484802],
[4.639739, 52.485358],
[4.637759, 52.485933],
[4.636998, 52.486145],
[4.636622, 52.486328],
[4.634525, 52.486952],
[4.633028, 52.487468],
[4.631799, 52.487899],
[4.631531, 52.487945],
[4.63071, 52.487912],
[4.629927, 52.487919],
[4.629766, 52.488066],
[4.629605, 52.488105],
[4.629369, 52.488128],
[4.629128, 52.488027],
[4.627846, 52.48817],
[4.627283, 52.488242],
[4.626049, 52.48849],
[4.625829, 52.488575],
[4.625335, 52.488882],
[4.619955, 52.490222],
[4.619703, 52.490287],
[4.61951, 52.490258],
[4.619295, 52.490248],
[4.619145, 52.490196],
[4.618801, 52.490231],
[4.618201, 52.490166],
[4.616956, 52.490359],
[4.613748, 52.490695],
[4.602034, 52.493826],
[4.591251, 52.490354],
[4.628528, 52.474441],
[4.637773, 52.450515],
[4.562839, 52.456153],
[4.602963, 52.460026],
[4.562839, 52.456153]
]
}
}]
......
src/routeStyle.js
View file @ 2f2a3e31
export const routeStyle = {
paint: {
'line-color': '#2FB6BC',
'line-width': 6
"line-width": {
"base": 1.4,
"stops": [
[
5.8,
0
],
[
6,
1
],
[
20,
30
]
]
}
}
}
\ 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