---
title: "Elevation profile control | JavaScript maps SDK"
description: "Show elevation profiles for GeoJSON traces using MapTiler."
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Elevation profile control

The [Elevation Profile control](https://docs.maptiler.com/sdk-js/modules/elevation-profile/) 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

1.  Install the npm package.
    
    ```bash
    npm install --save @maptiler/sdk
    ```
    
2.  Include the CSS file.
    
    If you have a bundler that can handle CSS, you can `import` the CSS
    
    ```js
    import "@maptiler/sdk/dist/maptiler-sdk.css";
    ```
    
    or include it with a `<link />` in the head of the document via the CDN
    
    ```html
    <link href='https://cdn.maptiler.com/maptiler-sdk-js/v4.2.0/maptiler-sdk.css' rel='stylesheet' />
    ```
    
3.  Include the following code in your JavaScript file (Example: app.js).
    
    ```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
          
     });
    ```
    
4.  Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/developer/credentials/api-key/#secure-key) before you publish it.
    
5.  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](https://cloud.maptiler.com/maps/), or create your own to truly differentiate your application.
    
6.  Install the elevation-profile-control npm package.
    
    ```bash
    npm install --save @maptiler/elevation-profile-control
    ```
    
7.  Import the MapTiler elevation profile control
    
    ```js
    import * as maptilersdk from '@maptiler/sdk';
     import '@maptiler/sdk/dist/maptiler-sdk.css';
     import { ElevationProfileControl } from "@maptiler/elevation-profile-control";
    ```
    
8.  Instantiate the control and add it to a `Map` instance, most likely inside a _map_ `"ready"` event callback
    
    ```js
    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

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

#### main.js

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

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

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

## Basic JavaScript setup

1.  Copy the following code, paste it into your favorite text editor, and save it as a `.html` file.
    
    ```html
    <!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.2.0/maptiler-sdk.umd.min.js"></script>
       <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.2.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>
    ```
    
2.  Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/developer/credentials/api-key/#secure-key) before you publish it.
    
3.  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](https://cloud.maptiler.com/maps/), or create your own to truly differentiate your application.
    
4.  Include the MapTiler Elevation profile control JS file in the `head` of your HTML file.
    
    ```html
    <script src="https://cdn.maptiler.com/maptiler-elevation-profile-control/v3.0.1/maptiler-elevation-profile-control.umd.min.js"></script>
    ```
    
5.  Add a GeoJSON trace to the map. Check out the [How to Upload GeoJSON to MapTiler](https://docs.maptiler.com/guides/maps-apis/maps-platform/prepare-geojson-with-attributes-for-choropleth-map-and-upload-geojson-to-maptiler-cloud#PrepareGeoJSONwithattributesforchoroplethmapanduploadGeoJSONtoMapTilerCloud-UploadGeoJSONtoMapTilerCloud) tutorial. Download the [Maupas Peak hiking sample data](https://docs.maptiler.com/sdk-js/assets/my_trace.geojson)
    
    ```js
    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
       });
     });
    ```
    
6.  Instantiate the control and add it to a `Map` instance, most likely inside a _map_ `"ready"` event callback
    
    ```js
    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

```html
<!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.2.0/maptiler-sdk.umd.min.js"></script>
  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.2.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](https://docs.maptiler.com/sdk-js/examples/elevation-profile-control-gpx/) example to use it as an **npm module** instead of from a CDN.

## Related examples

### [Zoomed section Elevation profile control](https://docs.maptiler.com/sdk-js/examples/elevation-profile-control-zoomed-section/)

Examples

Display a zoomed-in section on the elevation profile.

### [Show trace position Elevation profile control](https://docs.maptiler.com/sdk-js/examples/elevation-profile-control-marker/)

Examples

Synchronize a moving map marker with elevation profile cursor.

### [Customize Elevation profile control](https://docs.maptiler.com/sdk-js/examples/elevation-profile-control-customized/)

Examples

Customize the MapTiler SDK elevation profile control interface.

### [3D terrain map](https://docs.maptiler.com/sdk-js/examples/3d-map/)

Tutorials

Create and display 3D terrain maps on web pages.