Elevation Profile Control

The MapTiler elevation profile control module for MapTiler SDK provides an easy way to show the elevation profile of any GeoJSON trace; whether it’s a LineString or a MultiLineString, this trace can be in a Feature or FeatureCollection. If multiple features are eligible in the provided dataset, the features will be concatenated and displayed together as a unique route. The module uses the Elevation API Client JS.

The elevation profile control is customizable in many ways and supports metric and imperial units. It has many built-in defaults and does not need much to look nice!

Get started

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

  1. Install the npm package.

  2. Include the following code in your JavaScript file (Example: main.js).

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

  1. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

API Reference

This reference documents every object and method available. Each section describes classes or objects as well as their properties, parameters, methods, and associated events. Many sections also include inline code examples and related resources.

Computing Elevation

Sometimes, the route data passed to the method .setData() will contain only longitude and latitude information but no elevation. In that case, the control will automatically fetch and compute the elevation data before displaying the profile. Under the hood, the MapTiler Client library performs this operation using elevation data from MapTiler.

Related examples

Customize Elevation profile control

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!
Elevation profile control

Elevation profile control

Example

The elevation profile control for MapTiler SDK is a super easy way to show the elevation profile of any GeoJSON trace, with elevation data fueled by MapTiler.
How to display GPX track elevation profile

Display GPX track elevation profile

Example

The elevation profile control for MapTiler SDK is a super easy way to show the elevation profile of any GPX track, with elevation data fueled by MapTiler.
Show the trace position with Elevation profile control

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.
Show zoomed section in Elevation profile control

Zoomed section Elevation profile control

Example

With the onChangeView event of the elevation profile control for MapTiler SDK, we have access to a GeoJSON LineString corresponding to the zoomed section. This way, we can display the section on top of the full-length route.