use geojson instead of GPX data

aloxe · Jul 14, 2024 · fd40c12 · fd40c12
1 parent cb2047b
commit fd40c12
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 34 deletions.
diff --git a/src/components/MainMap.jsx b/src/components/MainMap.jsx
@@ -29,15 +29,15 @@ const MainMap = ({geojsonList, tileName, handleClickPopup, currentGeoJson}) => {
     if (!geojson)  return null;
     return (
       <GeoJson
-      className={geojson.url === currentGeoJson?.url && "CURRENT"}
+      className={geojson.slug === currentGeoJson?.slug && "CURRENT"}
         key={key}
         data={geojson}
         styleCallback={(feature) => {
           if (feature?.geometry?.type === "Point") {
             // removing display for points.
             return { strokeWidth: "0", stroke: "black", r: '0', };
           }
-        if (geojson.url === currentGeoJson?.url) { // sellected path
+        if (geojson.slug && geojson.slug === currentGeoJson?.slug) { // sellected path
           if (geojson.features.length > 1) { // rainbow colours for multi paths geojson
             return {
               strokeWidth: "4",

diff --git a/src/components/Wrapper.jsx b/src/components/Wrapper.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { getCountryInParams, getYearInParams } from "../helpers/routerUtils";
-import { filterGpxList, getGpxList, getYear, loadGeoJsonFromGpx } from "../helpers/gpxUtil";
+import { filterGeojsonList, getGeoJsonList, getYear, loadFullGeoJsonFromSlug } from "../helpers/gpxUtil";
 import { flagToCountryCode } from "../helpers/countryUtil";
 import SideBar from "./SideBar";
 import MainMap from "./MainMap";
@@ -17,10 +17,9 @@ const Wrapper = ({ isLogged, setIsLogged }) => {
   const country = getCountryInParams(params) || ''
 
   const [step, setStep] = useState(0);
-  const [allGpxList, setAllGpxList] = useState([]);
-  const [gpxList, setGpxList] = useState([]);
+  const [allTrackList, setAllTrackList] = useState([]);
+  const [trackList, setTrackList] = useState([]);
   const [geojsonList, setGeojsonList] = useState([]);
-  const [allGeojsonList, setAllGeojsonList] = useState([]);
   const [currentYear, setCurrentYear] = useState(year);
   const [currentCountry, setCurrentCountry] = useState(country);
   const [currentTile, setCurrentTile] = useState('CartoDBVoyager');
@@ -35,58 +34,53 @@ const Wrapper = ({ isLogged, setIsLogged }) => {
 
   useEffect(() => {
     if (step===1) {
-      // load list of gpx files
-      const getGpxListAwaited = async () => {
-        const gpxList = await getGpxList()
-        gpxList.length && setAllGpxList(gpxList)
+      // load list of all geojson files
+      const getGeojsonListAwaited = async () => {
+        const trackList = await getGeoJsonList()
+        trackList.length && setAllTrackList(trackList)
         setStep(2) // > filter list
       }
-      getGpxListAwaited()
+      getGeojsonListAwaited()
     }
   }, [step]);
 
   useEffect(() => {
     if (step===2) {
-      // filter list of gpx files
-      const gpxListFiltered = filterGpxList(currentYear, currentCountry, allGpxList)
-      if (gpxListFiltered.length) {
+      // filter list of geojson files
+      const trackListFiltered = filterGeojsonList(currentYear, currentCountry, allTrackList)
+      if (trackListFiltered.length) {
         setStep(3) // > load GeoJsonLists to map
-        setGpxList(gpxListFiltered)
+        setTrackList(trackListFiltered)
       } else {
-        setGeojsonList([])
-        setStep(4) // done TOD: set message for empty map
+        setTrackList([])
+        setStep(4) // done TODO: set message for empty map
       }
     }
-  }, [step, currentYear, currentCountry, allGpxList, gpxList, allGeojsonList]);
+  }, [step, currentYear, currentCountry, allTrackList]);
 
   useEffect(() => {
     if (step===3) {
       // load geojson from a list of gpx files
-      const setGeoJsonListAwaited = async (gpxList) => {
+      const setGeoJsonListAwaited = async (trackList) => {
         const geojsonList = []
-        const requests = gpxList.map( async (url, i) => {
-          if (i < gpxList.length) {
-            const geojson = allGeojsonList.find(json => json.url === url) || await loadGeoJsonFromGpx(url)
-            if (!allGeojsonList.find(json => json.url === url)) {
-              geojson["url"] = url;
-              if (url === track) {
-                setCurrentGeoJson(geojson)
-                handleClickPopup("open", geojson)
+        const requests = trackList.map( async (json, i) => {
+          if (i < trackList.length) {
+            const fullGeojson = await loadFullGeoJsonFromSlug(json.slug)
+            if (json.slug === track) {
+                setCurrentGeoJson(fullGeojson)
+                handleClickPopup("open", fullGeojson)
               }
-              allGeojsonList.push(geojson)
-            }
-            geojsonList.push(geojson)
+            geojsonList.push(fullGeojson)
           }
         })
         Promise.all(requests).then(() => {
-          setAllGeojsonList(allGeojsonList)
           setGeojsonList(geojsonList)
           setStep(4) // done
         })
       }
-      setGeoJsonListAwaited(gpxList)
+      setGeoJsonListAwaited(trackList)
     }
-  }, [step, gpxList, allGeojsonList, track]);
+  }, [step, trackList, track, currentGeoJson]);
 
   const handleClickTile = (e) => {
     setCurrentTile(e.target.alt)
@@ -124,7 +118,7 @@ const Wrapper = ({ isLogged, setIsLogged }) => {
       setCurrentGeoJson(null)
     } else {
       setCurrentGeoJson(geoJsonClick)
-      history(`/t/${geoJsonClick.url}`)
+      history(`/t/${geoJsonClick.slug}`)
     }
   }
 

diff --git a/src/helpers/gpxUtil.js b/src/helpers/gpxUtil.js
@@ -21,6 +21,21 @@ export const getGeoJsonList = async () => {
   }
 }
 
+export const filterGeojsonList = (currentYear, currentCountry, allGeojsonList) => {
+  const loadCountry = currentCountry === 'xx' ? '' : currentCountry;
+  const loadYear = currentYear === 'all' ? '' : currentYear;
+  const geojsonList = allGeojsonList.filter(json => {
+    if (!loadCountry) {
+      return json.date.substr(0, 4) === loadYear
+    }
+    if (!loadYear) {
+      return json.countries.includes(loadCountry)
+    }
+    return json.date.substr(0, 4) === loadYear && json.countries.includes(loadCountry)
+  })
+  return geojsonList
+}
+
 export const filterGpxList = (currentYear, currentCountry, allGpxList) => {
   const loadCountry = currentCountry === 'xx' ? '' : currentCountry;
   const loadYear = currentYear === 'all' ? '' : currentYear;
@@ -38,6 +53,17 @@ export const filterGpxList = (currentYear, currentCountry, allGpxList) => {
   return gpxList
 }
 
+export const loadFullGeoJsonFromSlug = async (slug) => {
+  try {
+    const response = await axios.get('https://alix.guillard.fr/data/velo/json/'+slug+'.json');
+
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching gpx data:', error.message);
+    return
+  }
+}
+
 export const loadGeoJsonFromGpx = async (url) => {
   try {
     const response = await axios.get('https://alix.guillard.fr/data/velo/gpx/'+url);