How to display GPX track elevation profile

The elevation profile control for MapTiler SDK is a super easy way to show the elevation profile of any GPX (GPS) trace or GeoJSON. By utilizing elevation data from MapTiler Cloud, this feature allows you to effortlessly showcase the elevation profile of your hiking routes, bicycle routes, trail runs, and more.

Following this step-by-step example, you can easily view the profile of various activities.

^{Drag and drop a GPX file onto the map to view your track profile.}

1. Install the npm package.

2. Create the map style. Add the map style to your stylesheet. The div must have a non-zero height.

   
    body { 
      margin: 0;
      padding: 0;
    }
       
    #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
    

3. Create a <div> element with a certain id where you want your map to be.

   Add <div> tag into your page. This div will be the container where the map will be loaded.

4. Create a <div> element with a certain id where you want your control to be.

   Add <div> tag into your page. This div will be the container where the control will be loaded.

5. Include the CSS file.

   If you have a bundler that can handle CSS, you can import the CSS from @maptiler/sdk/dist/maptiler-sdk.css.

   Including the CSS file using a <link> in the head of the document via the CDN is the easiest way.

6. Load the map with the style. Include the following code in your JavaScript.

7. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

8. We are going to define some variables that we will use later in the tutorial.

9. Add a GPX trace to the map. You can use a GPX directly from a URL or upload your GPX to the MapTiler Cloud. Check out the How to edit your data in MapTiler Cloud tutorial. Download the Cervinia Valtournenche mountain bike sample data

10. Add the Marker object to the @maptiler/sdk import.

11. Create a marker and add it to the map. We will use this marker to display the location of the elevation profile cursor with the position of the marker on the map.

12. Import the MapTiler elevation profile control

13. Instantiate the control and add it to a Map instance, most likely inside a map "load" event callback

14. Move the Marker to the GPX start point

15. Let’s add some styling to the profile control to see the track profile on the map along with your GPS track.

16. With these steps, you have your map where the GPX track is shown with its elevation profile. In the following steps, we will see how to add the functionality of dragging and dropping a GPX file on the map to view the new track along with its profile.

17. Use the HTML Drag and Drop API to drag a file onto our map.

18. Add the gpx function and the LngLatBounds object to the @maptiler/sdk import.

19. Read the GPX file data. To read the content of the file in the browser without having to upload it to any server, we will use the FileReader object.

20. Adjust the map view to the newly loaded track and move the marker to the track start point.

Learn more

You can also use elevation control via CDN. See the Elevation profile control example to use it as a CDN instead of an NPM module.

Related examples

Customize Elevation profile control

Example

The elevation profile control for MapTiler SDK, can be customized in many ways and is compatible with both metric and imperial units. It has many built-in defaults and does not need much to look nice!

Show trace position Elevation profile control

Example

With the onMove event of the elevation profile control for MapTiler SDK, we can show a marker moving on top of the trace on the map. This way, we can synchronize the position of the elevation profile cursor with the position of the map.

Add a GPX Line layer (polyline helper)

Example

This example shows how to add and a GPX line layer to the map using the polyline layer helper.

3D terrain map

Example

This tutorial demonstrates how to create a 3D terrain map and display it on a web page using MapTiler Cloud.