Added ability to parse the GPX data using xml parser

Author: cweidner3

src/App.jsx

@@ -1,6 +1,7 @@
 import {useState, useEffect, useRef} from 'react';
 
 import './App.css';
+import { parseXml } from './XmlParsing';
 
 import mapboxgl, {
   NavigationControl,
@@ -24,6 +25,7 @@ function importAll(r) {
 }
 
 const gLoadedImages = importAll(require.context('./data/20220507-CT-North-Chick-Hike/pictures/', false, /\.(png|jpe?g|svg)$/));
+const gGpxData = importAll(require.context('./data/20220507-CT-North-Chick-Hike/gpx-data', false, /\.gpx$/));
 
 function mapStyleUrl(name) {
   if (name === 'outdoors') {
@@ -42,11 +44,47 @@ async function loadImage(dir, image) {
   return require(`${dir}/${image}`);
 }
 
+function deconstructFilename(file) {
+  const match =  file.match(/(.+)\.([a-zA-Z0-9]+)\.([a-zA-Z]+)$/);
+  const filePathParts = match[1].split('/');
+  return { file: file, name: filePathParts[filePathParts.length - 1], hash: match[2], ext: match[3] };
+}
+
+
 function MapComponent(props = {}) {
+  const {
+    mapStyleName = 'outdoors-v11',
+  } = props;
+
   const mapRef = useRef(null);
   const mapObjRef = useRef(null);
 
-  const mapStyleName = useState('outdoors-v11');
+  const [tracks, setTracks] = useState([]);
+  const [waypoints, setWaypoints] = useState([]);
+
+  const loadGpxData = async () => {
+    const currentWp = {};
+    const currentTracks = {};
+
+    console.debug('App: Load GPX Data Started');
+
+    const dataProm = (
+      gGpxData.map(async (file, i) => {
+        const fileObj = deconstructFilename(file);
+        fileObj.data = await parseXml(fileObj.file);
+        if (!!fileObj.data.waypoint) {
+          currentWp[i] = fileObj;
+        }
+        if (!!fileObj.data.track) {
+          currentTracks[i] = fileObj;
+        }
+      })
+    )
+    await Promise.all(dataProm).catch((err) => console.error('App: Failed to parse data:', err.message));
+    console.debug('App: Tracks', currentTracks);
+    setTracks(Object.values(currentTracks));
+    setWaypoints(Object.values(currentWp));
+  };
 
   useEffect(() => {
     if (mapObjRef.current === null) {
@@ -62,6 +100,8 @@ function MapComponent(props = {}) {
 
       mapObjRef.current = map;
     }
+
+    loadGpxData();
   }, []);
 
   const mapStyle = {};

src/XmlParsing.jsx

@@ -0,0 +1,100 @@
+function getName(xml) {
+    return xml.querySelector('name')?.textContent
+}
+
+function getDescription(xml) {
+    return xml.querySelector('desc')?.textContent
+}
+
+function getColor(xml) {
+    return xml.querySelector('color')?.textContent
+}
+
+function getGpsTrack(xml) {
+  const getChild = (obj, name) => {
+    return obj.querySelector(name);
+  }
+  const queryFunc = (trkpt) => {
+      return {
+          timestamp: getChild(trkpt, 'time')?.textContent,
+          value: [
+              trkpt.getAttribute('lat'),
+              trkpt.getAttribute('lon'),
+              getChild(trkpt, 'ele')?.textContent,
+          ],
+      }
+  };
+  let track = xml.querySelector('trkseg');
+  console.debug('trkseg', track);
+  if (!track) { return null }
+  const trackArr = Object.values(track.children).map(queryFunc);
+  console.debug('trackArr', trackArr);
+  return trackArr;
+}
+
+function getWaypoint(xml) {
+    const waypoint = xml.querySelector('wpt');
+    const timestamp = xml.querySelector('time');
+    if (!waypoint) {
+        return null;
+    }
+    return {
+        timestamp: timestamp.textContent,
+        value: [waypoint.getAttribute('lat'), waypoint.getAttribute('lon')],
+    }
+}
+
+export async function parseXml(file) {
+  return new Promise((resolve, reject) => {
+    const rawFile = new XMLHttpRequest();
+    rawFile.onreadystatechange = () => {
+      if (rawFile.readyState === 4 && (rawFile.status === 200 || rawFile.status === 0)) {
+        const parser = new DOMParser();
+        const xml = parser.parseFromString(rawFile.response, 'text/xml');
+
+        const data = {};
+        data.name = getName(xml);
+        data.description = getDescription(xml);
+        data.color = getColor(xml);
+        data.track = getGpsTrack(xml);
+        data.waypoint = getWaypoint(xml);
+
+        resolve(Object.fromEntries(
+          Object.entries(data).filter(([_, v]) => !!v)
+        ));
+      }
+    };
+
+    rawFile.open('GET', file, false);
+    rawFile.send();
+  });
+}
+
+
+function toGeoJSONBase(geometry, props) {
+  const feature = {};
+  feature.type = 'Feature';
+  feature.geometry = geometry;
+  feature.properties = props;
+  return {
+    type: 'FeatureCollection',
+    features: [feature],
+  }
+}
+
+export function toGeoJSONWaypoint(item, props = {}) {
+  const geo = {
+    type: 'Point',
+    coordinates: [item.value[1], item.value[0]],
+  };
+  return toGeoJSONBase(geo, props)
+}
+
+export function toGeoJSONTrack(item, props = {}) {
+  const lineCoords = item.map((v) => [v.value[1], v.value[0]]);
+  const geo = {
+    type: 'LineString',
+    coordinates: lineCoords,
+  };
+  return toGeoJSONBase(geo, props)
+}