Integration

You can use gpx.studio to create maps showing your GPX files and embed them in your website.

All you need is:

A Mapbox access token to load the map, and
GPX files hosted on your server or on Google Drive, or accessible via a public URL.

You can then play with the configurator below to customize your map and generate the corresponding HTML code.

You will need to set up Cross-Origin Resource Sharing (CORS) headers on your server to allow gpx.studio to load your GPX files.

Create your own map

Mapbox access token File URLs (separated by commas) Google Drive file IDs (separated by commas) Basemap

Elevation profile

Height

Fill by

Show controls

Speed

Heart rate

Cadence

Temperature

Power

Distance markers

Direction arrows

Distance units

Metric

Imperial

Nautical

Velocity units

Speed

Pace

Temperature units

Celsius

Fahrenheit

Theme

System

Light

Dark

Manual camera

You can move the map below to adjust the camera position.

Latitude 0 Longitude 0 Zoom 0 Bearing 0 Pitch 0

Preview

Open in

Integration code

                
                    <iframe src="https://gpx.studio/embed?options=%7B%22token%22%3A%22YOUR_MAPBOX_TOKEN%22%2C%22files%22%3A%5B%22https%3A%2F%2Fraw.githubusercontent.com%2Fgpxstudio%2Fgpx.studio%2Fmain%2Fgpx%2Ftest-data%2Fsimple.gpx%22%5D%7D" width="100%" height="600px" frameborder="0" style="outline: none;"/>

GPX file format FAQ

Did not find what you were looking for?

Ask the community on Reddit

Edit this page on GitHub