Höhenprofil der Route
Fahre das Höhenprofil einer Route mit Finger, Maus oder Pfeiltasten ab: Der Tooltip nennt Höhe, Kilometer und Steigung.
Einstellungen
Code
<div class="uvq08-elv" style="--p:0.650;--y:0.2981"><div class="hd"><span class="tx"><b>Aufstieg zum Peñalara</b><span>8 km · +918 m · 3 h 10 min</span></span><svg class="rt" viewBox="0 0 60 60" aria-hidden="true"><polyline points="8,57 10.4,55.8 12.8,54.5 15,53 17.1,51.4 18.9,49.7 20.5,47.9 21.7,46 22.6,44 23.3,42.1 23.7,40.1 23.8,38.2 23.8,36.3 23.6,34.5 23.3,32.7 23.1,31.2 22.9,29.7 22.9,28.4 23.1,27.2 23.5,26.2 24.1,25.3 25.1,24.6 26.4,24 27.9,23.5 29.8,23.1 31.8,22.8 34.1,22.6 36.5,22.4 38.9,22.1 41.3,21.9 43.7,21.6 45.9,21.2 48,20.7 49.8,20.1 51.3,19.3 52.5,18.4 53.4,17.4 54,16.2 54.4,14.9 54.5,13.4 54.5,11.8"/><circle class="a" cx="8" cy="57" r="2.6"/><circle class="b" cx="54.5" cy="11.8" r="2.6"/><circle class="me" cx="34.1" cy="22.6" r="3.2"/></svg></div><div class="pf pk" role="slider" tabindex="0" aria-label="Höhenprofil" aria-valuemin="0" aria-valuemax="8" aria-valuenow="5.2" aria-valuetext="km 5,2, 2.258 m" data-e="1510,1527,1549,1571,1595,1618,1641,1663,1684,1706,1727,1750,1774,1799,1827,1858,1890,1925,1962,2001,2040,2079,2118,2156,2192,2227,2258,2287,2313,2337,2357,2376,2392,2406,2419,2423,2426,2428,2427,2425,2421" data-r="8,57 10.4,55.8 12.8,54.5 15,53 17.1,51.4 18.9,49.7 20.5,47.9 21.7,46 22.6,44 23.3,42.1 23.7,40.1 23.8,38.2 23.8,36.3 23.6,34.5 23.3,32.7 23.1,31.2 22.9,29.7 22.9,28.4 23.1,27.2 23.5,26.2 24.1,25.3 25.1,24.6 26.4,24 27.9,23.5 29.8,23.1 31.8,22.8 34.1,22.6 36.5,22.4 38.9,22.1 41.3,21.9 43.7,21.6 45.9,21.2 48,20.7 49.8,20.1 51.3,19.3 52.5,18.4 53.4,17.4 54,16.2 54.4,14.9 54.5,13.4 54.5,11.8"><svg viewBox="0 0 200 80" preserveAspectRatio="none" aria-hidden="true"><path class="ar" d="M0 80 L0 76.0 L5 74.8 L10 73.3 L15 71.7 L20 70.1 L25 68.5 L30 66.9 L35 65.3 L40 63.9 L45 62.3 L50 60.9 L55 59.3 L60 57.6 L65 55.9 L70 53.9 L75 51.7 L80 49.5 L85 47.1 L90 44.5 L95 41.8 L100 39.1 L105 36.3 L110 33.6 L115 31.0 L120 28.5 L125 26.0 L130 23.9 L135 21.8 L140 20.0 L145 18.3 L150 16.9 L155 15.6 L160 14.5 L165 13.5 L170 12.6 L175 12.3 L180 12.1 L185 12.0 L190 12.1 L195 12.2 L200 12.5 L200 80Z"/><path class="li" d="M0 76.0 L0 76.0 L5 74.8 L10 73.3 L15 71.7 L20 70.1 L25 68.5 L30 66.9 L35 65.3 L40 63.9 L45 62.3 L50 60.9 L55 59.3 L60 57.6 L65 55.9 L70 53.9 L75 51.7 L80 49.5 L85 47.1 L90 44.5 L95 41.8 L100 39.1 L105 36.3 L110 33.6 L115 31.0 L120 28.5 L125 26.0 L130 23.9 L135 21.8 L140 20.0 L145 18.3 L150 16.9 L155 15.6 L160 14.5 L165 13.5 L170 12.6 L175 12.3 L180 12.1 L185 12.0 L190 12.1 L195 12.2 L200 12.5"/></svg><i class="vl" aria-hidden="true"></i><i class="dt" aria-hidden="true"></i><span class="tt md" aria-hidden="true"><b>2.258 m</b><span class="km">km 5,2</span><span class="sl">+16 %</span></span></div><div class="ax" aria-hidden="true"><span>0</span><span>4 km</span><span>8 km</span></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Tooltips
Alle ansehen: TooltipsWofür du ihn nutzen kannst
Eine Wanderkarte mit SVG-Höhenprofil und kleiner Routenkarte in der Ecke. Fährst du über das Profil, folgen dir eine gestrichelte Linie, ein Punkt und ein Tooltip mit Höhe, Kilometer und Steigung, je nach Steilheit grün, gelb oder rot, während ein oranger Marker die Route auf der Karte entlangläuft. Das Profil ist ein ARIA-Slider und reagiert auch auf die Pfeiltasten.
Die Hauptfarbe zeichnet Linie, Fläche und Route, die Zweitfarbe tönt die Karte. Ersetze die Höhenwerte in data-e und die Routenpunkte in data-r durch Messpunkte aus deinem GPX, die Zahlen erscheinen im Format der Seitensprache.