Zona de acampada2 en esta rutaMirador con vistas3 en esta rutaFuente de agua potable2 en esta rutaRefugio de montaña1 en esta ruta
HTML + CSSInfo-bulles
Légende de carte qui met en évidence
Une carte de randonnée avec légende : au survol d’un symbole, sa signification apparaît et tous ceux du même type pulsent sur la carte.
Réglages
16px
1x
Code
<div class="uvq08-lgd"><div class="mp" aria-hidden="true"><svg viewBox="0 0 100 100" preserveAspectRatio="none"><path class="rv" d="M0 80C20 72 30 88 50 82S80 64 100 72"/><path class="tr" d="M18 32C26 22 34 16 40 18S44 36 46 44S58 38 63 34S80 24 86 26M46 44C50 50 52 54 56 56S66 66 72 70M46 44C38 54 32 62 27 72"/></svg><i class="sy k0" style="left:18%;top:32%;--k:#2f855a"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 19L12 5l9 14zM12 5v14M9 19l3-5 3 5"/></svg></i><i class="sy k0" style="left:72%;top:70%;--k:#2f855a"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 19L12 5l9 14zM12 5v14M9 19l3-5 3 5"/></svg></i><i class="sy k1" style="left:40%;top:18%;--k:#b45309"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="7" cy="15" r="3.5"/><circle cx="17" cy="15" r="3.5"/><path d="M10.5 15h3M4.5 12.5L7 6h3l.8 6M19.5 12.5L17 6h-3l-.8 6"/></svg></i><i class="sy k1" style="left:86%;top:26%;--k:#b45309"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="7" cy="15" r="3.5"/><circle cx="17" cy="15" r="3.5"/><path d="M10.5 15h3M4.5 12.5L7 6h3l.8 6M19.5 12.5L17 6h-3l-.8 6"/></svg></i><i class="sy k1" style="left:56%;top:56%;--k:#b45309"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="7" cy="15" r="3.5"/><circle cx="17" cy="15" r="3.5"/><path d="M10.5 15h3M4.5 12.5L7 6h3l.8 6M19.5 12.5L17 6h-3l-.8 6"/></svg></i><i class="sy k2" style="left:27%;top:72%;--k:#2563eb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.5c3.5 4.5 6 7.6 6 10.5a6 6 0 0 1-12 0c0-2.9 2.5-6 6-10.5z"/></svg></i><i class="sy k2" style="left:63%;top:34%;--k:#2563eb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.5c3.5 4.5 6 7.6 6 10.5a6 6 0 0 1-12 0c0-2.9 2.5-6 6-10.5z"/></svg></i><i class="sy k3" style="left:46%;top:44%;--k:#b91c1c"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 11l8-6.5 8 6.5M6 9.5V20h12V9.5M10 20v-5h4v5"/></svg></i></div><div class="lg" role="group" aria-label="Légende de la carte"><span class="wr lg0 pk"><button type="button" style="--k:#2f855a" aria-describedby="uvq08-lgd-0"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 19L12 5l9 14zM12 5v14M9 19l3-5 3 5"/></svg><span>Bivouac</span></button><span class="tt" role="tooltip" id="uvq08-lgd-0"><b>Aire de bivouac</b><span>2 sur ce parcours</span></span></span><span class="wr lg1"><button type="button" style="--k:#b45309" aria-describedby="uvq08-lgd-1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="7" cy="15" r="3.5"/><circle cx="17" cy="15" r="3.5"/><path d="M10.5 15h3M4.5 12.5L7 6h3l.8 6M19.5 12.5L17 6h-3l-.8 6"/></svg><span>Belvédère</span></button><span class="tt" role="tooltip" id="uvq08-lgd-1"><b>Belvédère</b><span>3 sur ce parcours</span></span></span><span class="wr lg2"><button type="button" style="--k:#2563eb" aria-describedby="uvq08-lgd-2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.5c3.5 4.5 6 7.6 6 10.5a6 6 0 0 1-12 0c0-2.9 2.5-6 6-10.5z"/></svg><span>Source</span></button><span class="tt" role="tooltip" id="uvq08-lgd-2"><b>Source d’eau potable</b><span>2 sur ce parcours</span></span></span><span class="wr lg3"><button type="button" style="--k:#b91c1c" aria-describedby="uvq08-lgd-3"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 11l8-6.5 8 6.5M6 9.5V20h12V9.5M10 20v-5h4v5"/></svg><span>Refuge</span></button><span class="tt" role="tooltip" id="uvq08-lgd-3"><b>Refuge de montagne</b><span>1 sur ce parcours</span></span></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 sur papier avec courbes de niveau, rivière, taches de forêt et un sentier en pointillés jalonné d’aires de bivouac, de belvédères, de sources et d’un refuge. La légende en dessous est une rangée de puces : au survol ou au focus, une infobulle nomme l’élément et le compte, pendant que ses symboles grossissent sur la carte et que les autres passent au gris.
La couleur principale trace le sentier et l’anneau de focus, la secondaire le ton du papier. Chaque entrée porte sa couleur et son icône, donc ajouter des loueurs de vélos, des parkings ou des arrêts de bus ne demande qu’un élément de plus avec ses positions.