Customize Elevation profile control

The elevation profile control for MapTiler SDK provides various options for customization, allowing users to choose between metric and imperial units. With built-in defaults, the control effortlessly achieves a visually appealing appearance. Furthermore, it offers a wide range of customization features, including styling options, the ability to define a class for the container, and even the option to display the control in a separate container outside the map.

To demonstrate this, we will utilize specific styling options to personalize the control and create it within its dedicated container located outside the map.

1. Install the npm package.

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

   
    body { 
      margin: 0;
      padding: 0;
    }
       
    #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
   
    #profileContainer {
      background: #252525;
      width: 50vw;
      height: 200px;
      margin-top: 20px;
      position: absolute;
      bottom: 10px;
    }
    

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

4. Create a <div> element with a certain id where you want your control to be.

   Add <div> tag into your page. This div will be the container where the control will be loaded.

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

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

   
    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.BACKDROP.DARK,
        center: [0.57705, 42.68311], // starting position [lng, lat]
        zoom: 12.22 // starting zoom
    });
    

7. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

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

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

10. Import the MapTiler elevation profile control

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

Learn more

You can also use elevation control via CDN. See the Elevation profile control example to use it as a CDN instead of an NPM module.

Related examples

Elevation profile control

Example

The elevation profile control for MapTiler SDK is a super easy way to show the elevation profile of any GeoJSON trace, with elevation data fueled by MapTiler Cloud.

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.

3D terrain map

Example

This tutorial demonstrates how to create a 3D terrain map and display it on a web page using MapTiler Cloud.