Elevation Profile Control

maptiler/maptiler-elevation-profile-control

The MapTiler elevation profile control module for MapTiler SDK is a super 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. MapTiler Cloud fuels the elevation data.

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. Install the npm package.

2. Import the MapTiler elevation profile control

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

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 Cloud.

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!

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 Cloud.

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 Cloud.

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.

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.

View elevation profile control complete source code on GitHub