Source: pages-sections/Routeplanner-Sections/GPXdownload.js

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

// Core Components
import { makeStyles } from "@material-ui/core/styles";
import Button from "/components/CustomButtons/Button.js";
import Popover from "@material-ui/core/Popover";

import styles from "/styles/jss/nextjs-material-kit/pages/componentsSections/javascriptStyles.js";
const useStyles = makeStyles(styles);

/**
 * The function GPXdownload generates a GPX file for downloading based on routeResponse data.
 * @param props - The `GPXdownload` function is a React component that takes in props as its parameter.
 * The props object contains the `routeResponse` property along with other properties.
 * @returns The `GPXdownload` function is returning a button component with a link that allows the user
 * to download a GPX file. The GPX file is generated based on the `routeResponse` object provided as a
 * prop. If `routeResponse` is null, the button will display "Download Not Avail". If `routeResponse`
 * is not null, the function will extract coordinates from the `
 */

export function GPXdownload(props) {
  const { routeResponse = null, ...rest } = props;
  const [anchorElRight, setAnchorElRight] = useState(null);
  const classes = useStyles();

  if (routeResponse == null) {
    return (
      <div>
        <Button
          color="rose"
          onClick={(event) => setAnchorElRight(event.currentTarget)}
        >
          GPX Download
        </Button>
        <Popover
          classes={{
            paper: classes.popover,
          }}
          open={Boolean(anchorElRight)}
          anchorEl={anchorElRight}
          onClose={() => setAnchorElRight(null)}
          anchorOrigin={{
            vertical: "center",
            horizontal: "right",
          }}
          transformOrigin={{
            vertical: "center",
            horizontal: "left",
          }}
        >
          <h3 className={classes.popoverHeader}>Create the route first!</h3>
          <div className={classes.popoverBody}>
            Go to the Route Tab and create a route by selecting 2 or more
            waypoints.
          </div>
        </Popover>
      </div>
    );
  } else {
    var fullarray = routeResponse.routes[0].overview_path;

    var array = "";
    console.log(routeResponse);
    for (var i = 0; i < fullarray.length; i++) {
      array += `<wpt lat="${fullarray[i].lat()}" lon="${fullarray[
        i
      ].lng()}"></wpt>\n`;
    }

    const file = new Blob(
      [
        `<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
            <gpx version="1.1">
            ${array}
            </gpx>
            `,
      ],
      { type: "text/plain" }
    );

    return (
      <Button color="success">
        <a
          download="route.gpx"
          target="_blank"
          rel="noreferrer"
          href={URL.createObjectURL(file)}
          style={{
            textDecoration: "inherit",
            color: "inherit",
          }}
        >
          GPX Download
        </a>
      </Button>
    );
  }
}