---
title: "Show the trace position with Elevation profile control | Elevation profile control | JavaScript maps SDK"
description: "Synchronize a moving map marker with elevation profile cursor."
---

# Show the trace position with Elevation profile control

In this step-by-step demonstration, we present a scenario where a marker moves along a specified route on the map. This allows us to synchronize the location of the elevation profile cursor with the marker’s position on the map. This synchronization is made possible through the utilization of the `onMove` event from the elevation profile control for MapTiler SDK.

1.  Install the npm package.

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

1.  Create the map style. Add the map style to your stylesheet. The div must have non-zero height.

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

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

```html
<div id="map"></div>
```

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

```js
import '@maptiler/sdk/dist/maptiler-sdk.css';
```

```
<div class="markdown-alert markdown-alert-note" markdown="1">
<p class="markdown-alert-title">Note</p>
Including the CSS file using a `<link>` in the head of the document via the CDN is the easiest way.

<pre class="language-html" style="position: relative;" markdown="0"><code class="language-html">
&lt;link href=&#39;https://cdn.maptiler.com/maptiler-sdk-js/v4.2.0/maptiler-sdk.css&#39; rel=&#39;stylesheet&#39; /&gt; </code></pre>

</div>
```

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

```js
import { config, Map, helpers, Marker, 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
    });
```

1.  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/credentials/api-key/#secure-key) before you publish it.
    
2.  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('load', () => {

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

    });
```

1.  Create a marker and add it to the map.

```js
map.on('load', () => {

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

      const marker = new Marker()
        .setLngLat([0, 0])
        .addTo(map);

    });
```

1.  Import the MapTiler elevation profile control

```js
import { ElevationProfileControl } from "@maptiler/elevation-profile-control";
```

1.  Instantiate the control and add it to a `Map` instance, most likely inside a _map_ `"load"` event callback

```js
map.on('load', () => {

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

      const marker = new Marker()
        .setLngLat([0, 0])
        .addTo(map);

      // Create an instance (with the onMove event listener)
      const epc = new ElevationProfileControl({
        onMove: (data) => {
          marker.setLngLat(data.position)
        },
      });

      // 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
import '@maptiler/sdk/dist/maptiler-sdk.css';
import { config, Map, helpers, Marker, MapStyle } from '@maptiler/sdk';
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 SDK will render the map
  center: [0.57705, 42.68311],
  zoom: 12.22,
  style: MapStyle.OUTDOOR
});

map.on('load', () => {

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

  const marker = new Marker()
    .setLngLat([0, 0])
    .addTo(map);

  // Create an instance (with the onMove event listener)
  const epc = new ElevationProfileControl({
    visible: true,
    onMove: (data) => {
      marker.setLngLat(data.position)
    },
  });

  // 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');

});
```

## Learn more

You can also use elevation control via CDN. See the [Elevation profile control](https://docs.maptiler.com/sdk-js/examples/elevation-profile-control-simple/) example to use it as a **CDN** instead of an NPM module.

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

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

Examples

Customize the MapTiler SDK elevation profile control interface.

### [Add elevation profile control](https://docs.maptiler.com/sdk-js/examples/elevation-profile-control-simple/)

Examples

Show elevation profiles for GeoJSON traces using MapTiler.

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

Tutorials

Create and display 3D terrain maps on web pages.