Tutoriel Leaflet : session 5

13 mai 202513 mai 2025 Atilio Francois No Comments

En cours de chargement…

Cela prend trop de temps ?

Recharger le document

Ouvrir dans un nouvel onglet

Contenu

Diapo 1 : Principaux événements dans Leaflet

Dans Leaflet, les événements jouent un rôle clé pour rendre les cartes interactives et réactives. En effet, Leaflet permet de gérer un large éventail d’événements qui se produisent sur la carte, les couches ou les objets spécifiques (comme les marqueurs ou les polygones). Ces événements permettent de réagir aux actions de l’utilisateur, telles que les clics, les déplacements de la souris, les zooms, les changements de vue, etc. Voici un développement des principaux événements dans Leaflet, utilisés pour ajouter de l’interactivité à vos cartes.

’click’ – clic sur un élément ou sur la carte

’mouseover’ / ‘mouseout’ – survol de la souris

’moveend’, ‘zoomend’ – fin d’un déplacement ou d’un zoom

Diapo 2 : Événements de la carte

Les événements de la carte (ou événements globaux) concernent l’ensemble de la carte et sont souvent utilisés pour capter des actions comme les changements de vue, le zoom, ou les interactions avec la carte.

a. zoom et zoomend

•zoom : Cet événement se déclenche chaque fois que le niveau de zoom de la carte change, qu’il soit dû à un zoom manuel ou programmatique.

•zoomend : Cet événement est déclenché une fois que le zoom est complètement terminé.

b. move et moveend

•move : Cet événement se déclenche chaque fois que la carte est déplacée (lorsque la vue de la carte change).

•moveend : Cet événement est déclenché lorsque le déplacement de la carte est terminé.

c. click

•click : Cet événement est déclenché lorsque l’utilisateur clique sur la carte (dans n’importe quelle zone de la carte).

d. dblclick

•dblclick : Cet événement se déclenche lorsqu’un utilisateur effectue un double clic sur la carte. Cela peut être utilisé pour, par exemple, effectuer un zoom avant.

Diapo 3 : Événements sur les couches (Layers)

Les événements spécifiques aux couches permettent de capter des interactions avec des éléments comme des marqueurs, des polygones ou des cercles.

a. add et remove

•add : Cet événement se déclenche lorsqu’une couche est ajoutée à la carte.

•remove : Cet événement est déclenché lorsqu’une couche est supprimée de la carte.

b. click sur une couche

•click : Lorsqu’un utilisateur clique sur un élément spécifique de la couche, comme un marqueur, un polygone ou un cercle, cet événement est déclenché.

c. mouseover et mouseout

•mouseover : Cet événement est déclenché lorsque l’utilisateur survole un élément avec la souris (comme un marqueur, un polygone ou une ligne).

•mouseout : Cet événement est déclenché lorsque l’utilisateur quitte un élément avec la souris.

d. drag et dragend

•drag : Cet événement se déclenche lorsque l’utilisateur fait glisser un élément (comme un marqueur) sur la carte.

•dragend : Cet événement est déclenché lorsqu’un élément qui a été déplacé s’arrête.

Diapo 4 : Événements de géométrie (pour les objets de données géospatiales)

Les événements liés aux objets géospatiaux tels que les polygones, lignes et cercles permettent de capter des actions telles que le dessin, la modification ou la suppression de géométries.

a. create (pour les dessins)

create : Cet événement est déclenché après qu’un utilisateur ait créé une nouvelle géométrie, par exemple, un polygone ou un cercle en utilisant un outil de dessin.

Exemple :

var drawnItems = new L.FeatureGroup();

map.addLayer(drawnItems);

var drawControl = new L.Control.Draw({

  edit: { featureGroup: drawnItems }

});

map.addControl(drawControl);

map.on('draw:created', function(e) {

  console.log("Une nouvelle géométrie a été créée : ", e.layer);

  drawnItems.addLayer(e.layer);

});

b. edit (pour la modification de géométrie)

edit : Cet événement est déclenché lorsque l’utilisateur modifie une géométrie existante (comme un polygone ou une ligne).

Exemple :

map.on('draw:edited', function(e) {

  console.log("Les géométries ont été modifiées : ", e.layers);

});

Diapo 5 : Attacher un événement à un Marker dans Leaflet

Dans Leaflet, les marqueurs sont des objets géographiques interactifs que vous pouvez placer sur la carte. Vous pouvez facilement attacher des événements à ces marqueurs pour capter les actions de l’utilisateur, comme un clic, un survol de la souris, ou un déplacement.

Voici comment attacher des événements courants à un marker :

1. Création d’un Marker

Avant d’attacher des événements, il faut d’abord créer un marker. Cela se fait avec la fonction L.marker() en précisant les coordonnées géographiques où vous souhaitez le placer sur la carte.

Exemple :

var map = L.map('map').setView([48.8566, 2.3522], 13); // Positionner la carte sur Paris

// Créer un marqueur sur Paris

var marker = L.marker([48.8566, 2.3522]).addTo(map);

2. Attacher un événement `click`

L’événement click est l’un des événements les plus courants attachés aux marqueurs. Il se déclenche chaque fois qu’un utilisateur clique sur un marqueur. Vous pouvez utiliser cet événement pour afficher une popup, enregistrer une action ou déclencher une fonction spécifique.

Exemple :

marker.on('click', function() {

  console.log('Vous avez cliqué sur le marqueur.');

  marker.bindPopup('C\'est un marqueur à Paris !').openPopup(); // Afficher un popup

});

Explication :

on('click', ...) : Attache un événement click au marqueur.

bindPopup('...') : Ajoute un popup au marqueur.

openPopup() : Ouvre le popup lorsque le clic est détecté.

Diapo 6 : Attacher un événement mouseover et mouseout

Les événements mouseover et mouseout se déclenchent lorsque la souris survole le marqueur et lorsque la souris quitte le marqueur, respectivement. Ces événements sont souvent utilisés pour créer des effets visuels interactifs, comme le changement de couleur ou de taille du marqueur.

Exemple :

marker.on('mouseover', function() {

  console.log('La souris est sur le marqueur.');

  marker.setIcon(L.icon({

    iconUrl: 'path/to/hover-icon.png',

    iconSize: [32, 32],

  })); // Modifier l'icône du marqueur au survol

});

marker.on('mouseout', function() {

  console.log('La souris a quitté le marqueur.');

  marker.setIcon(L.icon({

    iconUrl: 'path/to/default-icon.png',

    iconSize: [32, 32],

  })); // Restaurer l'icône par défaut

});

Explication :

setIcon() : Change l’icône du marqueur.

L’icône est changée au survol et restaurée lorsqu’on quitte le marqueur.

Diapo 7 : Attacher un événement drag et dragend (pour un marqueur draggable)

Vous pouvez rendre un marqueur draggable (déplaçable) et attacher des événements au mouvement du marqueur. L’événement drag se déclenche pendant que le marqueur est déplacé, et dragend lorsque le déplacement est terminé.

Exemple :

marker.dragging.enable(); // Activer le déplacement du marqueur

marker.on('drag', function() {

  console.log('Le marqueur est en train d\'être déplacé.');

});

marker.on('dragend', function() {

  console.log('Le marqueur a été déplacé.');

  console.log('Nouvelle position : ' + marker.getLatLng()); // Affiche les nouvelles coordonnées

});

Explication :

dragging.enable() : Permet de rendre le marqueur déplaçable.

getLatLng() : Récupère les nouvelles coordonnées du marqueur après son déplacement.

Diapo 8 : Attacher un événement contextmenu (clic droit)

L’événement contextmenu est déclenché lors d’un clic droit sur un marqueur. Cela peut être utile pour afficher un menu contextuel ou exécuter une action spécifique lorsque l’utilisateur fait un clic droit.

Exemple :

marker.on('contextmenu', function(e) {

  console.log('Clic droit détecté sur le marqueur.');

  alert('Clic droit effectué à : ' + e.latlng); // Affiche un message avec les coordonnées du clic

});

Explication :

e.latlng : Contient les coordonnées où le clic droit a eu lieu.

Diapo 9 : Attacher un événement dblclick (double-clic)

L’événement dblclick est déclenché lorsqu’un utilisateur effectue un double-clic sur un marqueur. Vous pouvez l’utiliser pour effectuer des actions spécifiques sur un double-clic, comme zoomer sur la carte ou modifier les propriétés du marqueur.

Exemple :

marker.on('dblclick', function() {

  console.log('Double-clic sur le marqueur détecté.');

  map.setView(marker.getLatLng(), 16); // Zoomer sur le marqueur après un double-clic

});

Explication :

map.setView() : Change la vue de la carte pour centrer la carte sur le marqueur et zoomer.

Diapo 10 : Attacher un événement dragstart (au début du déplacement)

L’événement dragstart se déclenche juste au début d’un déplacement de marqueur, ce qui peut être utile pour des animations ou des ajustements avant que le marqueur ne soit déplacé.

Exemple :

marker.on('dragstart', function() {

  console.log('Le déplacement du marqueur a commencé.');

});

Diapo 11 : Clic sur la carte → afficher les coordonnées

Vous pouvez afficher les coordonnées où l’utilisateur clique. C’est très utile pour localiser un point.

map.on(‘click’, function(e) {

alert(« Vous avez cliqué à :\nLatitude : » + e.latlng.lat.toFixed(5) +

« \nLongitude : » + e.latlng.lng.toFixed(5));

});

Ou, mieux : placer un marqueur à cet endroit.

map.on(‘click’, function(e) {

L.marker(e.latlng).addTo(map)

.bindPopup(« Nouveau point :<br> » + e.latlng.toString())

.openPopup();});

Diapo 12 : Formulaire popup interactif (ajout d’un commentaire)

Vous pouvez afficher un formulaire dans une popup pour que l’utilisateur saisisse des infos.

map.on(‘click’, function(e) {

var popup = L.popup()

.setLatLng(e.latlng)

.setContent(‘<b>Ajouter un commentaire :</b><br><input type= »text«

id= »inputComment » /><br><button onclick= »saveComment() »>Envoyer</button>’)
.openOn(map);

window.saveComment = function() {

var text = document.getElementById(« inputComment »).value;

alert(« Commentaire enregistré : » + text);

map.closePopup(); };});

Diapo 13 : Détection de zoom ou déplacement

Très utile pour mettre à jour dynamiquement des données visibles (ex. charger des données selon la zone).

map.on(‘moveend zoomend’, function() {

console.log(« Vue actuelle : », map.getBounds()); console.log(« Niveau de zoom : », map.getZoom());});

Diapo 14 : Mise à jour d’un élément au survol

Vous pouvez changer dynamiquement le style d’un objet (GeoJSON, polygone…) lorsqu’on passe la souris dessus.

L.geoJSON(zone, {

style: { color: « green », weight: 2 },

onEachFeature: function (feature, layer) {

layer.on({

mouseover: function(e) {

e.target.setStyle({ color: « red » });

mouseout: function(e) {

e.target.setStyle({ color: « green » });

}

});

}}).addTo(map);

Diapo 15 : Modifier dynamiquement un objet dans Leaflet

Modifier dynamiquement un objet signifie changer ses propriétés ou son apparence en réponse à une action de l’utilisateur (clic, survol, zoom, etc.). Cela permet de rendre les cartes interactives, intuitives et plus lisibles.

Pourquoi modifier dynamiquement un objet ?

Réagir aux actions de l’utilisateur
Par exemple, lorsque l’utilisateur survole une zone, on peut :
- changer la couleur du polygone,
- afficher une infobulle temporaire,
- agrandir un marqueur.

Rafraîchir le contenu ou le style en temps réel
On peut :
- mettre à jour les données d’un popup (ex : température en direct),
- changer l’icône d’un marqueur selon un événement (alerte, météo, etc.),
- adapter le style d’un tracé selon un zoom.

Améliorer la lisibilité et l’expérience utilisateur
Un objet qui change visuellement attire l’attention :
- sur les éléments importants,
- sur les interactions possibles.

Exemples de modifications dynamiques

// Survol : changer le style d’un polygone
layer.on('mouseover', function () {
  this.setStyle({
    fillColor: 'yellow',
    color: 'orange'
  });
});

// Clic : changer l’icône d’un marqueur
marker.on('click', function () {
  this.setIcon(newIcon);
});

// Double clic : modifier un texte de popup
marker.on('dblclick', function () {
  this.bindPopup("Texte mis à jour").openPopup();
});

Ce qu’il faut retenir

Modifier dynamiquement un objet, c’est donner vie à la carte : elle répond, elle informe, elle guide. Cela transforme un simple fond de carte en véritable interface interactive.

Diapo 16 : Modifier dynamiquement un objet au fil du temps

Dans Leaflet, il est possible de modifier des objets automatiquement, sans interaction utilisateur, en utilisant le temps comme déclencheur.

Cela permet de :

animer visuellement une carte,

attirer l’attention sur un élément,

représenter une évolution (par exemple une simulation ou un déplacement).

Pourquoi modifier un objet au fil du temps ?

Signaler une zone d’alerte ou de danger (clignotement, changement de couleur)

Afficher une évolution dans le temps (ex : déplacement d’un véhicule, variation d’une température)

Créer des effets visuels pour renforcer l’interface (pulsation, alternance d’icônes)

Exemple : clignotement d’un polygone

On alterne sa couleur toutes les 500 millisecondes.
let isRed = true;

setInterval(() => {
  polygon.setStyle({
    color: isRed ? 'red' : 'orange',
    fillColor: isRed ? 'red' : 'orange'
  });
  isRed = !isRed;
}, 500);
Exemple : déplacement d’un marqueur toutes les secondes
let lat = -19.7, lng = 63.4;
const marker = L.marker([lat, lng]).addTo(map);

setInterval(() => {
  lat += 0.0005;
  marker.setLatLng([lat, lng]);
}, 1000);
Ce qu’il faut retenir

Avec JavaScript pur, Leaflet peut faire vivre la carte même sans interaction. Cela donne une dimension dynamique.

Diapo 17 : Modifier dynamiquement un objet via une sélection utilisateur

Dans une application cartographique interactive, il est souvent utile de permettre à l’utilisateur de modifier l’apparence des objets affichés sur la carte. Leaflet, combiné à du HTML et JavaScript, permet facilement ce type d’interaction.

Objectif

Permettre à l’utilisateur de personnaliser l’affichage d’un objet (par exemple un polygone) selon une valeur choisie dans une interface HTML (ex. menu déroulant). Cela améliore :

L’accessibilité et la compréhension des données

L’interactivité de la carte

L’expérience utilisateur (UX)

Cas d’usage : Choix de couleur d’un polygone

On affiche un polygone sur la carte représentant, par exemple, une zone protégée. Un menu HTML propose à l’utilisateur de choisir une couleur. Lorsqu’il sélectionne une nouvelle couleur, le style du polygone est mis à jour dynamiquement.

Exemple de code (extrait simplifié)

<select id="colorSelect">
  <option value="blue">Bleu</option>
  <option value="green">Vert</option>
  <option value="red">Rouge</option>
</select>

<div id="map" style="height: 400px;"></div>

<script>
  const map = L.map('map').setView([48.85, 2.35], 12); // Exemple : Paris

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

  // Exemple de polygone
  const polygon = L.polygon([
    [48.85, 2.35],
    [48.86, 2.36],
    [48.85, 2.37]
  ], {
    color: 'blue'
  }).addTo(map);

  // Mise à jour du style selon la sélection
  document.getElementById('colorSelect').addEventListener('change', (e) => {
    const newColor = e.target.value;
    polygon.setStyle({ color: newColor });
  });
</script>

À retenir

L’événement change du menu <select> est déclenché à chaque modification.

La méthode .setStyle() de Leaflet permet de changer dynamiquement le style d’un polygone, d’une ligne ou d’un cercle.

Ce principe peut être étendu à d’autres styles : épaisseur (weight), opacité (opacity), remplissage (fillColor), etc.

Conclusion

Attacher des événements à des marqueurs dans Leaflet est essentiel pour ajouter de l’interactivité à la carte. Les événements comme click, mouseover, drag, et contextmenu vous permettent de réagir aux actions des utilisateurs et de modifier dynamiquement l’état ou le contenu de votre carte. L’utilisation des événements sur des marqueurs rend la carte plus dynamique et permet de créer des expériences utilisateurs plus engageantes et personnalisées.

Exercice pratique – Créer sa carte interactive touristique

Objectif

Créer une carte interactive d’un lieu touristique (ville, parc, sentier, etc.) où :

des points d’intérêt s’affichent avec des infos au clic,

la couleur d’un polygone change au survol,

un popup mobile affiche les coordonnées du clic sur la carte,

un compteur de clics est affiché en haut à gauche,

un bouton permet de réinitialiser la carte.

Éléments fournis

Vous trouverez ces éléments dans le répertoire …\leaflet_starter_kit\data

Un fichier points.geojson contenant 3–4 POIs avec des propriétés name et description

Un polygone représentant une zone (zone.geojson)

Instructions

Afficher la carte centrée sur la zone d’intérêt avec un niveau de zoom adapté.

Ajouter les points d’intérêt (points.geojson) :
- Afficher une icône personnalisée pour les marqueurs
- Ajouter un popup au clic contenant le name et description
- Changer l’icône au survol (mouseover / mouseout)

Afficher une zone (zone.geojson) :
- Appliquer un style de base
- Changer la couleur de fond au survol
- Rétablir le style d’origine quand la souris quitte la zone

Ajoute un événement sur la carte entière :
- Quand l’utilisateur clique sur la carte, un popup mobile s’ouvre à l’endroit du clic avec les coordonnées lat/lon
- Un compteur de clics est affiché dans un div (#counter) et mis à jour à chaque clic

Ajoute un bouton « Réinitialiser » :
- Remet la carte à son état initial (vue et compteur)

Bonus (optionnel)

Affiche une mini-carte ou une échelle

Ajoute une info-bulle fixe avec des instructions

Attention: Si vous ne voyez pas apparaître les couches geojson sur votre carte

Diagnostic : vous ouvrez le fichier `HTML` directement depuis le disque (`file://`)

Quand vous faites ça, le navigateur bloque souvent les requêtes fetch('rando1.geojson') pour des raisons de sécurité.

Solution simple : utiliser un petit serveur local

Voici comment faire très facilement avec Python (pas besoin de programmer quoi que ce soit) :

1. Ouvrez une fenêtre de terminal dans le dossier où se trouve `index.html` et les fichiers geojson

2. Tapez (selon la version de Python) :

# Si Python 3
python -m http.server 8000

3. Ouvrez votre navigateur et allez sur :

http://localhost:8000

Là, le chargement avec fetch() fonctionnera sans problème !

Voir la solution dans un nouvel onglet

(Il est recommandé de faire l’exercice seul(e) avant de consulter le corrigé.)

<-Session 4 : Couches et interactivité

->Session 6 :Mini-projet

Si cet article vous a intéressé et que vous pensez qu'il pourrait bénéficier à d'autres personnes, n'hésitez pas à le partager sur vos réseaux sociaux en utilisant les boutons ci-dessous. Votre partage est apprécié !