Profil altimétrique du parcours
Parcours le profil d’un itinéraire au doigt, à la souris ou aux flèches : l’infobulle donne altitude, kilomètre et pente.
Réglages
Code
<div class="uvq08-elv" style="--p:0.650;--y:0.2981"><div class="hd"><span class="tx"><b>Montée au 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="Profil altimétrique" 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 pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Info-bulles
Voir tout : Info-bullesOù l’utiliser
Une carte de randonnée avec un profil altimétrique en SVG et une petite carte du parcours dans le coin. En glissant sur le profil, un repère en pointillés, un point et une infobulle te suivent avec l’altitude, le kilomètre et la pente, en vert, ambre ou rouge selon la raideur, pendant qu’un marqueur orange avance sur la carte. Le profil est un slider ARIA.
La couleur principale trace la ligne, l’aire et le parcours, la secondaire teinte la carte. Remplace les altitudes de data-e et les points de data-r par les relevés de ton propre GPX, et les nombres s’afficheront au format de la langue de la page.