Tutoriel Leaflet : session 4

6 mai 20256 mai 2025 Atilio Francois No Comments

Séance 4 : Personnalisation et contrôle dans Leaflet

Objectif : améliorer l’expérience utilisateur (UX) et personnaliser l’apparence des cartes interactives.

En cours de chargement…

Cela prend trop de temps ?

Recharger le document

Ouvrir dans un nouvel onglet

Contenu

Diapo 1 : Personnaliser les marqueurs

Personnaliser les marqueurs

1. Introduction : Pourquoi personnaliser les marqueurs ?

Leaflet utilise, par défaut, une icône standard bleue pour les marqueurs. Cependant, dans de nombreux cas, il est préférable de remplacer cette icône par une image personnalisée. Cela permet de mieux représenter le type de lieu ou de point d’intérêt sur la carte.

Avantages de la personnalisation des marqueurs :

Catégorisation des points : Chaque type de point (restaurant, musée, hôtel, point d’urgence…) peut être associé à une icône différente. Par exemple, une icône représentant une assiette pour un restaurant, un lit pour un hôtel, etc.

Cohérence visuelle : Vous pouvez adapter les icônes à une charte graphique ou à un thème spécifique, ce qui crée une expérience plus esthétique et professionnelle.

Amélioration de l’expérience utilisateur : Des icônes personnalisées permettent aux utilisateurs de repérer rapidement différents types de points d’intérêt sur la carte. Cela rend la carte plus intuitive et accessible.

2. Comment personnaliser un marqueur dans Leaflet ?

Voici un exemple de code pour personnaliser un marqueur avec une icône personnalisée :

// Créer une icône personnalisée
const myIcon = L.icon({
    iconUrl: 'images/restaurant.png', // URL de l'image de l'icône
    iconSize: [32, 32], // Taille de l'icône (en pixels)
    iconAnchor: [16, 32], // Point de l'icône qui correspond à la position du marqueur (le centre du marqueur ici)
    popupAnchor: [0, -32] // Position du popup par rapport au marqueur
});

// Ajouter un marqueur avec l'icône personnalisée sur la carte
L.marker([48.8566, 2.3522], { icon: myIcon })
    .addTo(map) // Ajouter à la carte
    .bindPopup("Restaurant Parisien"); // Ajouter un popup

Explications des options de l’icône :

iconUrl : l’URL ou le chemin relatif de l’image que vous souhaitez utiliser comme icône (ici, images/restaurant.png).

iconSize : spécifie la taille de l’icône en pixels. Ici, l’icône fait 32×32 pixels.

iconAnchor : le point de l’icône qui correspond à la position du marqueur. Par exemple, si iconAnchor: [16, 32], cela signifie que l’ancrage du marqueur sera le bas du centre de l’icône.

popupAnchor : la position du popup par rapport à l’icône. Dans cet exemple, le popup apparaîtra 32 pixels au-dessus de l’icône.

3. Formats d’images compatibles

Leaflet permet d’utiliser différents formats d’image pour les icônes :

PNG, JPG : formats d’images standards. Assurez-vous que l’image est de bonne qualité pour ne pas nuire à la lisibilité.

SVG : ce format vectoriel est particulièrement utile si vous voulez des icônes qui ne perdent pas en qualité quand elles sont redimensionnées.

Les images doivent être accessibles depuis le dossier de votre projet ou depuis une URL publique.

4. Exemples d’icônes personnalisées

Icône pour un restaurant : une image représentant une assiette ou des couverts.

Icône pour un musée : une image représentant une peinture ou un monument.

Icône pour une station-service : une image de pompe à essence.

Conclusion

Personnaliser les marqueurs dans Leaflet est une excellente manière de rendre vos cartes plus lisibles, visuellement cohérentes et adaptées à l’expérience de l’utilisateur. Cela permet de mieux catégoriser les différents types de points d’intérêt et de renforcer l’impact visuel de la carte.

Diapo 2-Styles personnalisés pour les formes vectorielles

Styles personnalisés pour les formes vectorielles

1. Introduction : Qu’est-ce qu’une forme vectorielle ?

Dans Leaflet, une forme vectorielle est un élément géographique représenté sur la carte à partir de données géométriques. Cela inclut :

Les polylignes : lignes tracées entre plusieurs points (par exemple, un itinéraire).

Les polygones : formes fermées délimitant des zones (par exemple, des parcelles de terrain, des régions).

Les cercles : une forme spéciale de polygone, basée sur un rayon autour d’un point.

Ces formes peuvent être stylisées pour mieux s’intégrer à l’apparence de la carte et fournir une meilleure expérience utilisateur.

2. Pourquoi personnaliser les styles ?

Personnaliser les styles des formes vectorielles permet de :

Améliorer la lisibilité : Des couleurs et des épaisseurs de ligne distinctes aident à mieux visualiser les données.

Adapter l’apparence à une charte graphique : Vous pouvez définir des couleurs, des bordures et des ombres spécifiques pour que la carte corresponde au style de votre projet.

Mettre en valeur certaines zones ou itinéraires : Par exemple, vous pouvez utiliser une couleur différente pour un itinéraire conseillé ou une zone protégée.

3. Comment personnaliser les styles ?

Leaflet permet de personnaliser les styles des formes vectorielles en utilisant des objets JavaScript. Voici des exemples pour polylignes, polygones et cercles.

Exemple de personnalisation d’une polyligne :

const polyline = L.polyline([
    [48.8566, 2.3522],  // Point de départ
    [48.8584, 2.2945],  // Point d'arrivée
], {
    color: 'blue',       // Couleur de la ligne
    weight: 4,           // Epaisseur de la ligne
    opacity: 0.7         // Opacité de la ligne
}).addTo(map);

Explications des options de style :

color : définit la couleur de la ligne (ici bleu).

weight : spécifie l’épaisseur de la ligne (ici, 4 pixels).

opacity : règle l’opacité de la ligne (ici, 70%).

Exemple de personnalisation d’un polygone :

const polygon = L.polygon([
    [48.8566, 2.3522], 
    [48.8584, 2.2945], 
    [48.8600, 2.2920]
], {
    color: 'green',      // Couleur du contour
    fillColor: 'lightgreen',  // Couleur de remplissage
    fillOpacity: 0.5,    // Opacité du remplissage
    weight: 3            // Epaisseur du contour
}).addTo(map);

Explications des options de style :

color : couleur du contour (ici vert).

fillColor : couleur de remplissage à l’intérieur du polygone (ici vert clair).

fillOpacity : opacité du remplissage (ici, 50%).

weight : épaisseur du contour (ici, 3 pixels).

Exemple de personnalisation d’un cercle :

const circle = L.circle([48.8566, 2.3522], {
    radius: 500,        // Rayon du cercle en mètres
    color: 'red',       // Couleur du contour
    fillColor: 'red',   // Couleur de remplissage
    fillOpacity: 0.2,   // Opacité du remplissage
    weight: 2           // Epaisseur du contour
}).addTo(map);

Explications des options de style :

radius : définit le rayon du cercle (ici 500 mètres).

color : couleur du contour (ici rouge).

fillColor : couleur de remplissage (ici rouge clair).

fillOpacity : opacité du remplissage (ici, 20%).

weight : épaisseur du contour (ici, 2 pixels).

4. Mise à jour dynamique des styles

Il est également possible de modifier dynamiquement les styles d’une forme après qu’elle a été ajoutée à la carte. Par exemple, pour changer la couleur d’un polygone au survol de la souris :

polygon.on('mouseover', function () {
    this.setStyle({
        color: 'orange',   // Nouvelle couleur du contour
        fillColor: 'yellow', // Nouvelle couleur de remplissage
    });
});
polygon.on('mouseout', function () {
    this.setStyle({
        color: 'green',    // Couleur de contour d'origine
        fillColor: 'lightgreen', // Couleur de remplissage d'origine
    });
});

5. Style conditionnel

Les styles peuvent aussi être définis dynamiquement en fonction des données. Par exemple, vous pouvez colorier un polygone en fonction de sa population ou de son type :

const getStyle = (feature) => {
    return {
        color: feature.properties.type === 'parc' ? 'green' : 'blue',
        fillColor: feature.properties.type === 'parc' ? 'lightgreen' : 'lightblue',
        weight: 2
    };
};

L.geoJSON(data, { style: getStyle }).addTo(map);

Dans cet exemple, les polygones représentant des parcs auront un contour et un remplissage vert, tandis que les autres seront bleus.

Conclusion

La personnalisation des styles des formes vectorielles dans Leaflet permet de rendre les cartes plus informatives, visuellement attrayantes et adaptées aux besoins spécifiques de votre projet. Vous pouvez ajuster des paramètres comme la couleur, l’épaisseur, et l’opacité pour adapter les formes à vos préférences ou à la charte graphique du projet. Vous pouvez même ajouter des interactions dynamiques pour améliorer encore l’expérience utilisateur.

Diapo 3 : Contrôles supplémentaires pour enrichir l’interface

Contrôles supplémentaires pour enrichir l’interface

1. Introduction : Pourquoi ajouter des contrôles supplémentaires ?

Leaflet propose une large gamme de contrôles intégrés qui permettent d’améliorer la lisibilité et la navigation de la carte. Ces contrôles rendent l’interface plus interactive et plus pratique, offrant ainsi une meilleure expérience utilisateur. Parmi ces contrôles, l’ajout d’une échelle, d’une mini-carte et la personnalisation de l’attribution sont des éléments souvent utilisés pour améliorer la compréhension de la carte et son aspect professionnel.

2. Ajouter une échelle

Un contrôle d’échelle affiche une échelle graphique sur la carte, qui permet aux utilisateurs de voir la distance réelle correspondant à une portion de la carte, tout en prenant en compte le niveau de zoom.

Code pour ajouter l’échelle :

L.control.scale().addTo(map);

Fonctionnalité :

L’échelle s’ajuste automatiquement en fonction du niveau de zoom de la carte. Par exemple, lorsque vous zoomez sur une zone plus petite, l’échelle affichera une unité de mesure plus précise (par exemple, 100 mètres au lieu de 10 km).

Elle peut afficher des unités métriques (mètres, kilomètres) ou impériales (pieds, miles) selon les préférences de l’utilisateur ou de la carte.

Avantages :

Précision : Les utilisateurs peuvent visualiser rapidement la distance réelle entre deux points.

Accessibilité : Améliore l’expérience de navigation pour ceux qui ne sont pas familiers avec la carte.

3. Ajouter une mini-carte (MiniMap)

Une mini-carte est une version réduite de la carte principale qui offre une vue d’ensemble rapide du contexte géographique, permettant à l’utilisateur de se repérer facilement dans la zone.

Code pour ajouter la mini-carte :

const miniMapLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
const miniMap = new L.Control.MiniMap(miniMapLayer, {
    toggleDisplay: true,  // Permet de basculer la mini-carte
    minimized: false      // Définit si la mini-carte est minimisée au départ
}).addTo(map);

Fonctionnalité :

La mini-carte est généralement placée dans un coin de la carte principale (souvent en haut à gauche ou à droite).

Elle montre une vue d’ensemble de la carte à une échelle plus large, permettant aux utilisateurs de mieux se situer par rapport à l’ensemble de la zone.

Option de bascule : les utilisateurs peuvent choisir de masquer ou d’afficher la mini-carte à tout moment.

Avantages :

Vue d’ensemble : Offre une perspective globale sur la carte tout en permettant de zoomer et de se concentrer sur des zones spécifiques.

Accessibilité : Aide les utilisateurs à garder une vue d’ensemble sans perdre leur position sur la carte principale.

Remarque importante : L’ajout d’une mini-carte nécessite l’installation du plugin Leaflet MiniMap, que nous verrons dans la prochaine diapositive.

4. Personnaliser l’attribution

L’attribution indique la source des données utilisées pour afficher la carte, et elle est importante pour respecter les licences des données (par exemple, OpenStreetMap). Leaflet fournit un contrôle d’attribution par défaut, mais il est possible de le personnaliser pour afficher des informations spécifiques.

Code pour personnaliser l’attribution :

map.attributionControl.setPrefix('');  // Retire le texte par défaut
map.attributionControl.addAttribution('Carte personnalisée © 2025');  // Ajoute une attribution personnalisée

Fonctionnalité :

Vous pouvez modifier ou ajouter des mentions d’attribution supplémentaires, par exemple, une mention de votre propre carte ou une source de données particulière.

Cette fonctionnalité est utile pour respecter les licences des données utilisées (comme celles d’OpenStreetMap) ou pour ajouter une mention personnalisée (par exemple, « Carte réalisée par [Votre Nom] »).

Avantages :

Respect des licences : Assure la conformité avec les droits d’auteur et les licences de données, comme celles d’OpenStreetMap.

Personnalisation : Permet d’ajouter un élément de personnalisation ou de reconnaissance pour les créateurs de la carte.

5. Résumé des contrôles supplémentaires

Échelle : Affiche une échelle dynamique pour mesurer les distances.

Mini-carte : Affiche une vue d’ensemble dans un coin de la carte principale pour mieux se repérer.

Attribution : Personnalisez l’attribution pour respecter les licences des données ou ajouter des informations spécifiques.

Conclusion

L’ajout d’un contrôle d’échelle, d’une mini-carte, et la personnalisation de l’attribution sont de petites améliorations qui rendent l’interface plus professionnelle, informative et accessible. Ces contrôles sont faciles à implémenter avec Leaflet, et leur usage améliore grandement l’expérience de l’utilisateur en rendant la carte plus intuitive et conforme aux bonnes pratiques. Ces outils aident également à respecter les licences des données géospatiales utilisées et à offrir une navigation plus fluide.

Diapo 4 : Installer et utiliser le plugin Leaflet MiniMap

Installer et utiliser le plugin Leaflet MiniMap

1. Introduction : Qu’est-ce qu’une mini-carte (MiniMap) ?

Une mini-carte est une version réduite et généralement interactive de la carte principale, qui permet à l’utilisateur de garder une vue d’ensemble de la zone géographique tout en naviguant sur la carte principale. Elle est souvent placée dans un coin de la carte principale, permettant à l’utilisateur de voir sa position par rapport à l’ensemble de la carte et de se déplacer plus facilement.

Les mini-cartes sont particulièrement utiles dans des applications où il est nécessaire de visualiser une grande zone tout en étant capable de zoomer sur des détails locaux. Elles sont fréquemment utilisées dans des cartes de navigation, des cartes d’itinéraires, ou des cartes thématiques.

2. Pourquoi utiliser Leaflet MiniMap ?

Bien que Leaflet ne fournisse pas de mini-carte en standard, vous pouvez ajouter facilement cette fonctionnalité grâce au plugin Leaflet MiniMap. Ce plugin permet d’ajouter une petite carte interactive dans un coin de la carte principale, tout en offrant la possibilité de zoomer et de se déplacer.

Avantages de la mini-carte :

Vue d’ensemble : Permet à l’utilisateur de se repérer facilement dans l’ensemble de la zone.

Navigation améliorée : L’utilisateur peut rapidement voir la zone dans laquelle il se trouve sans perdre sa position sur la carte principale.

Interface claire : La mini-carte offre une vue compacte qui ne gêne pas l’affichage principal de la carte.

3. Installer le plugin Leaflet MiniMap

Avant de pouvoir utiliser le plugin Leaflet MiniMap, vous devez l’installer dans votre projet. Si vous n’avez pas encore inclus le plugin, voici comment le faire.

Ajouter le fichier JavaScript du plugin : Vous pouvez inclure le plugin MiniMap en ajoutant le fichier JavaScript correspondant à votre projet. Voici la ligne à ajouter dans votre fichier HTML pour charger le plugin depuis un CDN :
<script src="https://unpkg.com/leaflet-minimap@3.0.0/leaflet-minimap.min.js"></script>

Ajouter le fichier CSS du plugin : Le plugin nécessite également un fichier CSS pour que les styles de la mini-carte s’affichent correctement. Ajoutez cette ligne dans votre balise <head> :
<link rel="stylesheet" href="https://unpkg.com/leaflet-minimap@3.0.0/leaflet-minimap.css" />

4. Utiliser le plugin Leaflet MiniMap

Une fois le plugin installé, vous pouvez l’ajouter facilement à votre carte Leaflet. Le code suivant montre comment intégrer la mini-carte à votre projet :

Exemple de code pour ajouter une mini-carte :

// Définir la couche de la mini-carte (vous pouvez utiliser n'importe quelle carte de base)
const miniMapLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

// Créer un contrôle de mini-carte
const miniMap = new L.Control.MiniMap(miniMapLayer, {
    toggleDisplay: true,  // Permet d'afficher/masquer la mini-carte
    minimized: false      // Si la mini-carte est affichée de manière réduite au début
}).addTo(map);

Explication du code :

L.tileLayer : Nous utilisons une couche de tuiles comme fond pour la mini-carte. Ici, nous utilisons OpenStreetMap, mais vous pouvez aussi utiliser d’autres services de tuiles.

L.Control.MiniMap : Ce contrôle ajoute la mini-carte à la carte principale.
- toggleDisplay : Cette option permet de permettre à l’utilisateur de basculer entre afficher ou masquer la mini-carte à l’aide d’un bouton.
- minimized : Détermine si la mini-carte est réduite ou entièrement affichée au chargement de la carte.

5. Personnaliser la mini-carte

Le plugin Leaflet MiniMap offre plusieurs options de personnalisation pour s’adapter à vos besoins spécifiques. Voici quelques-unes des options disponibles :

Positionnement : Vous pouvez choisir où afficher la mini-carte (par exemple, en haut à droite, en bas à gauche, etc.). Par défaut, elle est en haut à droite, mais vous pouvez ajuster sa position avec l’option position.

Zoom : Vous pouvez également définir le niveau de zoom de la mini-carte avec l’option zoomLevel si vous souhaitez que la mini-carte affiche un zoom différent de celui de la carte principale.

Dimensions : Par défaut, la mini-carte est de taille fixe, mais vous pouvez ajuster sa taille en fonction de vos besoins.

Voici un exemple de personnalisation :

const miniMap = new L.Control.MiniMap(miniMapLayer, {
    toggleDisplay: true,
    minimized: false,
    position: 'bottomright',   // Placer la mini-carte en bas à droite
    zoomLevel: 6,              // Niveau de zoom de la mini-carte
    width: 150,                // Largeur de la mini-carte
    height: 150                // Hauteur de la mini-carte
}).addTo(map);

6. Conclusion : L’importance de la mini-carte

Ajouter une mini-carte à votre projet Leaflet améliore l’interaction et la navigation sur la carte. Elle permet aux utilisateurs de mieux se repérer et d’avoir une vue d’ensemble de la zone, tout en restant focalisés sur la zone locale de la carte principale. Avec le plugin Leaflet MiniMap, l’intégration de cette fonctionnalité est simple et rapide, tout en offrant de nombreuses options de personnalisation pour l’adapter à vos besoins.

Résumé

Mini-carte : Affiche une version réduite et interactive de la carte principale pour une vue d’ensemble rapide.

Installation : Chargez le plugin JavaScript et CSS dans votre projet.

Personnalisation : Choisissez la position, le zoom, et la taille de la mini-carte en fonction de vos préférences.

Amélioration de l’UX : La mini-carte améliore l’expérience utilisateur en permettant une navigation fluide et un meilleur repérage spatial.

Ce plugin est un excellent moyen d’ajouter de la convivialité à vos cartes Leaflet tout en donnant aux utilisateurs un outil pratique pour naviguer et se repérer dans des zones étendues.

Diapo 5:Contrôle de zoom & boutons personnalisés

1. Introduction : L’importance des contrôles de zoom

Les contrôles de zoom permettent à l’utilisateur d’ajuster l’échelle de la carte pour explorer plus en détail ou avoir une vue d’ensemble. Par défaut, Leaflet fournit un contrôle de zoom en haut à droite de la carte. Cependant, il est possible de personnaliser l’apparence et les fonctionnalités de ces contrôles pour mieux répondre aux besoins d’un projet.

En plus des boutons de zoom standards, vous pouvez également ajouter des boutons personnalisés pour effectuer des actions spécifiques sur la carte, comme centrer la carte sur un lieu particulier, activer un mode de dessin, ou encore zoomer automatiquement sur une zone d’intérêt.

2. Contrôle de zoom par défaut

Le contrôle de zoom par défaut est simple et pratique. Il offre des boutons « plus » et « moins » pour zoomer avant et arrière, et un bouton de réinitialisation pour revenir au niveau de zoom par défaut. Leaflet l’ajoute automatiquement lors de la création de la carte, mais vous pouvez le configurer à votre convenance.

Code pour ajouter le contrôle de zoom par défaut :

const map = L.map('map', {
    zoomControl: true // Active le contrôle de zoom par défaut
}).setView([48.8566, 2.3522], 13);  // Exemple avec Paris

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

Fonctionnalité :

Zoom avant/arrière : Permet de modifier l’échelle de la carte pour explorer plus ou moins de détails.

Réinitialisation : Permet de revenir à un niveau de zoom initial par défaut.

Personnalisation :

Vous pouvez positionner le contrôle de zoom ailleurs sur la carte ou même le retirer si ce n’est pas nécessaire.

3. Personnaliser les boutons de zoom

Par défaut, Leaflet offre une présentation standard des boutons de zoom (en haut à droite). Toutefois, vous pouvez facilement modifier son apparence, sa position ou même les boutons eux-mêmes pour qu’ils correspondent mieux à l’interface de votre projet.

Code pour déplacer le contrôle de zoom :

L.control.zoom({
    position: 'bottomleft' // Place le contrôle de zoom en bas à gauche
}).addTo(map);

Options disponibles :

position : Vous pouvez déplacer le contrôle de zoom dans les coins de la carte, comme topright, topleft, bottomleft, ou bottomright.

zoomInText et zoomOutText : Personnalisez le texte des boutons (par exemple, utilisez des icônes plutôt que du texte).

4. Ajouter des boutons personnalisés

Au-delà des contrôles de zoom, Leaflet vous permet d’ajouter des boutons personnalisés pour ajouter des fonctionnalités spécifiques à la carte, telles que recentrer la carte sur un lieu, changer de couche, ou lancer un mode de dessin.

Exemple de bouton personnalisé pour centrer la carte :

L.control.custom({
    position: 'topright',
    content: '<button>Recentrer</button>',
    onclick: function() {
        map.setView([48.8566, 2.3522], 13);  // Centrer sur Paris
    }
}).addTo(map);

Fonctionnalité :

Vous pouvez définir un bouton avec du texte, une image ou même une icône (par exemple, un bouton avec un logo personnalisé).

Lorsqu’un utilisateur clique sur ce bouton, vous pouvez associer une action spécifique, comme recentrer la carte, changer le niveau de zoom, ou effectuer des changements sur la carte.

Exemple de bouton pour activer un mode de dessin :

Vous pouvez ajouter un bouton pour activer le mode de dessin ou d’édition sur la carte, par exemple avec Leaflet.draw, un plugin permettant de dessiner des formes (polygones, polylignes, etc.).

const drawControl = new L.Control.Draw({
    draw: {
        polygon: true, // Permet de dessiner des polygones
        polyline: true  // Permet de dessiner des polylignes
    }
});
map.addControl(drawControl);

// Bouton personnalisé pour activer le mode de dessin
L.control.custom({
    position: 'topright',
    content: '<button>Dessiner</button>',
    onclick: function() {
        map.addControl(drawControl);  // Ajoute les outils de dessin à la carte
    }
}).addTo(map);

Avantages des boutons personnalisés :

Flexibilité : Vous pouvez associer n’importe quelle action à un bouton, comme afficher un message, changer de couche, ou interagir avec la carte d’une manière unique.

Accessibilité : Permet d’améliorer l’ergonomie en offrant des fonctionnalités supplémentaires sans surcharger l’interface de la carte.

5. Combiner les boutons de zoom et personnalisés

Vous pouvez facilement combiner les contrôles de zoom par défaut avec des boutons personnalisés pour offrir une interface plus riche et interactive. Par exemple, vous pourriez avoir un bouton personnalisé pour recentrer la carte, tout en gardant les boutons de zoom classiques.

Exemple de combinaison des deux :

L.control.zoom({ position: 'bottomright' }).addTo(map); // Zoom classique

L.control.custom({
    position: 'topright',
    content: '<button>Recentrer</button>',
    onclick: function() {
        map.setView([48.8566, 2.3522], 13);  // Recentre sur Paris
    }
}).addTo(map);

Avantages de cette combinaison :

Navigation fluide : Les utilisateurs peuvent zoomer facilement tout en ayant la possibilité d’ajouter des actions personnalisées.

Interface intuitive : Offrir plus de contrôle à l’utilisateur sans encombrer l’interface.

6. Résumé et meilleures pratiques

Contrôles de zoom : Ajoutez, personnalisez et positionnez les contrôles de zoom de manière à rendre la navigation plus fluide et intuitive.

Boutons personnalisés : Ajoutez des boutons pour effectuer des actions spécifiques sur la carte, comme recentrer la carte ou changer de couche.

Accessibilité et ergonomie : Combinez des contrôles de zoom et des boutons personnalisés pour offrir une meilleure expérience à l’utilisateur sans trop alourdir l’interface.

Conclusion

Les contrôles de zoom et les boutons personnalisés sont des éléments essentiels pour rendre la navigation sur une carte Leaflet plus interactive et pratique. Non seulement ils permettent aux utilisateurs d’ajuster l’échelle de la carte, mais ils offrent aussi la possibilité de déclencher des actions spécifiques à l’aide de boutons personnalisés. Grâce à ces fonctionnalités, vous pouvez créer des interfaces de carte riches, accessibles et bien adaptées à vos besoins spécifiques.

Diapo 6 : Ajout de widgets : Échelle et légende personnalisée

Ajout de widgets : Échelle et légende personnalisée

1. Introduction : Qu’est-ce qu’un widget dans Leaflet ?

Les widgets sont des éléments d’interface utilisateur qui permettent d’ajouter des fonctionnalités supplémentaires et des informations à une carte Leaflet. Parmi les widgets les plus courants, on retrouve l’échelle et la légende. Ces éléments sont essentiels pour fournir aux utilisateurs des informations contextuelles, comme la distance (échelle) ou la signification des couleurs et des symboles (légende).

Leaflet permet d’ajouter facilement ces widgets grâce à des contrôles intégrés et personnalisables.

2. Widget Échelle : Afficher une échelle dynamique

Le widget échelle affiche une échelle de distance qui s’ajuste dynamiquement en fonction du niveau de zoom de la carte. Cela permet à l’utilisateur de mieux comprendre la distance réelle sur la carte, ce qui est particulièrement utile dans des applications de géolocalisation ou de cartographie thématique.

Ajouter une échelle à la carte :

Leaflet fournit un contrôle intégré pour ajouter une échelle à la carte, ce qui est très simple à mettre en place.

Exemple de code pour ajouter une échelle :

L.control.scale({
    metric: true,  // Affiche l'échelle en mètres et kilomètres
    imperial: false, // Désactive l'échelle en miles et yards
    maxWidth: 200  // Largeur maximale de l'échelle
}).addTo(map);

Explication du code :

metric : Si cette option est activée, l’échelle affichera la distance en mètres et kilomètres.

imperial : Si activée, l’échelle affichera la distance en miles et yards.

maxWidth : Permet de définir la largeur maximale de l’échelle, utile pour ajuster l’affichage sur des écrans de tailles différentes.

Le contrôle de l’échelle est dynamique : il s’ajuste automatiquement lorsque l’utilisateur effectue un zoom avant ou arrière sur la carte. Plus vous zoomez, plus la distance représentée par les segments de l’échelle devient petite.

Avantages de l’échelle :

Précision : Elle permet à l’utilisateur de visualiser avec précision les distances sur la carte.

Interactivité : L’échelle se met à jour automatiquement avec le zoom de la carte, ce qui rend son utilisation simple et intuitive.

3. Widget Légende : Afficher une légende personnalisée

La légende est un widget très utile pour expliquer la signification des couleurs, des symboles ou des motifs utilisés dans une carte. Par exemple, si vous avez des couches thématiques (par exemple, pour afficher des types de sols, des zones à risque, etc.), une légende permettra à l’utilisateur de comprendre ce que chaque couleur ou icône représente.

Ajouter une légende à la carte :

Vous pouvez créer une légende personnalisée avec du HTML et l’ajouter à la carte en utilisant L.control().

Exemple de code pour ajouter une légende :

const legend = L.control({ position: 'bottomright' });

legend.onAdd = function (map) {
    const div = L.DomUtil.create('div', 'info legend');
    const grades = [0, 10, 20, 30, 40];  // Plages de valeurs (ex : température)
    const labels = [];

    // Boucle pour générer les couleurs et labels de la légende
    for (let i = 0; i < grades.length; i++) {
        labels.push(
            '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
            grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] : '+')
        );
    }
    div.innerHTML = labels.join('<br>');
    return div;
};

legend.addTo(map);

// Fonction pour déterminer la couleur en fonction de la valeur
function getColor(d) {
    return d > 30 ? '#800026' :
           d > 20 ? '#BD0026' :
           d > 10 ? '#E31A1C' :
           d > 0  ? '#FC4E2A' :
                    '#FFEDA0';
}

Explication du code :

L.control() : Crée un contrôle personnalisé pour la légende et définit sa position sur la carte (ici en bas à droite).

legend.onAdd : Cette fonction définit comment la légende est générée. Ici, nous utilisons des plages de valeurs (grades) et associons chaque plage à une couleur via la fonction getColor().

getColor() : Cette fonction retourne une couleur en fonction de la valeur (par exemple, une couleur plus foncée pour des valeurs plus élevées).

Personnalisation de la légende :

Position : Vous pouvez changer la position de la légende en ajustant la valeur de l’option position (par exemple, 'topright', 'bottomleft').

Contenu : La légende peut contenir des icônes, textes, et même des images, selon vos besoins.

Couleurs et symboles : Vous pouvez personnaliser la légende pour qu’elle corresponde à la cartographie utilisée (par exemple, associer des couleurs de zones spécifiques à des catégories).

Avantages de la légende :

Clarté : Elle permet de rendre la carte plus compréhensible en expliquant les symboles et couleurs utilisés.

Interactivité : Elle aide l’utilisateur à interpréter les données sur la carte, ce qui est essentiel lorsque vous travaillez avec des cartes thématiques.

4. Combiner échelle et légende

Il est courant d’ajouter à la fois une échelle et une légende sur la carte, car ces deux widgets servent des objectifs différents mais complémentaires. Tandis que l’échelle fournit une idée des distances réelles, la légende aide à comprendre les données représentées graphiquement.

Exemple de code pour ajouter les deux :

L.control.scale({
    metric: true,
    imperial: false
}).addTo(map);

const legend = L.control({ position: 'bottomright' });
legend.onAdd = function (map) {
    const div = L.DomUtil.create('div', 'info legend');
    div.innerHTML = '<i style="background:' + getColor(35) + '"></i> 35-40°C';
    return div;
};
legend.addTo(map);

Avantages de cette combinaison :

L’utilisateur bénéficie d’une vue d’ensemble complète avec la possibilité de mesurer des distances tout en ayant une explication des données de la carte.

Cela améliore l’expérience utilisateur en fournissant des outils clairs pour interagir avec la carte.

5. Résumé et meilleures pratiques

Widget Échelle : Ajoutez une échelle dynamique pour permettre aux utilisateurs de visualiser facilement les distances sur la carte. C’est un outil essentiel pour les cartes interactives.

Widget Légende : Utilisez une légende pour fournir une explication des symboles et couleurs, notamment lorsque vous travaillez avec des données thématiques ou géospatiales complexes.

Personnalisation : Les deux widgets peuvent être personnalisés (couleurs, contenu, position) pour correspondre à la charte graphique de votre projet.

Amélioration de l’UX : Ces widgets enrichissent l’interface de la carte en offrant des informations supplémentaires, rendant la carte plus interactive et facile à comprendre.

Conclusion

L’ajout de widgets d’échelle et de légende personnalisée dans Leaflet enrichit l’expérience de l’utilisateur et rend la carte plus informative. L’échelle permet de mesurer des distances en temps réel, tandis que la légende fournit des explications claires sur les données représentées. En combinant ces deux éléments, vous pouvez créer une carte plus professionnelle, fonctionnelle et accessible.

Exercice : Carte thématique avec styles et légende

Objectif : Créer une carte complète avec des éléments visuels personnalisés et des contrôles améliorant l’expérience utilisateur.

Consignes

Créer une carte centrée sur une zone de votre choix
→ Choisir un fond de carte (ex. : OpenStreetMap, Esri, etc.)

Ajouter une couche GeoJSON représentant des données thématiques
→ Ex. : zones naturelles, bâtiments, quartiers…

Appliquer un style conditionnel (couleur selon une propriété)

Créer une légende personnalisée correspondant aux styles

Ajouter des marqueurs avec icônes personnalisées
→ Par exemple pour localiser des points d’intérêt

Ajouter des widgets :
Une échelle
Un contrôle de zoom déplacé
Un bouton personnalisé (ex : recentrer)

Bonus

Ajoutez une mini-map pour le repérage

Ajoutez une popup dynamique pour chaque zone/point

Voir le résultat dans un nouvel onglet.

<-Session 3 : Couches GeoJSON

->Session 5 : Evénements

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é !