Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I am new on mapbox.

I want to know how I can read gpx file data in Javascript.

There are two links I got from mapbox Documentation.

One is this =>

I want result like in this example. How I can use my gpx file in this example ?

https://docs.mapbox.com/mapbox-gl-js/example/geojson-line/

& one is =>

Can I replace mvt URL with my gpx URL in following example ? When I am doing this it's throwing some error message: "Unimplemented type: 4"

My goal is to load gpx file data on mapbox with Javascript.

Thanks

https://docs.mapbox.com/mapbox-gl-js/example/third-party/

Two options come to mind on getting your GPX file displayed on a map using Mapbox. This a long response but I wanted to provide a detailed response as I struggled through this same problem last year.

Option 1

This one is the easiest and provides no coding. If you just want to get your single GPX file converted and displaying on a map, you can use Mapbox Studio to do all of it.

Just upload your GPX to Mapbox Studio as a tileset ( https://studio.mapbox.com/tilesets/ ). Mapbox will do the necessary conversion for you. After you upload the tileset, it will be available in a format that you can easily add to a Mapbox Style ( https://studio.mapbox.com/ ) or add to a map using Mapbox GL JS.

These two guides I wrote might provide some additional help

Option 2

If adding this GPX file is not a one off task and you will need to do this over and over again, option 2 might be your best bet. This approach involves doing the GPX to GeoJSON conversion yourself and then working directly with the results. Once you have the data converted you can write the results to a file, upload them programmatically or manually to Tilesets (see option 1), or even return the GeoJSON as an API response.

I would echo Moritz's suggestion to work with the togeojson lib. Only additional suggestion would be to use the fork of togeojson from tmcw ( https://github.com/tmcw/togeojson ). The Mapbox version is no longer actively maintained. If you are not overly familiar with GeoJSON, check out the spec at https://geojson.org/ . I like this explorer too which lets you add different feature types (i.e. polygons, lines, points, etc) to a map and view the generated GeoJSON output.

Step 1 - Convert GPX to GeoJSON

const converter = require("@tmcw/togeojson")
const fs = require("fs")
const DOMParser = require("xmldom").DOMParser
const mapboxgl = require("mapbox-gl")
// read in our GPX file and then parse it
const parsedGPX = new DOMParser().parseFromString(
  fs.readFileSync("<PATH_TO_GPX>", "utf8")
// convert our gpx to geojson and store the results
const geojson = converter.gpx(parsedGPX)
// do something with the output
// i.e. save the file locally
// upload it to the Mapbox tilesets API, etc
Step 2 - Display the Spatial Data
Now that you have some valid GeoJSON you can display it. Here is some pseudo code that illustrates how to do that.
import mapboxgl from "mapbox-gl"
// this is pseudo code but you could now do something with the geojson like
mapboxgl.accessToken = <YOUR_ACCESS_TOKEN>
const map = new mapboxgl.Map({
  container: "map,
  style: "mapbox://styles/mapbox/streets-v11",
  center: [-87.903982, 43.020403],
  zoom: 12,
map.on("load", () => {
  map.addSource("running-routes", {
    type: "geojson",
    // a reference to the converted data
    // could come from a file, API, etc
    data: RunningRoute,
  map.addLayer({
    id: "running-routes-line",
    type: "line",
    source: "running-routes",
    paint: {
      "line-color": "#15cc09",
      "line-width": 4,
These two guides I wrote might provide some additional help too.
Converting a KML to GeoJSON
A Complete Guide to Sources and Layers in React and Mapbox GL JS
One way to do it is to convert your GPX file to geoJSON and then use the example you already mentioned.
You could make use of this GPX to geoJSON converter to generate a geoJSON file, that you can display: https://mapbox.github.io/togeojson/
If you want to do it programmatically, you would have to iterate over the XML document (which GPX is) and extract the lat and lon values of the <trkpt > object.
Sample trkpt object:
<trkpt lat="47.644548" lon="-122.326897">
        <ele>4.46</ele>
        <time>2009-10-17T18:37:26Z</time>
      </trkpt>
Once you have stored them in a list, you need to write them to a JSON object in geoJSON format. Depending on how you want to display the positions, you can choose the geometry in which you store it. For use in the mentioned Mapbox example you would have to store them as lineString.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.