Integrate TopoTailor in MapLibre
This guide is focused on integration, not marketing. Use the hosted DEM tiles to render hillshade, 3D terrain, and optional hypsometric coloring in your own MapLibre apps.
Tile Endpoint
Hosted DEM endpoint. Add your API key query param.
https://world-elevation-maps.b-cdn.net/{z}/{x}/{y}.webp?api-key=YOUR_API_KEY
What You Get
- MapLibre-compatible DEM tiles
- Client-side hillshading and terrain support
- Good compression for web delivery
- Incremental updates with additional source coverage
1) Quick Start (MapLibre)
Minimal setup for terrain + hillshade. This is the fastest path for new integration.
import maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";
const DEM_URL =
"https://world-elevation-maps.b-cdn.net/{z}/{x}/{y}.webp?api-key=YOUR_API_KEY";
const map = new maplibregl.Map({
container: "map",
center: [11.25752, 47.07297],
zoom: 12,
pitch: 60,
style: {
version: 8,
sources: {
dem: {
type: "raster-dem",
minzoom: 0,
maxzoom: 15,
tiles: [DEM_URL],
tileSize: 512
}
},
layers: [
{
id: "hillshade-layer",
type: "hillshade",
source: "dem",
paint: {
"hillshade-method": "igor",
"hillshade-illumination-direction": 315,
"hillshade-illumination-altitude": 40,
"hillshade-shadow-color": "rgba(0, 12, 30, 0.88)",
"hillshade-highlight-color": "rgba(255, 255, 255, 0.2)",
"hillshade-accent-color": "#000000",
"hillshade-exaggeration": 0.45
}
}
],
terrain: {
source: "dem",
exaggeration: 0.8
}
}
});
map.addControl(new maplibregl.NavigationControl());2) Read Elevation at Cursor
This pattern is used in the demo and is useful for profile tools, hover tooltips, and analysis UIs.
map.on("mousemove", (e) => {
const elevation = (map.queryTerrainElevation(e.lngLat) || 0).toFixed(1);
document.getElementById("elevation").innerText = `${elevation} m`;
});3) Optional: Hypsometric Color Relief
If your MapLibre runtime supports color-relief, you can render elevation color ramps like the demo.
Layer example
{
id: "hypsometric",
type: "color-relief",
source: "dem",
paint: {
"color-relief-opacity": 1,
"color-relief-color": [
"interpolate",
["linear"],
["elevation"],
-10000, "rgb(0, 0, 81)",
-40, "rgb(0, 174, 162)",
0, "rgb(211, 210, 185)",
6000, "rgb(198, 231, 247)"
]
}
}Integration Checklist
raster-dem source with tileSize: 512.
?api-key=... query param.
minzoom: 0 and maxzoom: 15.
Common Issues
Map does not load
Check endpoint URL and API key query parameter first. Then open browser devtools and verify tile requests return 200.