Query elevation from Maplibre Terrain
This example shows how you can calculate length of line and query elevation from maplibre raster-dem terrain source.
<!doctype html>
<html lang="en">
<head>
<title>Query elevation from Maplibre Terrain</title>
<meta
property="og:description"
content="This example shows how you can calculate length of line and query elevation from maplibre raster-dem terrain source."
/>
<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>'
},
// Add your own raster-dem source either terrain-rgb or terrarium to style for measure control
'rwanda-dem': {
type: 'raster-dem',
attribution: "©<a href='http://wasac.rw'>WASAC,Ltd.</a>",
tiles: ['https://wasac.github.io/rw-terrain-webp/tiles/{z}/{x}/{y}.webp'],
tileSize: 512,
minzoom: 5,
maxzoom: 15,
bounds: [28.86, -2.84, 30.90, -1.05],
}
},
// make sure you enable raster-dem source, otherwise, elevation cannot be queried.
terrain: {
source: 'rwanda-dem',
exaggeration: 1
},
glyphs: 'https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf',
layers: [
{
id: 'bingaerial',
type: 'raster',
source: 'bing',
minzoom: 0,
layout: {
visibility: 'visible'
}
},
{
id: 'hillshade',
type: 'hillshade',
source: 'rwanda-dem',
paint: {
'hillshade-shadow-color': 'hsl(39, 21%, 33%)',
'hillshade-illumination-direction': 315,
'hillshade-exaggeration': 1
}
}
]
},
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,
terrainSource: undefined,
});
map.addControl(drawControl, 'top-left');
map.addControl(new maplibregl.NavigationControl({
visualizePitch: true,
showCompass: true
}), 'bottom-right');
map.addControl(new maplibregl.GlobeControl(), 'bottom-right');
map.addControl(new maplibregl.TerrainControl({ source: 'rwanda-dem' }), 'bottom-right');
</script>
</body>
</html>