---
title: "Show zoomed section in Elevation profile control | Elevation profile control | JavaScript maps SDK"
description: "Display a zoomed-in section on the elevation profile."
---

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

# Show zoomed section in Elevation profile control

In this example, we will showcase a scenario where we focus on a particular portion of the elevation profile and emphasize that specific section on the map. By utilizing the `onChangeView` event of the elevation profile control for MapTiler SDK, we are able to retrieve a GeoJSON _LineString_ that corresponds to the zoomed-in segment. Consequently, we can exhibit the selected section on the map alongside the entire route.

Zoom in on a profile section to highlight that section on the map.

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, 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: [1.71593, 42.2216], // starting position [lng, lat]
        zoom: 12.51 // 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/developer/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 [Pedraforca hiking sample data](https://docs.maptiler.com/sdk-js/assets/loop_track.geojson)
    

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

      helpers.addPolyline(map, {
        data: './loop_track.geojson', //from a URL or a MapTiler Data UUID
        lineColor: "#008", 
        outline: true, 
        outlineWidth: 1.5
      });
      //Layer to display the zoomed section of the route
      const layerInfo2 = await helpers.addPolyline(map, {
        data: './loop_track.geojson', //from a URL or a MapTiler Data UUID
        lineColor: "#f00", 
        outline: true, 
        outlineWidth: 1.5
      });

    });
```

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: './loop_track.geojson', //from a URL or a MapTiler Data UUID
        lineColor: "#008", 
        outline: true, 
        outlineWidth: 1.5
      });
      //Layer to display the zoomed section of the route
      const layerInfo2 = await helpers.addPolyline(map, {
        data: './loop_track.geojson', //from a URL or a MapTiler Data UUID
        lineColor: "#f00", 
        outline: true, 
        outlineWidth: 1.5
      });

      // Create an instance (with the onChangeView event listener)
      const epc = new ElevationProfileControl({
        onChangeView: (route) => {
          map.getSource(layerInfo2.polylineSourceId).setData(route);
        }
      });

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

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

    });
```

### Complete source code

```html
import '@maptiler/sdk/dist/maptiler-sdk.css';
import { config, Map, helpers, 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: [1.71593, 42.2216],
  zoom: 12.51,
  style: MapStyle.OUTDOOR
});

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

  helpers.addPolyline(map, {
    data: './loop_track.geojson', //from a URL or a MapTiler Data UUID
    lineColor: "#008", 
    outline: true, 
    outlineWidth: 1.5
  });
  //Layer to display the zoomed section of the route
  const layerInfo2 = await helpers.addPolyline(map, {
    data: './loop_track.geojson', //from a URL or a MapTiler Data UUID
    lineColor: "#f00", 
    outline: true, 
    outlineWidth: 1.5
  });

  // Create an instance (with the onChangeView event listener)
  const epc = new ElevationProfileControl({
    visible: true,
    onChangeView: (route) => {
      map.getSource(layerInfo2.polylineSourceId).setData(route);
    }
  });

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

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

});
```

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

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

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