Kojo88
Kojo88

Reputation: 25

GPX download using gpx-parser-builder

I am just starting to use gpx-parser-builder. I am parsing a locally saved gpx file and modifying it. My next step is to take the object and build a gpx. The problem is, that my download just shows "[object Object]". I think the error is in the modify stage. The parsing and the .toString method should be OK. Can someone assist?

import React, { useState, useEffect } from "react";

export default function Home() {
  const [gpxData, setGpxData] = useState(null);

  useEffect(() => {
    async function loadAndParseGPX() {
      try {
        // Dynamically import the GPX module
        const GPXModule = await import("gpx-parser-builder");
        const GPX = GPXModule.default ? GPXModule.default : GPXModule;

        // Fetch the GPX file content
        const response = await fetch("./Bester.gpx");
        const gpxFileContent = await response.text();

        // Parse the GPX file content
        const gpx = GPX.parse(gpxFileContent); 
        setGpxData(gpx);
        console.log(gpxFileContent);
        console.dir(gpx.metadata);
        console.dir(gpx.wpt);
        console.dir(gpx.trk);
      } catch (error) {
        console.error("Failed to fetch or parse GPX file:", error);
      }
    }

    loadAndParseGPX();
  }, []);

  const modifyGpxFile = () => {
    if (!gpxData || !gpxData.trk) {
      console.log("No track data found to modify.");
      return;
    }

    gpxData.trk.forEach((track) => {
      track.trkseg.forEach((segment) => {
        segment.trkpt.forEach((point, index) => {
          // Assuming point.time is in a compatible format to be parsed as a Date
          const pointTime = new Date(point.time);
          // Decrease the time by one second for each point
          pointTime.setSeconds(pointTime.getSeconds() - 1);
          // Update the time in the original GPX data
          point.time = pointTime.toISOString();
        });
      });
    });

    
    setGpxData({ ...gpxData });
    console.log("GPX data modified.");
    console.log(gpxData);
  };

  const downloadModifiedGpxFile = () => {
    if (!gpxData) {
      console.error("No GPX data available to download.");
      return;
    }

    // Serialize the modified GPX data to string
    const gpxDataString = gpxData.toString(); // Make sure gpxData has a toString() method

    // Create a blob from the GPX string and generate a URL for it
    const blob = new Blob([gpxDataString], { type: "application/gpx+xml" });
    const href = URL.createObjectURL(blob);

    // Create a temporary anchor element and trigger the download
    const link = document.createElement("a");
    link.href = href;
    link.download = "modified-track.gpx"; // Name of the file to be downloaded
    document.body.appendChild(link);
    link.click();

    // Clean-up
    document.body.removeChild(link);
    URL.revokeObjectURL(href);
  };

  return (
    <div>
      <button onClick={modifyGpxFile}>Modify GPX File</button>
      <button onClick={downloadModifiedGpxFile}>Download Modified GPX</button>
    </div>
  );
}

Thanks. BR K

Upvotes: 0

Views: 157

Answers (0)

Related Questions