Tutoriel Leaflet: session 3

29 avril 202528 avril 2025 Atilio Francois No Comments

Données GeoJSON et styles

En cours de chargement…

Cela prend trop de temps ?

Recharger le document

Ouvrir dans un nouvel onglet

Table of Contents

Diapo 1 : Qu’est-ce que le GeoJSON ?

GeoJSON est un format de données léger et largement utilisé pour la représentation des objets géographiques dans un environnement web. Il est basé sur le format JSON (JavaScript Object Notation), un format de données textuelles léger, facile à lire et à écrire, et largement supporté par de nombreuses bibliothèques et outils de développement, y compris Leaflet, OpenLayers, et d’autres systèmes SIG (Systèmes d’Information Géographique).

GeoJSON est spécifiquement conçu pour décrire des objets géographiques, comme des points, des lignes, des polygones, et des ensembles de ces objets, tout en incluant des informations supplémentaires (comme des attributs) sur ces objets. Il est utilisé pour intégrer et échanger des données géospatiales dans des applications web et des systèmes SIG modernes.

Diapo 2 : Structure d’un fichier GeoJSON

Un fichier GeoJSON est un format de données textuel basé sur le standard JSON, conçu pour représenter des objets géographiques. Il est couramment utilisé dans les applications web de cartographie. Les objets contenus dans un fichier GeoJSON sont organisés selon une structure hiérarchique, centrée autour de trois éléments clés :

1. FeatureCollection

C’est l’élément racine (le conteneur principal) d’un fichier GeoJSON. Il regroupe un ensemble de features, c’est-à-dire des entités géographiques individuelles. Une FeatureCollection peut contenir différents types d’objets géographiques : des points, des lignes ou des polygones. En règle générale, un fichier GeoJSON contient une seule FeatureCollection.

2. Feature (caractéristique géographique)

Chaque entité géographique est définie comme une feature. Une feature représente un objet précis sur la carte (comme un bâtiment, un arbre, un sentier, une zone protégée, etc.). Elle est composée de deux parties essentielles :

geometry : c’est la description géométrique de l’objet, qui peut prendre la forme d’un Point, d’une LineString (ligne), ou d’un Polygon. La géométrie est définie par un type et des coordonnées.

properties : ce sont les informations descriptives associées à l’objet (métadonnées). Elles peuvent inclure un nom, une catégorie, une description, une date, une valeur numérique, etc. Ces propriétés sont exprimées sous forme de paires clé-valeur, comme dans une fiche d’identité de l’objet.

3. Geometry (géométrie)

La géométrie précise la forme et la position spatiale de la feature. Elle repose sur un type et une ou plusieurs coordonnées géographiques (longitude, latitude). Les types géométriques les plus utilisés sont :

Point : un emplacement unique sur la carte, défini par une paire de coordonnées [longitude, latitude].

LineString : une ligne composée de plusieurs points reliés entre eux.

Polygon : un ensemble de points formant une surface fermée (par exemple : parcelle, lac, commune).

MultiPoint, MultiLineString, MultiPolygon : ces types permettent de regrouper plusieurs géométries similaires dans une même feature (par exemple : un archipel, un réseau routier, un ensemble de zones protégées).

Diapo 3 : Pourquoi utiliser GeoJSON ?

Avantages de GeoJSON

Facile à lire et à écrire : Étant basé sur JSON, le format est facile à comprendre et à manipuler.

Compatibilité : Il est largement pris en charge par les bibliothèques JavaScript modernes (comme Leaflet, OpenLayers, Mapbox), ainsi que par de nombreux outils SIG.

Format léger : GeoJSON est un format léger et textuel qui se prête bien à une utilisation web, notamment pour le transfert de données géospatiales.

Extensibilité : Il permet d’ajouter des propriétés personnalisées aux objets géographiques, ce qui le rend flexible pour diverses applications.

Limites de GeoJSON

Performance : Bien que GeoJSON soit léger, la taille des données peut augmenter considérablement lorsque vous travaillez avec de grandes quantités d’objets géographiques complexes.

Absence de prise en charge des projections multiples : GeoJSON fonctionne principalement avec la projection EPSG:4326 (latitude/longitude), ce qui peut poser problème pour certaines applications nécessitant des projections spécifiques.

Diapo 4 : Chargement d’un fichier GeoJSON

Charger un fichier GeoJSON externe dans Leaflet est simple et efficace, que ce soit via une URL directe ou une requête HTTP comme fetch(). Cette fonctionnalité est essentielle pour intégrer des données géospatiales en temps réel à partir de serveurs externes, ce qui est très courant dans les applications cartographiques web

Diapo 5 : Avec fetch()

Lorsque vous travaillez avec Leaflet pour afficher des cartes interactives, vous pouvez charger un fichier GeoJSON local directement dans votre code JavaScript. Ce fichier peut être inclus dans le même dossier que votre application, ce qui permet de l’utiliser sans avoir à faire une requête HTTP externe. Cela est particulièrement utile pour les données locales ou lorsque vous souhaitez pré-charger des objets géographiques sur la carte.

Par exemple, voici un fichier GeoJSON qui décrit un point représentant un lieu :

paris.geojson

  "type": "FeatureCollection",

  "features": [

      "type": "Feature",

      "geometry": {

        "type": "Point",

        "coordinates": [2.3522, 48.8566]

},

      "properties": {

        "name": "Paris",

        "description": "La capitale de la France"

Supposons que ce fichier soit enregistré sous le nom paris.geojson dans le même dossier que votre fichier HTML.

Si vous avez un fichier GeoJSON externe dans le même répertoire que votre application (par exemple paris.geojson), vous pouvez utiliser fetch() pour récupérer le fichier et l’ajouter à la carte.

Voici un exemple :

paris_geojson.html

<!DOCTYPE html>

<html lang="fr">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Carte Leaflet avec GeoJSON local</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

</head>

<body>

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

    <script>

        // Initialiser la carte

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

        // Ajouter une couche de base (carte OpenStreetMap)

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

        // Charger le fichier GeoJSON local et l'ajouter à la carte

        fetch('paris.geojson')

            .then(response => response.json()) // Convertir la réponse en JSON

            .then(data => {

                // Ajouter l'objet GeoJSON à la carte

                L.geoJSON(data).addTo(map);

})

            .catch(error => console.error('Erreur lors du chargement du fichier GeoJSON :', error));

    </script>

</body>

</html>

Explication du code :

fetch('paris.geojson') : Récupère le fichier GeoJSON local.

response.json() : Convertit la réponse en objet JavaScript.

L.geoJSON(data).addTo(map) : Ajoute l’objet GeoJSON à la carte.

.catch() : Capture les erreurs si le fichier ne peut pas être chargé.

Avec ce code (L.geoJSON(data).addTo(map)) le point GeoJSON est bien ajouté à la carte, mais il n’est pas visible car aucun style ni popup n’est défini, et un Point sans icône personnalisée ou popup ne s’affiche pas par défaut dans Leaflet.

Voici une version corrigée du code HTML avec une popup et une icône par défaut qui rend visible le point « Paris » :

paris_geojson.html

// Charger le fichier GeoJSON

fetch(‘paris.geojson’)

.then(response => response.json())

.then(data => {

L.geoJSON(data, {

pointToLayer: function (feature, latlng) {

return L.marker(latlng).bindPopup(

« <b> » + feature.properties.name + « </b><br> » + feature.properties.description

);

}

}).addTo(map);

})

.catch(error => console.error(‘Erreur lors du chargement du fichier GeoJSON :’, error));

Voir la page HTML dans un nouvel onglet.

Diapo 6 : Insérer directement dans le code

Si vous préférez ne pas utiliser de fichier externe et inclure directement les données GeoJSON dans le code JavaScript, vous pouvez définir l’objet GeoJSON dans une variable et l’ajouter directement à la carte.

Exemple :

paris_geojson_code.html

<!DOCTYPE html>

<html lang="fr">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Carte Leaflet avec GeoJSON local</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

</head>

<body>

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

    <script>

        // Initialiser la carte

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

        // Ajouter une couche de base (carte OpenStreetMap)

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

        // Définir les données GeoJSON directement dans une variable

        var geojsonData = {

          "type": "FeatureCollection",

          "features": [

              "type": "Feature",

              "geometry": {

                "type": "Point",

                "coordinates": [2.3522, 48.8566]

},

              "properties": {

                "name": "Paris",

                "description": "La capitale de la France"

};

        // Ajouter l'objet GeoJSON à la carte

        L.geoJSON(geojsonData).addTo(map);

    </script>

</body>

</html>

Explication du code :

Dans cet exemple, le GeoJSON est directement défini dans une variable JavaScript (geojsonData).

Cette approche est simple et convient lorsque vous avez des données GeoJSON relativement petites et que vous ne souhaitez pas effectuer de requêtes externes pour les charger.

V oir la page HTML dans un nouvel onglet.

Avantages et limitations

Avantages :

Facile à implémenter, surtout pour des fichiers GeoJSON simples ou des projets où les données sont petites.

Pas besoin de gérer des requêtes HTTP complexes.

Limitations :

La méthode fetch() nécessite que le fichier soit servi via un serveur local ou distant (pas d’accès direct aux fichiers locaux via le navigateur sans serveur).

Si vous avez beaucoup de données géospatiales, le chargement direct via JavaScript peut devenir lourd et moins performant.

Conclusion

Charger un fichier GeoJSON local dans Leaflet est une opération simple qui peut être effectuée de deux manières principales : soit en utilisant la méthode fetch() pour charger un fichier externe, soit en incluant directement les données GeoJSON dans votre code JavaScript. Cette flexibilité permet de facilement intégrer des objets géographiques dans des cartes interactives.

Diapo 7 : Style conditionnel avec Leaflet

Le style conditionnel dans Leaflet permet de personnaliser l’apparence des éléments géographiques (points, lignes, polygones) en fonction de leurs propriétés ou d’autres critères. Cela permet de rendre les cartes plus interactives et informatives, en affichant des couleurs, des tailles ou des formes différentes selon des valeurs spécifiques. Par exemple, on peut colorier des polygones en fonction de leur superficie ou afficher des marqueurs de taille variable en fonction de la population d’une ville.

Dans Leaflet, vous pouvez appliquer des styles conditionnels en fonction des propriétés d’un objet GeoJSON. Cela se fait généralement dans la fonction style que l’on passe à la méthode L.geoJSON(). Cette fonction permet de définir un style personnalisé pour chaque feature en fonction de ses propriétés.

Personnaliser les styles des objets géospatiaux

Les objets géospatiaux dans Leaflet, tels que les points, polylignes, polygones ou encore les couches GeoJSON, peuvent être stylisés en définissant des paramètres comme la couleur, l’épaisseur des lignes, le remplissage, etc. Voici un exemple détaillé de personnalisation de style.

Personnaliser les styles avec GeoJSON

Lorsque vous travaillez avec des objets GeoJSON, vous pouvez personnaliser leur style en utilisant une fonction de style. Cette fonction prend en charge des paramètres tels que la couleur de la ligne, le remplissage des polygones, l’opacité, etc.

Voici un exemple pour personnaliser le style des objets GeoJSON :

paris_geojson_code.html

<!DOCTYPE html>

<html lang="fr">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Carte Leaflet avec GeoJSON personnalisé</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

</head>

<body>

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

    <script>

        // Initialiser la carte

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

        // Ajouter une couche de base (carte OpenStreetMap)

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

        // Données GeoJSON (ici un simple polygone)

        var geojsonData = {

          "type": "FeatureCollection",

          "features": [

              "type": "Feature",

              "geometry": {

                "type": "Polygon",

                "coordinates": [

                    [2.35, 48.85],

                    [2.36, 48.85],

                    [2.36, 48.86],

                    [2.35, 48.86],

                    [2.35, 48.85]

},

              "properties": {

                "name": "Paris Square"

};

        // Fonction pour personnaliser le style du polygone

        var style = function (feature) {

          return {

            color: "blue",          // Couleur de la bordure

            weight: 3,              // Épaisseur de la bordure

            opacity: 1,             // Opacité de la bordure

            fillColor: "lightblue", // Couleur de remplissage

            fillOpacity: 0.5       // Opacité du remplissage

};

};

        // Ajouter les données GeoJSON avec le style personnalisé

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

    </script>

</body>

</html>

V oir la page HTML dans un nouvel onglet.

Explication :

color : Définit la couleur de la bordure du polygone.

weight : Définit l’épaisseur de la bordure.

fillColor : Définit la couleur de remplissage du polygone.

fillOpacity : Définit l’opacité du remplissage du polygone.

opacity : Définit l’opacité de la bordure.

Diapo 8 : Autres propriétés de style disponibles

Personnaliser un popup GeoJSON

Lorsqu’il s’agit de travailler avec des données GeoJSON, vous pouvez également personnaliser les popups en fonction des propriétés des objets géographiques. Voici comment faire :

geojson_popup.html

<!DOCTYPE html>

<html lang="fr">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Carte Leaflet avec Popups et GeoJSON</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

</head>

<body>

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

    <script>

        // Initialiser la carte

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

        // Ajouter une couche de base (carte OpenStreetMap)

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

        // Données GeoJSON avec des propriétés pour chaque objet

        var geojsonData = {

          "type": "FeatureCollection",

          "features": [

              "type": "Feature",

              "geometry": {

                "type": "Point",

                "coordinates": [2.3522, 48.8566]

},

              "properties": {

                "name": "Paris",

                "description": "La capitale de la France"

};

        // Ajouter les données GeoJSON à la carte avec un popup personnalisé

        L.geoJSON(geojsonData, {

          onEachFeature: function (feature, layer) {

            layer.bindPopup("<b>" + feature.properties.name + "</b><br>" + feature.properties.description);

        }).addTo(map);

    </script>

</body>

</html>

Explication :

onEachFeature : Cette fonction est appelée pour chaque objet GeoJSON. Elle permet de personnaliser les interactions, y compris les popups.

bindPopup() : Le contenu du popup est ici défini dynamiquement à partir des propriétés du GeoJSON.

Conclusion

La personnalisation des styles et des popups dans Leaflet permet de créer des cartes plus interactives et visuellement attrayantes. Vous pouvez styliser des objets géospatiaux comme des polygones et des polylignes, et ajouter des popups interactifs pour fournir des informations supplémentaires. Que ce soit pour une simple carte interactive ou pour une application plus complexe, la personnalisation des styles et des popups joue un rôle clé pour rendre l’expérience utilisateur plus agréable et fonctionnelle.

Diapo 9 : Style conditionnel d’un polygone

Appliquer des styles dynamiques aux polygones avec Leaflet

Quand on travaille avec des données GeoJSON, il est souvent utile de changer l’apparence d’un polygone en fonction de ses propriétés. Cela permet par exemple de visualiser rapidement des différences d’altitude, de densité, de superficie, etc.

Voici un exemple où on colore les polygones en fonction de l’altitude :

// Fonction de style pour les polygones, basée sur l'altitude

function polygonStyle(feature) {

  return {

fillColor: feature.properties.altitude > 300 ? « green » : « yellow », // Altitude > 300m = vert, sinon jaune

weight: 2, // Épaisseur des contours

opacity: 1, // Opacité du contour (1 = totalement opaque)

color: « black », // Couleur du contour

dashArray: « 3 », // Trait en pointillés

fillOpacity: 0.5 // Opacité du remplissage (0.5 = semi-transparent)

};

}

Et voici comment l’utiliser lors de l’ajout d’un calque GeoJSON :

L.geoJSON(geojsonPolygons, {

style: polygonStyle

}).addTo(map);

Explication pas à pas

feature.properties.altitude : on récupère la propriété altitude de chaque polygone.

fillColor: condition ? « green » : « yellow« : on utilise une condition ternaire :

Si l’altitude est supérieure à 300, la couleur de remplissage sera verte (green).

Sinon, elle sera jaune (yellow).

Cette logique rend la carte visuellement informative : on distingue immédiatement les zones en altitude (vertes) des zones basses (jaunes), sans avoir à lire les données.

Personnalisation possible

Vous pouvez bien sûr adapter ce style à d’autres propriétés, par exemple :

Colorier les polygones en fonction de la densité de population.

Utiliser des couleurs différentes selon la catégorie de terrain (forêt, zone urbaine, etc.).

Ajouter un tooltip ou une popup pour afficher les détails au survol ou au clic.

Diapo 10 : Interactions avec GeoJSON dans Leaflet

Interactions avec les objets GeoJSON dans Leaflet

L’objectif ici est de rendre la carte interactive : afficher des informations, réagir aux clics de l’utilisateur, ou même modifier l’apparence d’un élément en temps réel.

L’option onEachFeature

Lorsque vous utilisez L.geoJSON(…), vous pouvez spécifier une option spéciale appelée onEachFeature.

L.geoJSON(data, {

  onEachFeature: function(feature, layer) {

    // Action à réaliser pour chaque entité GeoJSON

});

Que permet onEachFeature ?

Cette fonction est appelée automatiquement pour chaque « feature« (entité) du fichier GeoJSON.

Elle permet :

D’ajouter un popup avec layer.bindPopup() pour afficher des informations.

D’attacher des événements comme click, mouseover, mouseout, etc.

De modifier dynamiquement le style (par exemple changer la couleur lors d’un clic).

D’ajouter des tooltips, animations ou autres effets d’interaction.

Exemple simple : popup avec le nom

L.geoJSON(data, {

  onEachFeature: function(feature, layer) {

    // Affiche le nom dans une popup

    layer.bindPopup(feature.properties.nom);

}).addTo(map);

Quand l’utilisateur clique sur une entité (point, ligne ou polygone), une boîte popup s’ouvre avec la valeur de la propriété « nom ».

On peut enrichir cette fonction en y ajoutant plusieurs types d’interactions :

onEachFeature: function(feature, layer) {

  layer.bindPopup("<b>" + feature.properties.nom + "</b>");

  // Changer la couleur au survol

  layer.on("mouseover", function () {

    this.setStyle({ color: "blue" });

});

  // Remettre la couleur d'origine à la sortie de la souris

  layer.on("mouseout", function () {

    this.setStyle({ color: "black" });

});

En résumé

onEachFeature est une porte d’entrée idéale pour rendre une carte interactive. C’est dans cette fonction que l’on définit le comportement de chaque entité GeoJSON affichée sur la carte.

Exercice séance 3: Affichage et interaction avec des données GeoJSON dans Leaflet

Objectif :

Créer une carte interactive affichant des zones stylisées dynamiquement selon leurs attributs, avec popup au clic.

Contenu :

Vous allez travailler avec un petit fichier HTML contenant :

Une carte Leaflet centrée sur l’île Maurice

Des polygones en GeoJSON représentant des zones fictives (agricole et urbaine)

Un style conditionnel selon le type de zone

Une popup affichant les informations de chaque zone

Ce fichier est …\leaflet_starter_kit\data\exercice_geojson.html

Voir ce fichier dans un nouvel onglet.

À faire :

Ouvrir le fichier HTML dans un navigateur (vous pouvez l’enregistrer localement sous le nom exercice-geojson.html).

Observer :
- La carte affiche deux polygones.
- Chaque polygone a une couleur différente selon son type.
- Un popup s’affiche au clic, avec le nom et le type de zone.

Comprendre :
- Le style est défini par la fonction styleFeature() qui teste feature.properties.type.
- L’interaction est définie par onEachFeature, qui lie un bindPopup() à chaque entité.

Modifiez le code pour faire les exercices suivants :
- Ajouter une nouvelle zone de type "forêt" avec une géométrie simple.
- Dans styleFeature(), donnez à la zone « forêt » une couleur différente (ex. : "darkgreen").
- Dans onEachFeature(), modifiez le contenu du popup pour qu’il affiche aussi un petit message comme "Cliquez pour zoomer".

Bonus :

Ajoutez une opacité différente selon le type de zone.

Testez un effet au survol avec mouseover et mouseout.

Résultat attendu :

Une carte avec trois zones colorées, chacune avec :

Un style propre

Un popup personnalisé

Une interaction au clic

Voir le résultat final sur un nouvel onglet.

<-Session 2 : Couches et interactivité

->Session 4 : Contrôles

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