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

NPM module setup

Install the npm package.
```
 npm install --save @maptiler/sdk
```

Include the CSS file.

If you have a bundler that can handle CSS, you can import the CSS


 import "@maptiler/sdk/dist/maptiler-sdk.css";

or include it with a <link /> in the head of the document via the CDN


 <link href='https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css' rel='stylesheet' />

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


 import * as maptilersdk from '@maptiler/sdk';

 maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
 const map = new maptilersdk.Map({
   container: 'map', // container's id or the HTML element to render the map
   style: maptilersdk.MapStyle.OUTDOOR,
      
   center: [0.57705, 42.68311], // starting position [lng, lat]
   zoom: 12.22, // starting zoom
      
 });

Replace YOUR_MAPTILER_API_KEY_HERE with your own API key. Make sure to secure the key before you publish it.
The next is up to you. You can center your map wherever you desire (modifying the starting position) and set an appropriate zoom level (modifying the starting zoom) to match your users’ needs. Additionally, you can change the map’s look (by updating the source URL); choose from a range of visually appealing map styles from our extensive MapTiler standard maps, or create your own to truly differentiate your application.

Install the elevation-profile-control npm package.


 npm install --save @maptiler/elevation-profile-control

Import the MapTiler elevation profile control


 import * as maptilersdk from '@maptiler/sdk';
 import '@maptiler/sdk/dist/maptiler-sdk.css';
 import { ElevationProfileControl } from "@maptiler/elevation-profile-control";

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


 map.on('ready', () => {
   maptilersdk.helpers.addPolyline(map, {
     data: 'YOUR_MAPTILER_DATASET_ID_HERE', 
     lineColor: '#66f', 
     lineWidth: 4, 
     outline: true, 
     outlineWidth: 2
   });

   // Create an instance
   const epc = new ElevationProfileControl({
     visible: true
   });

   // Add it to your map
   map.addControl(epc);

   // Add some data (from a URL or a MapTiler Data UUID)
   epc.setData('YOUR_MAPTILER_DATASET_ID_HERE');

 });

Complete source code


npm install --save @maptiler/sdk @maptiler/elevation-profile-control

main.js

import { Map, MapStyle, config, helpers } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
import { ElevationProfileControl } from '@maptiler/elevation-profile-control';

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

map.on('ready', () => {
  helpers.addPolyline(map, {
    data: 'YOUR_MAPTILER_DATASET_ID_HERE', //from a URL or a MapTiler Data UUID
    lineColor: '#66f', 
    lineWidth: 4, 
    outline: true, 
    outlineWidth: 2
  });

  // Create an instance
  const epc = new ElevationProfileControl({
    visible: true
  });

  // Add it to your map
  map.addControl(epc);

  // Add some data (from a URL or a MapTiler Data UUID)
  epc.setData('YOUR_MAPTILER_DATASET_ID_HERE');
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Elevation profile control | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }

Basic JavaScript setup

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


 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Elevation profile control</title>
   <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
   <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
   <style>
     body { margin: 0; padding: 0; }
     #map { position: absolute; top: 0; bottom: 0; width: 100%; }
   </style>
 </head>
 <body>
   <div id="map"></div>
   <script>
       maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';      
       const map = new maptilersdk.Map({
         container: 'map', // container's id or the HTML element to render the map
         style: maptilersdk.MapStyle.OUTDOOR,
            
         center: [0.57705, 42.68311], // starting position [lng, lat]
         zoom: 12.22, // starting zoom
            
       });
   </script>
 </body>
 </html>

Replace YOUR_MAPTILER_API_KEY_HERE with your own API key. Make sure to secure the key before you publish it.
The next is up to you. You can center your map wherever you desire (modifying the starting position) and set an appropriate zoom level (modifying the starting zoom) to match your users’ needs. Additionally, you can change the map’s look (by updating the source URL); choose from a range of visually appealing map styles from our extensive MapTiler standard maps, or create your own to truly differentiate your application.

Include the MapTiler Elevation profile control JS file in the head of your HTML file.


 <script src="https://cdn.maptiler.com/maptiler-elevation-profile-control/v3.0.1/maptiler-elevation-profile-control.umd.min.js"></script>

Add a GeoJSON trace to the map. Check out the How to Upload GeoJSON to MapTiler tutorial. Download the Maupas Peak hiking sample data


 map.on('ready', () => {
   maptilersdk.helpers.addPolyline(map, {
     data: 'YOUR_MAPTILER_DATASET_ID_HERE', //from a URL or a MapTiler Data UUID
     lineColor: '#66f', 
     lineWidth: 4, 
     outline: true, 
     outlineWidth: 2
   });
 });

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


 map.on('ready', () => {
   maptilersdk.helpers.addPolyline(map, {
     data: 'YOUR_MAPTILER_DATASET_ID_HERE', 
     lineColor: '#66f', 
     lineWidth: 4, 
     outline: true, 
     outlineWidth: 2
   });

   // Create an instance
   const epc = new maptilerelevationprofilecontrol.ElevationProfileControl({
     visible: true
   });

   // Add it to your map
   map.addControl(epc);

   // Add some data (from a URL or a MapTiler Data UUID)
   epc.setData('YOUR_MAPTILER_DATASET_ID_HERE');

 });

Complete source code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Display a map</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
  <script src="https://cdn.maptiler.com/maptiler-elevation-profile-control/v3.0.1/maptiler-elevation-profile-control.umd.min.js"></script>
  <style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    const map = new maptilersdk.Map({
      container: 'map', // container's id or the HTML element in which the SDK will render the map
      style: maptilersdk.MapStyle.OUTDOOR,
      center: [0.57705, 42.68311], // starting position [lng, lat]
      zoom: 12.22, // starting zoom
    });

    map.on('ready', () => {
      maptilersdk.helpers.addPolyline(map, {
        data: 'YOUR_MAPTILER_DATASET_ID_HERE', //from a URL or a MapTiler Data UUID
        lineColor: '#66f', 
        lineWidth: 4, 
        outline: true, 
        outlineWidth: 2
      });

      // Create an instance
      const epc = new maptilerelevationprofilecontrol.ElevationProfileControl({
        visible: true
      });

      // Add it to your map
      map.addControl(epc);

      // Add some data (from a URL or a MapTiler Data UUID)
      epc.setData('YOUR_MAPTILER_DATASET_ID_HERE');
    });
  </script>
</body>

</html>

Learn more

You can also use elevation control via npm. See the How to display GPX track elevation profile example to use it as an npm module instead of from a CDN.

Elevation profile control

NPM module setup

Complete source code

main.js

index.html

style.css

Basic JavaScript setup

Complete source code

Learn more

Zoomed section Elevation profile control

Show trace position Elevation profile control

Customize Elevation profile control

3D terrain map

Elevation profile control

NPM module setup

Complete source code

main.js

index.html

style.css

Basic JavaScript setup

Complete source code

Learn more

Related examples

Zoomed section Elevation profile control

Show trace position Elevation profile control

Customize Elevation profile control

3D terrain map