Table Des Matières
Introduction:
Dans notre premier article concernant Leaflet, on a vu comment ajouter une carte à notre page Web. Celui-ci sera dédié au report des points (Markers) sur votre carte avec les différentes options qu’on peut lui ajouter (popup,style…). Si c’est la première fois que vous utiliser cette bibliothèque n’hésitez pas de consulter l’article précédent:
Ajouter votre premier point:
Pour ce faire, on va utiliser tout simplement la fonction L.marker([lat,long]) et l’ajouter à la carte avec la fonction addTo(id):
Dans notre exemple on a pris les coordonnées de la ville de Fès et voilà comment ca va apparaître sur votre carte:
Ajouter un Popup à votre point:
Le point qu’on a ajouté ne contient aucune information qui le définit. Donc il est nécessaire de lui ajouter un popup et pour le faire il suffit d’utiliser la fonction suivante: bindPopup()
Ajouter ceci à votre code:
Cliquez sur votre marqueur et vous aurez le résultat suivant:
Le contenu du popup peut être un texte, un code HTML, une image …, si vous voulez que ceci s’affiche au chargement de page vous pouvez faire ainsi ajouter la fonction openPopup().
Ici on a aussi changé le zoom à 6 pour que le marqueur soit apparent dès le chargement de la page. Maintenant vous n’avez qu’actualiser!
Quelques options pour votre marqueur:
Sur Leaflet les marqueurs ont plusieurs options, la forme générale de ces derniers est la suivante:
var nomPt= L.marker([lat, long],
{ option1: true, // booléen
option2: 'expression', // un string
option3: 1234 // un nombre
}
)
.addTo(map);
Il y a plusieurs options qu’on peut utiliser, Mais dans cette article on va se contenter de 3 options:
- draggable: (true ou false) permet de donner la possibilité de déplacer le marqueur;
- icon: ajouter votre propre icône au marqueur (celle a aussi ces propres options);
- opacity: (0 à 1) changer la transparence du marqueur sur la carte;
Les autres options vous pouvez les voir dans la documentation sur le site officiel:
On modifiera notre script:
Et voilà le résultat, Vous pouvez déplacer votre marqueur où vous voulez:
Conclusion:
Vous avez vu dans cette article comment ajouter un marqueur à une carte LeafletJS, lui joindre un popup et changer ces options. Rendez-vous la prochaine fois avec d’autres intéressantes possibilités fournies par cette immense bibliothèque.
