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.

  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%;
     }
     
  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. 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.
  5. Load the map with the style. Include the following code in your JavaScript.

    
     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
     });
     
  6. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

  7. Add a GeoJSON trace to the map. Check out the How to Upload GeoJSON to MapTiler Cloud tutorial. Download the Pedraforca hiking sample data

  8. Import the MapTiler elevation profile control

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

An extension of MapLibre GL JS