Show elevation on click

How to get the elevation in meters from any location. MapTiler SDK elevation functions provide convenient access to get the elevation in meters from any location. It’s possible to look up and compute the elevation from: a single location, provide a batch of points, a GeoJSON LineString or a GeoJSON MultiLineString.

^{Click on the map to get the elevation at this location}


npm install --save @maptiler/sdk

main.js

import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';

config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
    container: 'map',
    style: MapStyle.HYBRID,
    center: [-70.02454, -33.81356],
    zoom: 12
});

map.on('load', function () {
    map.on('click', async function (ev) {
      const {lng, lat} = ev.lngLat;
      //get the elevation at a given position
      const elevatedPosition = await maptilersdk.elevation.at([lng, lat]);
      const popup = new maptilersdk.Popup()
        .setLngLat([lng, lat])
        .setHTML(`<h2>Elevation</h2>
        <h3>${elevatedPosition[2].toFixed(0)} mts</h3>`)
        .addTo(map);
    });
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Show elevation on click | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

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

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elevation at point</title>
<script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
<link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
<style>
  body {margin: 0; padding: 0;}
  #map {position: absolute; top: 0; bottom: 0; width: 100%;}
</style>
</head>
<body>

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

<script>
    maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    const map = new maptilersdk.Map({
        container: 'map',
        style: maptilersdk.MapStyle.HYBRID,
        center: [-70.02454, -33.81356],
        zoom: 12
    });

    map.on('load', function () {
        map.on('click', async function (ev) {
          const {lng, lat} = ev.lngLat;
          //get the elevation at a given position
          const elevatedPosition = await maptilersdk.elevation.at([lng, lat]);
          const popup = new maptilersdk.Popup()
            .setLngLat([lng, lat])
            .setHTML(`<h2>Elevation</h2>
            <h3>${elevatedPosition[2].toFixed(0)} mts</h3>`)
            .addTo(map);
        });
    });
</script>
</body>
</html>