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 to clear the elevation profile, use
to draw a new profile (double click to finish).
-
Copy the following code, paste it into your favorite text editor, and save it as a
.html
file. -
Replace
YOUR_MAPTILER_API_KEY_HERE
with your actual MapTiler API key. -
The next it’s up to you. You can start the map in a different place by modifying the
starting position
andstarting zoom
, and you can change the look of the map to any of our styles, or yours, by updating thestyle
. See what’s available here. -
Install the npm package.
-
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 -
Include the following code in your JavaScript file (Example: app.js).
-
Add the
ProfileControl
to the map. -
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. -
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) -
Include the
chartist.js
JavaScript and CSS files in the<head>
of your HTML file. We will use Chartist.js to draw the chart. -
Create a file called
globalMapTiles.js
next to your.html
file. Copy the following code, paste it into theglobalMapTiles.js
file. We got this library from Tiles à la Google Maps and it has a number of utilities for conversion between tiles and coordinates. -
Create a file called
elevationProvider.js
next to your.html
file. Copy the following code, paste it into theelevationProvider.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. -
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 theprofileControl.js
file. -
Add the Draw control to the ProfileControl. Update the
profileControl.js
file. -
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. -
Create the showChart and clearChart function. Update the
profileControl.js
file. -
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. -
Create the function drawElevationProfile. Update the
profileControl.js
file. -
Include the
globalMapTiles.js
,elevationProvider.js
,profileControl.js
JavaScript file in the<head>
of your HTML file. -
Create the chartContainer style. Add the chartContainer style to your stylesheet.
View complete source code on GitHub
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.