Ajout et Visualisation de Données Géographiques sur une Carte Interactive

Contexte du cours : Maîtriser les Applications Web Géospatiales : Cartographie Interprétative et Services de Localisation

Introduction

Bienvenue dans cette leçon dédiée à l'art et la science d'intégrer des données géographiques sur une carte interactive. Dans le monde numérique d'aujourd'hui, la visualisation spatiale est devenue un élément crucial pour de nombreuses applications, allant des services de navigation aux plateformes d'analyse de données environnementales. Comprendre comment prendre des informations liées à des lieux et les rendre accessibles et interactives sur une carte est une compétence fondamentale pour tout développeur géospatial.

Au cours de cette leçon, nous allons explorer les concepts clés et les outils pratiques pour ajouter, styliser et interagir avec des données géographiques sur une carte web. Nous nous concentrerons sur la bibliothèque JavaScript Leaflet, reconnue pour sa simplicité et sa légèreté, et sur le format de données GeoJSON, un standard incontournable pour l'échange d'informations géospatiales.

À la fin de cette leçon, vous serez capable de :

Mettre en place une carte interactive de base avec Leaflet.
Ajouter différents types de primitives géographiques (marqueurs, lignes, polygones).
Comprendre et utiliser le format GeoJSON pour structurer vos données.
Charger et personnaliser des données GeoJSON sur votre carte.
Rendre votre carte interactive grâce à des pop-ups et des gestionnaires d'événements.

Préparez-vous à transformer des coordonnées en expériences visuelles dynamiques !

Prérequis

Pour tirer le meilleur parti de cette leçon, une connaissance de base des technologies web suivantes est recommandée :

HTML : Structure des pages web.
CSS : Stylisation des éléments web.
JavaScript : Logique client-side et manipulation du DOM.
Notions de base sur les serveurs web (même un simple python -m http.server suffit pour tester).

1. Comprendre les Données Géographiques et la Cartographie Interactive

Avant de plonger dans le code, il est essentiel de bien saisir ce que sont les données géographiques et pourquoi la cartographie interactive est si puissante.

1.1 Qu'est-ce qu'une Donnée Géographique ?

Une donnée géographique (ou géodonnée) est toute information qui fait référence à un emplacement spécifique sur Terre. Elle se caractérise par deux composantes principales :

Géométrie : La forme ou la position de l'objet (par exemple, des coordonnées de latitude et longitude).
Attributs : Les informations descriptives associées à cette géométrie (par exemple, le nom d'un lieu, sa population, sa fonction).

Les géométries sont généralement classées en types vectoriels :

Point : Une seule paire de coordonnées (ex: un magasin, un arrêt de bus).
Ligne (ou Polyligne) : Une série de points connectés (ex: une route, une rivière).
Polygone : Une ligne fermée qui délimite une zone (ex: un pays, un lac, un bâtiment).

Il existe également des données raster (images satellitaires, modèles numériques de terrain), mais nous nous concentrerons sur les données vectorielles pour cette leçon.

1.2 Pourquoi la Cartographie Interactive ?

Une carte statique peut montrer des informations, mais une carte interactive offre bien plus :

Exploration : Les utilisateurs peuvent zoomer, dézoomer, se déplacer, et découvrir les détails par eux-mêmes.
Interactivité : Des éléments cliquables peuvent révéler des informations supplémentaires via des pop-ups ou déclencher des actions.
Personnalisation : Les utilisateurs peuvent souvent filtrer ou superposer des couches de données pour adapter la carte à leurs besoins.
Dynamisme : Les données peuvent être mises à jour en temps réel, reflétant des changements instantanés (trafic, météo).

1.3 Introduction à Leaflet.js

Leaflet est une bibliothèque JavaScript open-source et légère conçue pour créer des cartes interactives adaptées aux mobiles. Elle est réputée pour sa simplicité d'utilisation, ses performances et sa documentation claire. C'est un excellent point de départ pour quiconque souhaite se lancer dans la cartographie web.

Principales caractéristiques de Leaflet :

Légère : Moins de 40 KB de JS gzippé.
Performante : Rapide et fluide même sur des appareils mobiles.
Fonctionnalités essentielles : Tuiles, marqueurs, pop-ups, chemins, polygones, GeoJSON, etc.
Extensible : Un vaste écosystème de plugins pour des fonctionnalités avancées.

2. Mise en Place de l'Environnement de Base

Commençons par créer notre première carte Leaflet.

2.1 Création du Fichier HTML

Créez un fichier index.html avec la structure de base suivante :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma Première Carte Interactive</title>

    <!-- Les styles CSS de Leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
          integrity="sha256-p4NxAoJBhIIN+hmNHrzBxwFd9SjfrECJxkMiMJhSzFG="
          crossorigin=""/>

    <!-- Nos propres styles pour la carte -->
    <style>
        #map {
            height: 100vh; /* La carte prendra toute la hauteur de la fenêtre */
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <!-- Le script JavaScript de Leaflet -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
            integrity="sha256-20nQCchB9co0qIjJZRGuk2/4K9+sSlVPNzSLFslxPNH="
            crossorigin=""></script>

    <!-- Notre propre script JavaScript pour initialiser la carte -->
    <script>
        // Le code JavaScript viendra ici
    </script>
</body>
</html>

link rel="stylesheet" ... : Importe la feuille de style CSS de Leaflet, nécessaire pour l'apparence de la carte.
style : Nous définissons un style minimal pour que notre div avec l'ID map prenne toute la hauteur de la fenêtre, ce qui est courant pour les applications cartographiques plein écran.
<div id="map"></div> : C'est l'élément HTML où notre carte sera rendue. Leaflet aura besoin de cet ID pour cibler le conteneur.
script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" ... : Importe la bibliothèque JavaScript de Leaflet. Il est important de la placer après l'élément div de la carte et avant votre propre script pour que Leaflet soit disponible.
script : C'est ici que nous allons écrire le code JavaScript pour initialiser et manipuler notre carte.

2.2 Initialisation de la Carte

Maintenant, ajoutons le code JavaScript pour afficher une carte de base.

// Initialisation de la carte
// L.map('map') crée une instance de carte et la lie à l'élément HTML avec l'ID 'map'.
// .setView([latitude, longitude], zoom) définit la vue initiale de la carte.
// Ici, nous centrons sur Paris et un niveau de zoom de 13.
var map = L.map('map').setView([48.8566, 2.3522], 13);

// Ajout d'une couche de tuiles (tiles layer)
// Les tuiles sont les images qui composent le fond de carte.
// Nous utilisons OpenStreetMap comme fournisseur de tuiles, qui est gratuit et open-source.
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19, // Zoom maximal autorisé
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' // Attribution obligatoire
}).addTo(map); // Ajoute la couche de tuiles à notre carte

Explication du code :

L.map('map') : Cette fonction crée une nouvelle instance de carte Leaflet et la lie à l'élément HTML ayant l'ID map.
.setView([48.8566, 2.3522], 13) : Définit la vue initiale de la carte.
- [48.8566, 2.3522] sont les coordonnées de latitude et longitude pour le centre de Paris.
- 13 est le niveau de zoom. Un chiffre plus élevé signifie un zoom plus proche.
L.tileLayer(...) : Crée une couche de tuiles.
- 'https://tile.openstreetmap.org/{z}/{x}/{y}.png' est le modèle d'URL pour les tuiles OpenStreetMap.
  - {z} est le niveau de zoom.
  - {x} et {y} sont les coordonnées des tuiles sur la grille.
- { maxZoom: 19, attribution: ... } sont des options pour cette couche de tuiles.
  - maxZoom empêche l'utilisateur de zoomer au-delà d'un certain niveau (les tuiles peuvent ne pas exister ou devenir floues).
  - attribution est une chaîne de caractères qui doit être affichée sur la carte pour créditer le fournisseur de tuiles (c'est une exigence légale et éthique pour la plupart des fournisseurs).
.addTo(map) : Ajoute la couche de tuiles nouvellement créée à notre instance de carte (map).

En ouvrant index.html dans votre navigateur, vous devriez maintenant voir une carte interactive centrée sur Paris !

3. Ajouter des Données Simples sur la Carte

Leaflet permet d'ajouter facilement différentes primitives géométriques.

3.1 Les Marqueurs (Markers)

Les marqueurs sont utilisés pour indiquer des points spécifiques sur la carte, souvent représentés par une icône.

// Ajout d'un marqueur
// L.marker([latitude, longitude]) crée un marqueur à l'emplacement spécifié.
// .addTo(map) l'ajoute à la carte.
// .bindPopup("Texte du popup") associe un popup qui s'affichera au clic sur le marqueur.
L.marker([48.8584, 2.2945]).addTo(map)
    .bindPopup("<b>Tour Eiffel</b><br>Monument emblématique de Paris.");

// On peut aussi ouvrir le popup directement au chargement de la carte
L.marker([48.8606, 2.3376]).addTo(map)
    .bindPopup("Musée du Louvre.").openPopup();

3.2 Les Cercles (Circles) et Rectangles

Les cercles sont utiles pour représenter une zone autour d'un point. Les rectangles sont aussi simples à créer.

// Ajout d'un cercle
L.circle([48.8530, 2.3499], {
    color: 'red',          // Couleur du contour
    fillColor: '#f03',     // Couleur de remplissage
    fillOpacity: 0.5,      // Opacité du remplissage
    radius: 500            // Rayon en mètres
}).addTo(map).bindPopup("Un rayon de 500m autour de Notre-Dame.");

// Ajout d'un rectangle (une sorte de polygone simple)
L.rectangle([[48.84, 2.2], [48.85, 2.4]], {
    color: 'purple',
    weight: 1,
    fillOpacity: 0.2
}).addTo(map).bindPopup("Zone d'intérêt.");

3.3 Les Polylignes (Polylines)

Les polylignes permettent de représenter des chemins, des routes ou des frontières.

// Définition d'une série de points pour une polyligne
var latlngs = [
    [48.8659, 2.3792], // Place de la République
    [48.8631, 2.3615], // Centre Pompidou
    [48.8566, 2.3522]  // Notre-Dame
];

// Création de la polyligne
L.polyline(latlngs, {
    color: 'blue',     // Couleur de la ligne
    weight: 5,         // Épaisseur de la ligne
    opacity: 0.7       // Opacité de la ligne
}).addTo(map)
  .bindPopup("Un chemin à travers le centre de Paris.");

3.4 Les Polygones (Polygons)

Les polygones sont utilisés pour représenter des zones fermées, comme des bâtiments ou des parcs.

// Définition des sommets d'un polygone (le dernier point est automatiquement connecté au premier)
var polygonPoints = [
    [48.8738, 2.2950], // Arc de Triomphe
    [48.8693, 2.3168], // Grand Palais
    [48.8601, 2.3000]  // Place de la Concorde
];

// Création du polygone
L.polygon(polygonPoints, {
    color: 'green',
    fillColor: '#9acd32', // Un vert clair
    fillOpacity: 0.4,
    weight: 2
}).addTo(map)
  .bindPopup("Un triangle imaginaire à Paris.");

Récapitulatif des méthodes d'ajout :

L.marker([lat, lng], options) : Pour les points.
L.circle([lat, lng], options) : Pour les cercles (rayon en mètres).
L.polyline([[lat1, lng1], [lat2, lng2], ...], options) : Pour les lignes.
L.polygon([[lat1, lng1], [lat2, lng2], ...], options) : Pour les polygones.
.bindPopup("Contenu") : Pour associer un popup au clic.
.addTo(map) : Pour ajouter l'élément à la carte.

4. Travailler avec des Données Structurées : GeoJSON

Ajouter des points manuellement est fastidieux pour de grandes quantités de données. C'est là que GeoJSON entre en jeu.

4.1 Qu'est-ce que GeoJSON ?

GeoJSON est un format standard ouvert pour encoder des structures de données géographiques utilisant le format JSON (JavaScript Object Notation). Il est largement utilisé pour l'échange de données géospatiales sur le web en raison de sa simplicité et de sa compatibilité avec JavaScript.

Une structure GeoJSON peut représenter :

Geometry : Un simple point, ligne ou polygone.
Feature : Une géométrie avec des propriétés (properties) associées (les attributs).
FeatureCollection : Une collection de plusieurs Features. C'est le format le plus courant pour un ensemble de données.

Exemple de structure GeoJSON pour un Point :

{
  "type": "Point",
  "coordinates": [2.3522, 48.8566]
}

Notez que GeoJSON utilise les coordonnées [longitude, latitude] (X, Y) contrairement à Leaflet qui attend [latitude, longitude] (Y, X) pour ses fonctions.

Exemple de structure GeoJSON pour une Feature (Point avec propriétés) :

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [2.3522, 48.8566]
  },
  "properties": {
    "nom": "Notre-Dame de Paris",
    "adresse": "6 Parvis Notre-Dame - Pl. Jean-Paul II, 75004 Paris",
    "type": "Cathédrale"
  }
}

4.2 Avantages de GeoJSON

Standardisation : Facilite l'échange de données entre différentes applications.
Lisibilité : Simple à lire et à écrire pour les humains et les machines.
Flexibilité : Peut représenter des géométries simples ou complexes avec des attributs riches.
Intégration Web : S'intègre nativement avec JavaScript.

4.3 Charger des Données GeoJSON avec Leaflet

Leaflet dispose d'une couche dédiée pour GeoJSON, L.geoJSON(), qui simplifie grandement l'affichage de ces données.

// Exemple de données GeoJSON directement dans le code JavaScript
var mesDonneesGeoJSON = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "nom": "Restaurant Le Jules Verne",
                "type": "Restaurant",
                "cuisine": "Française Gastronomique",
                "altitude": 125,
                "description": "Situé au 2ème étage de la Tour Eiffel."
            },
            "geometry": {
                "type": "Point",
                "coordinates": [2.2945, 48.8584] // Longitude, Latitude
            }
        },
        {
            "type": "Feature",
            "properties": {
                "nom": "La Seine (Partie Parisienne)",
                "type": "Rivière",
                "longueur_km": 13,
                "importance": "Historique et touristique"
            },
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [2.2269, 48.8872], // Pont de Suresnes
                    [2.2882, 48.8529], // Pont de Bir-Hakeim
                    [2.3271, 48.8576], // Pont Neuf
                    [2.3610, 48.8407]  // Pont de Bercy
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "nom": "Jardin des Tuileries",
                "type": "Parc",
                "superficie_ha": 25.5
            },
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [[2.3218, 48.8643], [2.3218, 48.8643], [2.3298, 48.8659], [2.3330, 48.8631], [2.3298, 48.8617], [2.3218, 48.8643]]
                ]
            }
        }
    ]
};

// Ajout des données GeoJSON à la carte
L.geoJSON(mesDonneesGeoJSON).addTo(map);

Si vous exécutez ce code, vous verrez vos données apparaître, mais elles auront le style par défaut de Leaflet et les pop-ups ne seront pas formatés. C'est ce que nous allons améliorer.

4.4 Personnalisation des Éléments GeoJSON

La fonction L.geoJSON() accepte un deuxième argument, un objet d'options, qui permet de contrôler la manière dont les données sont affichées et rendues interactives.

Options clés de L.geoJSON() :

style : Une fonction ou un objet pour définir le style des lignes et polygones.
pointToLayer : Une fonction pour personnaliser la création des marqueurs pour les points.
onEachFeature : Une fonction exécutée pour chaque Feature ajoutée, idéale pour ajouter des pop-ups ou des événements.

// Ajout des données GeoJSON avec personnalisation
L.geoJSON(mesDonneesGeoJSON, {
    // 1. Personnalisation du style pour les lignes et polygones
    style: function(feature) {
        switch (feature.geometry.type) {
            case 'LineString':
                return { color: '#007bff', weight: 4, opacity: 0.8 }; // Bleu pour la Seine
            case 'Polygon':
                return { color: '#28a745', fillColor: '#28a745', fillOpacity: 0.3, weight: 2 }; // Vert pour le jardin
            default:
                return {}; // Style par défaut pour les autres géométries
        }
    },

    // 2. Personnalisation des marqueurs (pour les points)
    pointToLayer: function(feature, latlng) {
        // Pour le restaurant, nous utilisons une icône personnalisée
        if (feature.properties.type === 'Restaurant') {
            var restaurantIcon = L.icon({
                iconUrl: 'https://cdn-icons-png.flaticon.com/512/346/346146.png', // Exemple d'icône (ajustez l'URL)
                iconSize: [32, 32],
                iconAnchor: [16, 32],
                popupAnchor: [0, -32]
            });
            return L.marker(latlng, { icon: restaurantIcon });
        }
        // Pour les autres points, un marqueur Leaflet par défaut
        return L.marker(latlng);
    },

    // 3. Ajout de pop-ups pour chaque Feature
    onEachFeature: function(feature, layer) {
        if (feature.properties && feature.properties.nom) {
            var popupContent = `<b>${feature.properties.nom}</b><br>`;
            // Afficher toutes les propriétés dans le popup
            for (var key in feature.properties) {
                if (key !== 'nom') { // Éviter de répéter le nom
                    popupContent += `${key}: ${feature.properties[key]}<br>`;
                }
            }
            layer.bindPopup(popupContent);
        }
    }
}).addTo(map);

Explication des options :

style: function(feature) : Cette fonction est appelée pour chaque LineString ou Polygon dans votre GeoJSON. Elle reçoit l'objet feature et doit retourner un objet de style Leaflet (couleur, poids, opacité, etc.). Ici, nous utilisons un switch pour appliquer différents styles selon le type de la propriété.
pointToLayer: function(feature, latlng) : Cette fonction est appelée pour chaque Point dans votre GeoJSON. Elle reçoit l'objet feature et les coordonnées latlng du point. Elle doit retourner une instance de L.Marker, L.CircleMarker, ou autre couche pour représenter le point. Nous avons personnalisé le marqueur du restaurant avec une icône spécifique.
- L.icon : Permet de créer des icônes personnalisées en spécifiant une URL d'image, sa taille, son point d'ancrage (où la pointe de l'icône se positionne sur les coordonnées) et l'ancrage du popup.
onEachFeature: function(feature, layer) : C'est une fonction très utile qui est exécutée pour chaque Feature après sa création et avant son ajout à la carte.
- feature : L'objet GeoJSON Feature courant.
- layer : La couche Leaflet correspondante qui a été créée pour cette feature (peut être L.Marker, L.Polyline, L.Polygon, etc.).
- Nous utilisons cette fonction ici pour créer dynamiquement un popupContent à partir des propriétés de la Feature et l'associer à la layer via layer.bindPopup().

Ce code enrichit considérablement l'affichage de vos données GeoJSON, rendant la carte plus informative et visuellement agréable.

5. Interactivité et Événements

Leaflet offre des mécanismes pour rendre votre carte et ses éléments encore plus interactifs.

5.1 Pop-ups et Tooltips

Nous avons déjà vu bindPopup(). Il existe aussi bindTooltip() pour afficher un texte flottant au survol.

// Exemple de tooltip sur un marqueur
L.marker([48.8800, 2.3800]).addTo(map)
    .bindTooltip("Ceci est un tooltip au survol.") // Le tooltip apparaît au survol
    .openTooltip(); // On peut l'ouvrir directement aussi

5.2 Événements de la Carte et des Couches

Vous pouvez écouter des événements sur la carte elle-même ou sur des couches individuelles.

// Écouter un événement sur la carte
map.on('click', function(e) {
    alert("Vous avez cliqué sur la carte à : " + e.latlng.lat.toFixed(4) + ", " + e.latlng.lng.toFixed(4));
    // e.latlng contient les coordonnées du clic
});

// Écouter un événement sur une couche spécifique (par exemple, notre polyligne)
var maPolyline = L.polyline([
    [48.8700, 2.3300],
    [48.8600, 2.3400]
], { color: 'orange', weight: 6 }).addTo(map);

maPolyline.on('mouseover', function() {
    this.setStyle({ color: 'darkorange', weight: 8 }); // Change le style au survol
});

maPolyline.on('mouseout', function() {
    this.setStyle({ color: 'orange', weight: 6 }); // Revient au style initial
});

maPolyline.on('click', function() {
    alert("Vous avez cliqué sur la polyligne !");
});

Les événements Leaflet sont nombreux (click, dblclick, mouseover, mouseout, mousemove, drag, zoomstart, zoomend, movestart, moveend, etc.) et permettent une personnalisation poussée de l'interactivité.

Conclusion

Félicitations ! Vous avez parcouru les étapes fondamentales pour ajouter et visualiser des données géographiques sur une carte interactive en utilisant Leaflet et GeoJSON.

Nous avons couvert :

L'initialisation d'une carte avec Leaflet et l'intégration de tuiles OpenStreetMap.
L'ajout de primitives géométriques comme les marqueurs, cercles, polylignes et polygones, et comment les rendre interactives avec des pop-ups.
L'introduction au format GeoJSON, un standard puissant pour structurer et échanger des données géospatiales.
La visualisation avancée de données GeoJSON sur une carte, en utilisant les options style, pointToLayer et onEachFeature pour une personnalisation détaillée de l'affichage et de l'interactivité.
L'écoute des événements sur la carte et ses couches pour créer des expériences utilisateur dynamiques.

Ces compétences constituent une base solide pour toute application web géospatiale. Les données géographiques prennent vie lorsqu'elles sont bien présentées sur une carte interactive, permettant aux utilisateurs d'explorer, d'analyser et de prendre des décisions basées sur des informations spatiales.

Pour aller plus loin :

Charger des données GeoJSON depuis un fichier externe (via fetch ou XMLHttpRequest).
Explorer les nombreux plugins Leaflet pour des fonctionnalités avancées (clustering de marqueurs, mesures, dessins, etc.).
Intégrer d'autres fournisseurs de tuiles (Mapbox, ESRI, Google Maps via plugins).
Utiliser des serveurs cartographiques (comme GeoServer ou PostGIS) pour gérer des volumes de données plus importants et les servir en GeoJSON ou d'autres formats.

Le monde des applications web géospatiales est vaste et passionnant. Continuez à explorer et à construire !