Maptoolkit provides a Javascript utility class, which creates an elevation-profile. This class uses the route-enhancement API internally and generates a elevation-profile either in the map, or besides the map. For more infomation about the ElevationProfile class go to the API documentation
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://static.maptoolkit.net/css/maplibre-gl.css" />
<link rel="stylesheet" href="https://static.maptoolkit.net/rapidapi/v1.1/elevation.css" />
<style>
body { width: 100%; height: 100%; padding: 0; margin: 0; }
#map { width: 100%; height: 100%; }
#profile { position: absolute; bottom: 0; right: 0; width: 500px; margin: 0 10px 30px 0; z-index: 999; }
#profile .mtk-elevation-profile { background: #ffffff; box-shadow: 0 0 15px #68686880; border-radius: 6px; }
#profile .mtk-elevation-curve-stroke { stroke: #303f7e; stroke-width: 1rem; stroke-opacity: 1; }
#profile .mtk-elevation-curve-fill { fill: #303f7e; }
#profile .mtk-elevation-curve-bar { stroke: #fa3f38; }
#profile .mtk-elevation-section { fill: rgba(250, 63, 56, 0.3); }
</style>
</head>
<body>
<div id="map"></div>
<div id="profile"></div>
<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
<script src="https://static.maptoolkit.net/rapidapi/v1.1/elevation.js?rapidapi-key=your-api-key"></script>
<script>
// Route coordinates
let polyline = [
[11.458077, 47.259163], [11.458337, 47.258754], [11.457979, 47.258611],
[11.457556, 47.258567], [11.456872, 47.258058], [11.456416, 47.257937],
[11.456319, 47.257837], [11.456384, 47.257638], [11.455895, 47.257362],
[11.455407, 47.257307], [11.454625, 47.257318], [11.454235, 47.257196],
[11.454121, 47.256544], [11.454235, 47.255826], [11.454511, 47.255473],
[11.454544, 47.255285], [11.454544, 47.255152], [11.454886, 47.254953],
[11.455097, 47.254876], [11.455097, 47.254843], [11.454495, 47.254953],
[11.454153, 47.254169], [11.452851, 47.253240], [11.450978, 47.252898],
[11.450571, 47.252666], [11.450083, 47.252279], [11.449057, 47.252012],
[11.448096, 47.251890], [11.447429, 47.251503],
];
// Initialize MapLibreGL map
let map = new maplibregl.Map({
container: "map",
style: "https://static.maptoolkit.net/rapidapi/styles/terrain.json",
center: [11.452883, 47.255333],
zoom: 14,
});
map.once("load", () => {
// Add route polyline to map
map.addLayer({
id: "route",
type: "line",
source: {
type: "geojson",
data: {
type: "Feature",
geometry: {
type: "LineString",
coordinates: polyline,
},
},
},
layout: {
"line-join": "round",
"line-cap": "round",
},
paint: {
"line-color": "#2a3561",
"line-width": 5,
},
});
// Add empty polyline to map for elevation highlighting
map.addLayer({
id: "highlight",
type: "line",
source: {
type: "geojson",
data: {
type: "Feature",
geometry: {
type: "LineString",
coordinates: [],
},
},
},
layout: {
"line-join": "round",
"line-cap": "round",
},
paint: {
"line-color": "#fa3f38",
"line-width": 5,
},
});
// Create marker for elevation position
let $img = document.createElement("img");
$img.src = "https://static.maptoolkit.net/sprites/maptoolkit/marker.svg";
$img.width = 29;
$img.height = 30;
let marker = new maplibregl.Marker({
element: $img,
anchor: "bottom",
}).setLngLat([0, 0]);
// Create elevation profile and add to DOM
let elevation = new MTK.ElevationProfile().addTo("profile").setLngLats(polyline);
elevation.on("mousemove", (ev) => {
!marker._map && marker.addTo(map);
marker.setLngLat(ev.lngLat);
});
elevation.on("mouseout", (ev) => {
marker._map && marker.remove();
});
elevation.on("highlight", (ev) => {
map.getSource("highlight").setData({
type: "Feature",
geometry: {
type: "LineString",
coordinates: ev.lngLats,
},
});
});
});
</script>
</body>
</html>