Skip to content

GitLab

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

i's under the dots

parent 2f2a3e31
Hide whitespace changes
Inline Side-by-side
Showing with 353 additions and 45 deletions
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 === titleToUse) classNames.push("selected")
if (sub) classNames.push("sub")
return (
<li key={title} className={ classNames.join(" ") } onClick={(event) => {
<li key={titleToUse} 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]
]
}
......
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