How to import a gpx file in an input, transform it in geojson and display it on my mapbox

Question

I would like that when I add a gpx file in my input, it is taken into account and displayed on the map.

Apparently I saw that it was necessary to convert the gpx file in format to geojson then to send this variable in the code data in map.addsource. But I can't get the gpx and convert it automatically to geojson for the moment.

Can you help me?

Answer 1

The map control only understands GeoJSON, vector tiles, and raster tiles. So in order to display GPX data, you would need to convert it to one of these types. GeoJSON is likely the best option here unless you have a massive GPX file (hundreds of MB) at which point vector tiles would be the right choice. To convert GPX to GeoJSON in a web app, use this library: https://github.com/mapbox/togeojson