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

An extension of MapLibre GL JS