alaryck a écrit :
je cherche en fait a placer plusieurs points sur une carte (par exemple placer Paris Lyon Rennes et Marseille) j'aimerais savoir si il me faut une div par point ou bien si je peux tous les regrouper sous une grande div ?
pour autant que je comprenne ce que cela signifie, c'est semblable à ce que j'ai fait dans
http://osirisnet.net/carte/carte_01.htm?fr
Le code:
<div id="map">
<img id="mapBackground" src="egypt.png" alt="">
<div class="mapPoint" style="top:7.78%;left:33.58%;">
<img src="bullet_gray.png" alt="">
<div class="S">Alexandrie</div>
</div>
.......................................
.......................................
.......................................
.......................................
.......................................
</div>
avec
#map {
position: relative; /* pour pouvoir contenir des éléments superposés en absolute */
float:right; /* dans cette page, la carte est à droite de la légende */
width:65%; /* largeur de la carte par rapport à son conteneur */
border:2px solid #990000;
border-radius:1em;
}
#mapBackground{width:100%;border-radius:1em;} /* image du fond de carte */
.mapPoint { /* un point sur la carte */
position:absolute;
z-index:100; /* au dessus du fond de carte */
width:1px;
height:1px;
}
.mapPoint > img { /* le petit rond qui matérialise le point */
position:absolute;
top:0; /* il est positionné sur le point */
left:0;
transform: translate(-50%, -50%); /* et décalé pour être centré sur le point */
}
.mapPoint > img[src*="bullet_"] {height:0.5em;} /* la hauteur de l'image */
Explication:
- une <div> contenant toute la carte
- une image de fond de carte
- une <div> par point sur la carte
La difficulté est de positionner les points sur la carte.
Pour ce faire, j'ai défini chaque point comme un objet JavaScript, contenant essentiellement les coordonnées géographiques du point, son nom et quelques informations supplémentaires.
Par ailleurs j'ai défini les coordonnées géographiques du coin en haut à gauche (NW) et du point en bas à droite (SE)
Le script calcule la position du pont en % de la largeur et de la hauteur de la carte et génère le HTML de chaque point par de simples règles de 3.
Modifié par PapyJP (14 Jun 2017 - 10:42)