How to draw an elevation profile along a path

This tutorial shows how build a web mapping application that allows us to draw a path and retrieve the elevation profile along that path. We will use the MapTiler Terrain-RGB tiles to make the calculations of the heights that are used to draw the profile graph.

Use trash to clear the elevation profile, use draw line to draw a new profile (double click to finish).

  1. Copy the following code, paste it into your favorite text editor, and save it as a .html file.

  2. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

  3. The next it’s up to you. You can start the map in a different place by modifying the starting position and starting zoom, and you can change the look of the map to any of our styles, or yours, by updating the style. See what’s available here.

  4. Install the npm package.

  5. Include the CSS file.

    If you have a bundler that can handle CSS, you can import the CSS or include it with a <link> in the head of the document via the CDN

  6. Include the following code in your JavaScript file (Example: app.js).

  7. Add the ProfileControl to the map.

  8. Include the mapbox-gl-draw JavaScript and CSS files in the <head> of your HTML file. We will use mapbox-gl-draw to draw the path.

  9. Include the Turf.js JavaScript file in the <head> of your HTML file. We will use Turf.js to generate a set of points along the line (path sampling)

  10. Include the chartist.js JavaScript and CSS files in the <head> of your HTML file. We will use Chartist.js to draw the chart.

  11. Create a file called globalMapTiles.js next to your .html file. Copy the following code, paste it into the globalMapTiles.js file. We got this library from Tiles à la Google Maps and it has a number of utilities for conversion between tiles and coordinates.

  12. Create a file called elevationProvider.js next to your .html file. Copy the following code, paste it into the elevationProvider.js file. This class is in charge of downloading the MapTiler Terrain-RGB tiles to make the calculations of the heights that are used to draw the profile graph.

  13. We already have the tools that allow us to calculate the profile of the path. We will now create a map control to draw a path and display the profile graph. Create a file called profileControl.js next to your .html file. Copy the following code, paste it into the profileControl.js file.

  14. Add the Draw control to the ProfileControl. Update the profileControl.js file.

  15. Add the Draw control to the map and add event handler for map draw events. You will add code to show, update or clean the profile in this handlers. Update the profileControl.js file.

  16. Create the showChart and clearChart function. Update the profileControl.js file.

  17. Create the sample profile line. We need to generate a set of points along the line. Why is this necessary? Imagine that the user draws a line with only two definition points (red dots). Without sampling, the elevation profile would be just a line connecting two elevations. Update the profileControl.js file.

  18. Create the function drawElevationProfile. Update the profileControl.js file.

  19. Include the globalMapTiles.js, elevationProvider.js, profileControl.js JavaScript file in the <head> of your HTML file.

  20. Create the chartContainer style. Add the chartContainer style to your stylesheet.

Learn more

Get more details about this tutorial on How to draw elevation profile for your path

Check out the RGB Terrain by MapTiler for more details on how MapTiler Terrain-RGB works and its uses.

An extension of MapLibre GL JS