Créer une Carte Interactive avec Données Ouvertes

Pourquoi cartographier des données ouvertes ?

Les cartes interactives transforment des tableaux de chiffres bruts en récits visuels immédiatement compréhensibles. Un fichier CSV de 50 000 lignes sur les accidents de la route devient, projeté sur une carte, une analyse territoriale qu'un citoyen ordinaire peut exploiter directement.

Des portails comme data.gouv.fr, l'INSEE ou les collectivités territoriales publient une matière première abondante. Équipements publics, qualité de l'air, mobilités, démographie, économie locale : les domaines couverts sont nombreux. Les données existent. Le vrai problème, c'est de les exploiter correctement.

Ce guide détaille chaque étape pour construire une carte fonctionnelle, depuis la sélection du jeu de données jusqu'à la publication en ligne.

Choisir et télécharger les données

Identifier une source fiable

Plusieurs portails publics distribuent des données géographiques directement exploitables :

data.gouv.fr : portail national français, plus de 45 000 jeux de données
OpenStreetMap / Overpass API : données cartographiques mondiales libres
INSEE : données socio-économiques avec maillage communal
Géoportail / IGN : référentiels géographiques officiels
Portails régionaux : chaque région dispose souvent de sa propre plateforme open data

Pour un premier projet, privilégiez un jeu de données qui contient déjà des colonnes de coordonnées géographiques (latitude/longitude) ou un code géographique (code commune INSEE, code postal). Le traitement en est considérablement simplifié.

Évaluer la qualité des données avant de commencer

Avant de télécharger, consultez la fiche descriptive du jeu de données. Vérifiez le format (CSV, GeoJSON, Shapefile), la date de mise à jour et le taux de complétude. Un fichier mis à jour en 2018 avec 30 % de valeurs manquantes produit des conclusions biaisées.

Téléchargez de préférence en GeoJSON quand c'est disponible : ce format est nativement lisible par la plupart des bibliothèques de cartographie web.

Préparer et nettoyer les données

Ouvrir et inspecter le fichier

Utilisez un éditeur comme LibreOffice Calc, Python (pandas) ou R pour examiner vos données. Les opérations à réaliser systématiquement :

Supprimer les colonnes inutiles (réduire le poids du fichier)
Identifier les valeurs nulles dans les colonnes lat/lon
Vérifier la cohérence des coordonnées (latitude entre -90 et 90, longitude entre -180 et 180)
Uniformiser les séparateurs décimaux (virgule ou point selon les logiciels)

Géocoder si nécessaire

Vos données contiennent des adresses mais pas de coordonnées ? Il faut les géocoder. L'API Adresse du gouvernement français (api-adresse.data.gouv.fr) convertit des adresses françaises en coordonnées gratuitement, jusqu'à plusieurs milliers de requêtes par batch.

En Python, la bibliothèque geopy ou un appel direct à l'API avec requests suffisent pour automatiser cette étape. Le résultat : une colonne lat et une colonne lon ajoutées à votre fichier source.

Choisir sa technologie de cartographie

Les options selon votre niveau technique

Trois niveaux d'outils s'offrent à vous selon vos compétences.

Sans code : uMap (umap.openstreetmap.fr) est un outil français fondé sur OpenStreetMap qui accepte l'import direct de fichiers CSV/GeoJSON. Kepler.gl propose une interface visuelle pour la visualisation géographique. QGIS, logiciel desktop open source, génère des cartes exportables en HTML.

En JavaScript : Leaflet.js est une bibliothèque légère (42 ko), documentée en français, adaptée aux projets simples à modérés. MapLibre GL JS offre un rendu vectoriel plus performant ; c'est un fork open source de Mapbox GL.

En Python : Folium génère des cartes Leaflet depuis Python. Plotly Express intègre des cartes choroplèthes aux notebooks Jupyter.

Ce guide s'appuie sur Leaflet.js combiné à des données GeoJSON : le rapport accessibilité/puissance convient à la majorité des projets open data.

Construire la carte avec Leaflet.js

Structure HTML de base

Créez un fichier index.html avec cette structure minimale :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Carte open data</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
  <style>#map { height: 600px; }</style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script src="carte.js"></script>
</body>
</html>

Initialiser la carte et charger les données

Dans votre fichier carte.js, initialisez la vue sur la France métropolitaine et chargez votre GeoJSON :

const map = L.map('map').setView([46.5, 2.5], 6);

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

fetch('donnees.geojson')
  .then(r => r.json())
  .then(data => {
    L.geoJSON(data, {
      onEachFeature: (feature, layer) => {
        layer.bindPopup(feature.properties.nom);
      }
    }).addTo(map);
  });

Ce bloc charge le fichier GeoJSON, place un marqueur par entité et affiche une popup avec le nom du lieu au clic. Une quinzaine de lignes pour un résultat fonctionnel.

Personnaliser les styles et les popups

Leaflet permet de conditionner la couleur des marqueurs ou des polygones selon une valeur numérique. Pour une carte choroplèthe (taux de chômage par département, par exemple), définissez une fonction de couleur :

function getCouleur(valeur) {
  return valeur > 12 ? '#800026' :
         valeur > 9  ? '#E31A1C' :
         valeur > 6  ? '#FD8D3C' : '#FFEDA0';
}

Appliquez cette fonction dans l'option style de L.geoJSON(). Chaque plage de valeur reçoit une couleur distincte, ce qui rend la lecture immédiate.

Enrichir l'expérience utilisateur

Ajouter des filtres et une légende

Une carte sans légende reste illisible pour un utilisateur non initié. Créez un bloc HTML positionné en absolu sur la carte, et renseignez les paliers de couleur avec leurs significations.

Pour les filtres, un sélecteur HTML (

Créer une Carte Interactive avec des Données Ouvertes : Projet Pas-à-Pas