get routePoints from wp

public/index.html

@@ -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

@@ -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

@@ -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

@@ -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/routePoints.js

-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