Elevation profile control

The elevation profile control for MapTiler SDK is a super easy way to show the elevation profile of any GeoJSON or GPX (GPS) trace. By utilizing elevation data from MapTiler Cloud, this feature allows you to effortlessly showcase the elevation profile of your selected data source.

Following this step-by-step example, you can easily view the profile of various activities such as hiking routes, bicycle routes, trail runs, and more.

Install the npm package.

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%;
 }

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

Load the map with the style. Include the following code in your JavaScript.


 import { config, Map, helpers, MapStyle } from '@maptiler/sdk';
    
 config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
 const map = new Map({
     container: 'map', // container's id or the HTML element in which SDK will render the map
     style: MapStyle.OUTDOOR,
     center: [0.57705, 42.68311], // starting position [lng, lat]
     zoom: 12.22 // starting zoom
 });

Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.
Add a GeoJSON trace to the map. Check out the How to Upload GeoJSON to MapTiler Cloud tutorial. Download the Maupas Peak hiking sample data
Import the MapTiler elevation profile control
Instantiate the control and add it to a Map instance, most likely inside a map "load" event callback

View complete source code

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!

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.