Examples
Elevation Profile with MapLibre GL
This example shows a route on a MapLibre GL map with an interactive elevation profile. Hovering over the profile highlights the corresponding segment on the map and shows a position marker.
MTK.apiKey = "YOUR_API_KEY";
const 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],
];
const map = new maplibregl.Map({
container: "map",
style: "https://static.maptoolkit.net/styles/toursprung/terrain.json?api_key=toursprung",
center: [11.452883, 47.255333],
zoom: 14,
});
map.once("load", () => {
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 },
});
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 },
});
const img = document.createElement("img");
img.src = "https://static.maptoolkit.net/sprites/toursprung/marker.svg";
img.width = 29;
img.height = 30;
const marker = new maplibregl.Marker({ element: img, anchor: "bottom" }).setLngLat([0, 0]);
const elevation = new MTK.ElevationProfile().addTo("profile").setLngLats(polyline);
elevation.on("mousemove", (ev) => {
!marker._map && marker.addTo(map);
marker.setLngLat(ev.lngLat);
});
elevation.on("mouseout", () => {
marker._map && marker.remove();
});
elevation.on("highlight", (ev) => {
map.getSource("highlight").setData({
type: "Feature",
geometry: { type: "LineString", coordinates: ev.lngLats },
});
});
});<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4.1.3/dist/maplibre-gl.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4.1.3/dist/maplibre-gl.css" />
<link rel="stylesheet" href="https://static.maptoolkit.net/mtk/apis/v1.1/elevation.css" />
<style>
html, body { width: 100%; height: 100%; margin: 0; padding: 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: #fff; 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://static.maptoolkit.net/mtk/apis/v1.1/elevation.js?api_key=toursprung"></script>
<script>
MTK.apiKey = "YOUR_API_KEY";
const 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],
];
const map = new maplibregl.Map({
container: "map",
style: "https://static.maptoolkit.net/styles/toursprung/terrain.json?api_key=toursprung",
center: [11.452883, 47.255333],
zoom: 14,
});
map.once("load", () => {
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 },
});
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 },
});
const img = document.createElement("img");
img.src = "https://static.maptoolkit.net/sprites/toursprung/marker.svg";
img.width = 29;
img.height = 30;
const marker = new maplibregl.Marker({ element: img, anchor: "bottom" }).setLngLat([0, 0]);
const elevation = new MTK.ElevationProfile().addTo("profile").setLngLats(polyline);
elevation.on("mousemove", (ev) => {
!marker._map && marker.addTo(map);
marker.setLngLat(ev.lngLat);
});
elevation.on("mouseout", () => {
marker._map && marker.remove();
});
elevation.on("highlight", (ev) => {
map.getSource("highlight").setData({
type: "Feature",
geometry: { type: "LineString", coordinates: ev.lngLats },
});
});
});
</script>
</body>
</html>Elevation Profile with Leaflet
This example shows a route on a Leaflet map with an interactive elevation profile. Hovering over the profile highlights the corresponding segment on the map and shows a position marker.
The elevation profile uses the MTK.ElevationProfile JavaScript class, loaded from the Maptoolkit CDN.
MTK.apiKey = "YOUR_API_KEY";
const polyline = [
[47.259163, 11.458077], [47.258754, 11.458337], [47.258611, 11.457979],
[47.258567, 11.457556], [47.258058, 11.456872], [47.257937, 11.456416],
[47.257837, 11.456319], [47.257638, 11.456384], [47.257362, 11.455895],
[47.257307, 11.455407], [47.257318, 11.454625], [47.257196, 11.454235],
[47.256544, 11.454121], [47.255826, 11.454235], [47.255473, 11.454511],
[47.255285, 11.454544], [47.255152, 11.454544], [47.254953, 11.454886],
[47.254876, 11.455097], [47.254843, 11.455097], [47.254953, 11.454495],
[47.254169, 11.454153], [47.253240, 11.452851], [47.252898, 11.450978],
[47.252666, 11.450571], [47.252279, 11.450083], [47.252012, 11.449057],
[47.251890, 11.448096], [47.251503, 11.447429],
];
const map = L.map("map").setView([47.255333, 11.452883], 15);
L.tileLayer(`https://rtc-cdn.maptoolkit.net/rtc/toursprung-terrain/{z}/{x}/{y}{ratio}.png?api_key=${MTK.apiKey}`, {
ratio: L.Browser.retina ? "@2x" : "",
maxZoom: 18,
attribution: "© <a href='https://www.maptoolkit.com'>Maptoolkit</a> © <a href='https://www.openstreetmap.org/copyright'>OSM</a>",
}).addTo(map);
new L.Polyline(polyline, { color: "#2a3561", weight: 5 }).addTo(map);
const highlight = new L.Polyline([], { color: "#fa3f38", weight: 5 }).addTo(map);
const marker = new L.Marker([0, 0], {
icon: new L.Icon({
iconUrl: "https://static.maptoolkit.net/sprites/toursprung/marker.svg",
iconSize: [30, 29],
iconAnchor: [15, 29],
}),
});
const elevation = new MTK.ElevationProfile()
.addTo("profile")
.setLngLats(polyline.map(([lat, lng]) => [lng, lat]));
elevation.on("mousemove", (ev) => {
!marker._map && marker.addTo(map);
marker.setLatLng([ev.lngLat[1], ev.lngLat[0]]);
});
elevation.on("mouseout", () => { marker._map && marker.remove(); });
elevation.on("highlight", (ev) => {
highlight.setLatLngs(ev.lngLats.map(([lng, lat]) => [lat, lng]));
});<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
<link rel="stylesheet" href="https://static.maptoolkit.net/mtk/apis/v1.1/elevation.css" />
<style>
html, 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: #fff; 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/leaflet@1.9.3/dist/leaflet.js"></script>
<script src="https://static.maptoolkit.net/mtk/apis/v1.1/elevation.js?api_key=YOUR_API_KEY"></script>
<script>
MTK.apiKey = "YOUR_API_KEY";
const polyline = [
[47.259163, 11.458077], [47.258754, 11.458337], [47.258611, 11.457979],
[47.258567, 11.457556], [47.258058, 11.456872], [47.257937, 11.456416],
[47.257837, 11.456319], [47.257638, 11.456384], [47.257362, 11.455895],
[47.257307, 11.455407], [47.257318, 11.454625], [47.257196, 11.454235],
[47.256544, 11.454121], [47.255826, 11.454235], [47.255473, 11.454511],
[47.255285, 11.454544], [47.255152, 11.454544], [47.254953, 11.454886],
[47.254876, 11.455097], [47.254843, 11.455097], [47.254953, 11.454495],
[47.254169, 11.454153], [47.253240, 11.452851], [47.252898, 11.450978],
[47.252666, 11.450571], [47.252279, 11.450083], [47.252012, 11.449057],
[47.251890, 11.448096], [47.251503, 11.447429],
];
const map = L.map("map").setView([47.255333, 11.452883], 15);
L.tileLayer(`https://rtc-cdn.maptoolkit.net/rtc/toursprung-terrain/{z}/{x}/{y}{ratio}.png?api_key=${MTK.apiKey}`, {
ratio: L.Browser.retina ? "@2x" : "",
maxZoom: 18,
attribution: "© <a href='https://www.maptoolkit.com'>Maptoolkit</a> © <a href='https://www.openstreetmap.org/copyright'>OSM</a>",
}).addTo(map);
new L.Polyline(polyline, { color: "#2a3561", weight: 5 }).addTo(map);
const highlight = new L.Polyline([], { color: "#fa3f38", weight: 5 }).addTo(map);
const marker = new L.Marker([0, 0], {
icon: new L.Icon({
iconUrl: "https://static.maptoolkit.net/sprites/toursprung/marker.svg",
iconSize: [30, 29],
iconAnchor: [15, 29],
}),
});
const elevation = new MTK.ElevationProfile()
.addTo("profile")
.setLngLats(polyline.map(([lat, lng]) => [lng, lat]));
elevation.on("mousemove", (ev) => {
!marker._map && marker.addTo(map);
marker.setLatLng([ev.lngLat[1], ev.lngLat[0]]);
});
elevation.on("mouseout", () => { marker._map && marker.remove(); });
elevation.on("highlight", (ev) => {
highlight.setLatLngs(ev.lngLats.map(([lng, lat]) => [lat, lng]));
});
</script>
</body>
</html>