javascript - Read GPX file or third party URL in mapbox to add lines - Stack Overflow

admin管理员组

文章数量:1392068

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 ?

/

& 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

/

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./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./mapbox-gl-js/example/third-party/

• javascript
• mapbox
• mapbox-gl

Share Improve this question Follow asked Feb 22, 2021 at 13:13 Aman SharmaAman Sharma 17311 gold badge55 silver badges1616 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Two options e 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./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./) or add to a map using Mapbox GL JS.

These two guides I wrote might provide some additional help

• Tilesets & Datasets: Managing Data in Mapbox Studio
• Creating a Custom Map Using Mapbox Studio

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./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/. 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 e 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.

本文标签： javascriptRead GPX file or third party URL in mapbox to add linesStack Overflow