Leaflet - Utilisation avancée

Ce tutoriel est dédié à la présentation de fonctionnalités avancées de la bibliothèque Leaflet, il est dédié aux personnes connaissant déjà la bibliothèque. Pour ceux qui ne la connaissent pas et qui voudraient suivre ce tuto je vous conseille d’abord de suivre le tutoriel d’Eskimon .

Dans ce tuto nous allons apprendre à créer des interfaces utilisateur, à modifier les fonds de plans, à créer des marqueurs personnalisés et à ajouter des tooltips (texte) afin de créer des cartes interactives personnalisées.

Création d'une interface personnalisée

1. Afficher une carte
2. Créer une interface
3. Positionnement
4. Afficher un bouton
5. Ajouter une icône
6. Gerer les actions sur notre bouton

Gérer les fonds de plans

1. Qu'est ce qu'un fond de plan
2. Utiliser un fond de plan satelite
3. Action de changement de fond de plan

Ajouter de marqueurs

1. Afficher un marqueur basique
2. Afficher un marqueur avec une icône personnalisées
3. Ajout d'un marqueur au clic
4. Marqueur HTML et plugins

Ajouter de tooltips

1. Créer un tooltip
2. Modifier les options de notre toolitp
3. Editer le html et css de notre tooltip

Filtrer des données

1. Charger des données GeoJSON
2. Créer l'interface
3. Filtrer les données
4. Résultat et code complet

Je vous ai présenté les éléments les plus importants à mes yeux de Leaflet mais il en existe plein d’autres notamment à travers les très nombreux plugins créés par la communauté.

J’espère que cela vous aidera dans vos projets et que cela donnera lieu à de superbes cartes.