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.

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.

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

  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.


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

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


<div id="profileContainer"></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.


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

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

  1. Replace YOUR_MAPTILER_API_KEY_HERE with your own API key. Make sure to secure the key before you publish it.

  2. 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('load', () => {

      helpers.addPolyline(map, {
        data: YOUR_MAPTILER_DATASET_ID_HERE, //from a URL or a MapTiler Data UUID
        lineColor: '#a103fc', 
        outline: true, 
        outlineWidth: 1.5
      });

    });
  1. Create a marker and add it to the map.

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

      helpers.addPolyline(map, {
        data: YOUR_MAPTILER_DATASET_ID_HERE, //from a URL or a MapTiler Data UUID
        lineColor: '#a103fc', 
        outline: true, 
        outlineWidth: 1.5
      });

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

    });
  1. Import the MapTiler elevation profile control

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

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 customize options)
      const epc = new ElevationProfileControl({
        container: "profileContainer",
        visible: true,
        showButton: false,
        labelColor: "#FFF6",
        elevationGridColor: "#FFF1",
        tooltipTextColor: "#000b",
        tooltipBackgroundColor: "#eeea",
        profileLineColor: "#a103fc",
        profileBackgroundColor: "#a103fc11",
        crosshairColor: "#66f5",
        displayTooltip: true,
        unit: "imperial",
        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 example to use it as a CDN instead of an NPM module.

Show zoomed section in Elevation profile control

Zoomed section Elevation profile control

Examples

Display a zoomed-in section on the elevation profile.

Show the trace position with Elevation profile control

Show trace position Elevation profile control

Examples

Synchronize a moving map marker with elevation profile cursor.

Elevation profile control

Add elevation profile control

Examples

Show elevation profiles for GeoJSON traces using MapTiler.

Display a 3D terrain map

3D terrain map

Tutorials

Create and display 3D terrain maps on web pages.

Was this helpful?