Query elevation directly from TerrainRGB
This example shows how you can calculate length of line and query elevation from custom TerrainRGB DEM dataset.
<!doctype html>
<html lang="en">
<head>
<title>Query elevation directly from TerrainRGB</title>
<meta
property="og:description"
content="This example shows how you can calculate length of line and query elevation from custom TerrainRGB DEM dataset."
/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
html,
body,
#map {
height: 100%;
}
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/@watergis/maplibre-gl-terradraw@1.3.2/dist/maplibre-gl-terradraw.umd.js"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@watergis/maplibre-gl-terradraw@1.3.2/dist/maplibre-gl-terradraw.css"
/>
<div id="map"></div>
<script>
const map = new maplibregl.Map({
container: 'map',
style: {
version: 8,
name: 'Rwanda DEM',
sources: {
bing: {
type: 'raster',
tiles: [
'https://ecn.t0.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=1',
'https://ecn.t1.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=1',
'https://ecn.t2.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=1',
'https://ecn.t3.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=1',
'https://ecn.t4.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=1',
'https://ecn.t5.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=1',
'https://ecn.t6.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=1',
'https://ecn.t7.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=1'
],
maxzoom: 18,
attribution:
'Map tiles by <a target="_top" rel="noopener" href="http://bing.com">Microsoft</a>, under <a target="_top" rel="noopener" href="https://www.microsoft.com/en-us/maps/product">Microsoft Bing Maps Platform APIs Terms Of Use</a>'
},
},
glyphs: 'https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf',
layers: [
{
id: 'bingaerial',
type: 'raster',
source: 'bing',
minzoom: 0,
layout: {
visibility: 'visible'
}
}
]
},
center: [29.915923665876335, -2.00623424231469],
zoom: 8,
maxPitch: 85,
});
const drawControl = new MaplibreTerradrawControl.MaplibreMeasureControl({
modes: ['point', 'linestring', 'delete', 'download'],
open: true,
// enable the flag to compute elevation
computeElevation: true,
// set your own terrainRGB or terrarium source.
// PNG or WEBP is supported.
terrainSource: {
url: 'https://wasac.github.io/rw-terrain-webp/tiles/{z}/{x}/{y}.webp',
tileSize: 512,
minzoom: 5,
maxzoom: 15,
encoding: 'mapbox'
},
});
map.addControl(drawControl, 'top-left');
map.addControl(new maplibregl.NavigationControl({
visualizePitch: true,
showCompass: true
}), 'bottom-right');
map.addControl(new maplibregl.GlobeControl(), 'bottom-right');
</script>
</body>
</html>