From 13a426a929848415eba1e4cad3df9ef904e40054 Mon Sep 17 00:00:00 2001 From: aloxe Date: Sun, 30 Jun 2024 23:44:00 +0200 Subject: [PATCH 1/4] tracklist from json dir --- public/datavelo/tracklist.json.php | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/public/datavelo/tracklist.json.php b/public/datavelo/tracklist.json.php index 6ec7ef5..323fb8f 100644 --- a/public/datavelo/tracklist.json.php +++ b/public/datavelo/tracklist.json.php @@ -1,10 +1,10 @@ ".$lettred.$lettref; + $flag = $flag." ".$lettred.$lettref; } $trackobject = (object) ['id' => $i, 'date' => $date, 'name' => $name, 'url' => $val, 'cc' => $cc, 'flag' => $flag]; array_push($trackliste, $trackobject); From 9f1b85d5b9e38f2df39ad22b3e367eee33466858 Mon Sep 17 00:00:00 2001 From: aloxe Date: Sun, 30 Jun 2024 23:44:25 +0200 Subject: [PATCH 2/4] new json list of traces --- public/datavelo/velotraces.json.php | 30 +++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 public/datavelo/velotraces.json.php diff --git a/public/datavelo/velotraces.json.php b/public/datavelo/velotraces.json.php new file mode 100644 index 0000000..742b060 --- /dev/null +++ b/public/datavelo/velotraces.json.php @@ -0,0 +1,30 @@ +slug)) { + $date = $geojson->date; + $title = $geojson->title; + $slug = $geojson->slug; + $countries = $geojson->countries; + array_push($tracks,[ + 'date' => $geojson->date, + 'title' => $geojson->title, + 'slug' => $geojson->slug, + 'countries' => $geojson->countries, + ]); + } +} +closedir($dir); +// asort($tracks); +echo json_encode($tracks); +?> From cb2047b953cb00856225bcd4148243784f25109c Mon Sep 17 00:00:00 2001 From: aloxe Date: Mon, 1 Jul 2024 08:51:07 +0200 Subject: [PATCH 3/4] prepare functions to load directly json typofix --- public/datavelo/velotraces.json.php | 2 +- src/helpers/gpxUtil.js | 21 +++++++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/public/datavelo/velotraces.json.php b/public/datavelo/velotraces.json.php index 742b060..e98ac1e 100644 --- a/public/datavelo/velotraces.json.php +++ b/public/datavelo/velotraces.json.php @@ -26,5 +26,5 @@ } closedir($dir); // asort($tracks); -echo json_encode($tracks); +echo json_encode($tracks); //, JSON_PRETTY_PRINT); ?> diff --git a/src/helpers/gpxUtil.js b/src/helpers/gpxUtil.js index d844c7a..9565399 100644 --- a/src/helpers/gpxUtil.js +++ b/src/helpers/gpxUtil.js @@ -11,6 +11,16 @@ export const getGpxList = async () => { } } +export const getGeoJsonList = async () => { + try { + const response = await axios.get('https://alix.guillard.fr/data/velo/velotraces.json.php'); + return response.data + } catch (error) { + console.error('oups Error fetching data:', error.message); + return([]) + } +} + export const filterGpxList = (currentYear, currentCountry, allGpxList) => { const loadCountry = currentCountry === 'xx' ? '' : currentCountry; const loadYear = currentYear === 'all' ? '' : currentYear; @@ -54,6 +64,17 @@ export const loadGeoJsonFromGpx = async (url) => { } } +export const loadGeoJsonFromSlug = async (slug) => { + try { + const response = await axios.get(`https://alix.guillard.fr/data/velo/json/${slug}`); + const geojson = response.data + return geojson; + } catch (error) { + console.error('Error fetching geojson data:', error.message); + return + } +} + export const uploadJson = async (geodata) => { console.log("upload", geodata); const body = JSON.stringify(geodata) From fd40c1205b79c774f895f95a3116372d07544e0c Mon Sep 17 00:00:00 2001 From: aloxe Date: Sun, 14 Jul 2024 08:58:30 +0200 Subject: [PATCH 4/4] use geojson instead of GPX data --- src/components/MainMap.jsx | 4 +-- src/components/Wrapper.jsx | 58 +++++++++++++++++--------------------- src/helpers/gpxUtil.js | 26 +++++++++++++++++ 3 files changed, 54 insertions(+), 34 deletions(-) diff --git a/src/components/MainMap.jsx b/src/components/MainMap.jsx index 13c41d6..5c0b687 100644 --- a/src/components/MainMap.jsx +++ b/src/components/MainMap.jsx @@ -29,7 +29,7 @@ const MainMap = ({geojsonList, tileName, handleClickPopup, currentGeoJson}) => { if (!geojson) return null; return ( { @@ -37,7 +37,7 @@ const MainMap = ({geojsonList, tileName, handleClickPopup, currentGeoJson}) => { // 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 index 26a827f..d392afc 100644 --- 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 index 9565399..373a2be 100644 --- 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);