Create web frontend to Ingest a GPX file and generate the necessary GeoJSON file

[EfficiencyJunky]

Need to take the GPX file and create a GeoJSON file that has all the proper pins and metadata required to build the map.

Rename the LineString to "ROUTE"

It should have the following

{
    "type": "Feature",
    "properties": {
        "name": "ROUTE",
        "type": "1",
        "time": "START_TIME_UTC_DATETIME",
        "coordTimes": [list of UTC_DATETIME objects that match with the coordinates in the LineString]
    },
    "geometry": {
        "type": "LineString",
        "coordinates": [list_of_coordinates]
    }
}

Create a Start and End point called "START" and "FINISH"

• Make the description the name of the location or whatever else you want.
• The code should look something like this

  {
  "type": "Feature",
  "properties": {
      "name": "START | FINISH",
      "description": "NAME_OF_LOCATION && TIME/ELEVATION"
  },
  "geometry": {
      "type": "Point",
      "coordinates": [
                  -122.5391686,
                  37.8321992,
                  0
              ]
  }
  }

Add a "DETAILS" Point somewhere in the middle of the route

• The name property will be set to "DETAILS" to identify the point in the system
• The description property will be used by the web app to add ride information to the marker EXAMPLE: Statistics computed from imported data<br><br>Saturday, July 11, 2020 7:14 PM PDT<br>Distance: 14.3 miles<br>Duration: 1 hours, 45 minutes, and 55 seconds<br>Average Speed: 8.1 mph<br>Minimum Elevation: 117 feet<br>Maximum Elevation: 757 feet<br>Total climb: 1371 feet<br>Total descent: 1595 feet

  {
  "type": "Feature",
  "properties": {
      "name": "DETAILS",
      "description": "ALL_RIDE_DETAILS"
  },
  "geometry": {
      "type": "Point",
      "coordinates": [
                  -122.5391686,
                  37.8321992,
                  0
              ]
  }
  }

Add the following metadata key value pair to the top level of the GeoJSON object

    "metadata": {
        "routName":"NAME_OF_THE_ROUTE_TO_BE_DISPLAYED",
        "videoEmbedID": "",
        "googleMapURL": "",
        "stravaURL": "",
        "lineColor": "rgba(62, 146, 204, 1)",
        "lineColorEasy": "green",
        "lineColorHard": "red"
    },