Accueil
Topo Articles

Comment utiliser Leaflet pour créer des cartes INTERACTIVES ?

Topo Articles

La géomatique est une discipline qui regroupe l’ensemble des connaissances et des technologies nécessaires à la production, au traitement et à la diffusion des données géographiques. Le web géographique est une forme de la cartographie numérique qui fait usage d’Internet pour pouvoir produire, concevoir, traiter et publier des cartes géographiques. Ces deux domaines sont étroitement liés et offrent de nombreuses applications dans des secteurs variés, tels que l’aménagement du territoire, la gestion des risques, le tourisme, la mobilité, etc.

Pour créer des cartes géographiques sur le web, il existe plusieurs outils et plateformes, dont Leaflet, une bibliothèque JavaScript open source qui permet de créer des cartes interactives adaptées aux appareils mobiles. Leaflet est légère, facile à utiliser, et dispose de nombreuses fonctionnalités et plugins pour personnaliser votre carte. Dans cet article, nous allons vous montrer comment utiliser Leaflet pour créer des cartes géographiques dans un contexte de géomatique.

Prérequis

Pour utiliser Leaflet, vous avez besoin de :

  • Un éditeur de texte, comme Visual Studio Code, Sublime Text, Notepad++, etc.
  • Un navigateur web, comme Chrome, Firefox, Safari, etc.
  • Une connexion Internet
  • Des données géographiques, sous forme de fichiers ou de services web

Créer une carte de base avec Leaflet

La première étape pour créer une carte avec Leaflet est de créer un fichier HTML qui contiendra le code de la carte. Vous pouvez nommer ce fichier comme vous voulez, par exemple map.html. Dans ce fichier, vous devez inclure les liens vers les fichiers CSS et JavaScript de Leaflet, ainsi qu’un élément <div> avec un identifiant qui servira de conteneur pour la carte. Voici le code minimal pour créer une carte de base avec Leaflet :

<!DOCTYPE html>
<html>
<head>
    <title>Ma carte Leaflet</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
    <style>
        #map {
            height: 500px;
            width: 800px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQigLFqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
    <script>
        // Code de la carte
    </script>
</body>
</html>

Ensuite, vous devez créer un objet map en utilisant la fonction L.map, en lui passant l’identifiant du conteneur de la carte ('map') et en lui spécifiant les options de la carte, comme le centre (center) et le niveau de zoom (zoom). Par exemple, pour centrer la carte sur la ville de Fès au Maroc, avec un niveau de zoom de 13, vous pouvez écrire :

var map = L.map('map', {
    center: [34.033333, -5.000000],
    zoom: 13
});

Enfin, vous devez ajouter une couche de fond de carte (ou tuiles) à votre carte, en utilisant la fonction L.tileLayer, en lui passant l’URL du service web qui fournit les tuiles, et en lui spécifiant les options de la couche, comme l’attribution (attribution). Par exemple, pour utiliser le service OpenStreetMap, vous pouvez écrire :

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

Ajouter des données géographiques à la carte

Leaflet vous permet d’ajouter des données géographiques à votre carte, sous forme de couches vectorielles (points, lignes, polygones, etc.) ou de couches raster (images, orthophotos, etc.). Vous pouvez utiliser des données locales, stockées dans des fichiers, ou des données distantes, accessibles via des services web.

Ajouter des couches vectorielles

Pour ajouter des couches vectorielles à votre carte, vous pouvez utiliser les fonctions L.marker, L.polyline, L.polygon, etc., en leur passant les coordonnées des géométries et en leur spécifiant les options de la couche, comme le style (style), la popup (popup) ou le tooltip (tooltip). Par exemple, pour ajouter un marqueur sur la mosquée Karaouiyine, un polygone représentant la médina de Fès, et une ligne représentant l’avenue Hassan II, vous pouvez écrire :

L.marker([34.061111, -4.978611]).addTo(map)
    .bindPopup('Mosquée Karaouiyine');

L.polygon([
    [34.063889, -4.981667],
    [34.063889, -4.971667],
    [34.053889, -4.971667],
    [34.053889, -4.981667]
]).addTo(map)
    .bindPopup('Médina de Fès');

L.polyline([
    [34.043333, -4.998333],
    [34.043333, -4.988333],
    [34.033333, -4.988333],
    [34.033333, -4.978333]
]).addTo(map)
    .bindPopup('Avenue Hassan II');

Ajouter des couches raster

Pour ajouter des couches raster à votre carte, vous pouvez utiliser la fonction L.imageOverlay, en lui passant l’URL de l’image, les coordonnées des coins de l’image, et en lui spécifiant les options de la couche, comme l’opacité (opacity). Par exemple, pour ajouter une orthophoto de la ville de Fès, vous pouvez écrire :

L.imageOverlay('https://www.bing.com/th?id=OIP.0QZ8x1yXoZ0Q7l9J0zq7RwHaEK&pid=Api&rs=1', [
    [34.073333, -5.018333],
    [34.003333, -4.958333]
], {
    opacity: 0.5
}).addTo(map);

Leaflet est un outil puissant et flexible pour créer des cartes géographiques sur le web, dans un contexte de géomatique. Il vous permet d’ajouter des données géographiques à votre carte, sous forme de couches vectorielles ou raster, locales ou distantes, et de personnaliser l’apparence et le comportement de votre carte. Vous pouvez également utiliser des plugins pour enrichir votre carte avec des fonctionnalités supplémentaires, comme le géocodage, le tracé de routes, la mesure de distances, etc. Pour en savoir plus sur Leaflet, vous pouvez consulter la documentation officielle ou les tutoriels disponibles sur le web.

Utiliser des plugins pour enrichir la carte

Leaflet dispose d’une communauté active qui développe et maintient des plugins pour ajouter des fonctionnalités à la bibliothèque. Il existe des centaines de plugins disponibles, que vous pouvez consulter sur la page officielle. Dans cette section, nous allons vous présenter quelques plugins qui sont utiles dans le domaine de la géomatique.

Leaflet-Draw

Leaflet-Draw est un plugin qui permet de dessiner et d’éditer des géométries vectorielles sur la carte. Il fournit une barre d’outils avec des boutons pour créer des marqueurs, des lignes, des polygones, des cercles ou des rectangles. Il permet également de modifier, supprimer ou exporter les géométries créées. Ce plugin est pratique pour réaliser des croquis, des annotations ou des mesures sur la carte.

Pour utiliser Leaflet-Draw, vous devez inclure les fichiers CSS et JavaScript du plugin dans votre page HTML, après les fichiers de Leaflet. Vous devez ensuite créer un objet L.FeatureGroup qui contiendra les géométries dessinées, et l’ajouter à la carte. Vous devez ensuite créer un objet L.Control.Draw en lui passant les options de la barre d’outils, et l’ajouter à la carte. Vous devez enfin écouter les événements draw:created, draw:edited et draw:deleted pour gérer les actions de l’utilisateur. Voici un exemple de code pour utiliser Leaflet-Draw :

// Inclure les fichiers CSS et JavaScript de Leaflet-Draw
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>

// Créer un objet L.FeatureGroup qui contiendra les géométries dessinées
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

// Créer un objet L.Control.Draw en lui passant les options de la barre d'outils
var drawControl = new L.Control.Draw({
    position: 'topleft',
    draw: {
        polyline: {
            shapeOptions: {
                color: 'red'
            }
        },
        polygon: {
            allowIntersection: false,
            showArea: true,
            shapeOptions: {
                color: 'green'
            }
        },
        circle: {
            shapeOptions: {
                color: 'blue'
            }
        },
        rectangle: {
            shapeOptions: {
                color: 'orange'
            }
        }
    },
    edit: {
        featureGroup: drawnItems
    }
});

// Ajouter l'objet L.Control.Draw à la carte
map.addControl(drawControl);

// Ecouter les événements draw:created, draw:edited et draw:deleted
map.on('draw:created', function (e) {
    var layer = e.layer;
    drawnItems.addLayer(layer);
});

map.on('draw:edited', function (e) {
    var layers = e.layers;
    layers.eachLayer(function (layer) {
        // Faire quelque chose avec la couche modifiée
    });
});

map.on('draw:deleted', function (e) {
    var layers = e.layers;
    layers.eachLayer(function (layer) {
        // Faire quelque chose avec la couche supprimée
    });
});

Leaflet-Geoman

Leaflet-Geoman est un plugin similaire à Leaflet-Draw, mais qui offre plus de fonctionnalités et de personnalisation. Il permet de dessiner et d’éditer des géométries vectorielles sur la carte, mais aussi de les couper, de les fusionner, de les simplifier, de les transformer, de les aligner, de les copier, de les coller, etc. Il permet également de créer des géométries complexes, comme des polygones troués, des multipoints, des multilignes ou des multipolygones. Il offre aussi la possibilité de définir des styles, des limites, des contraintes, des actions personnalisées, etc.

Pour utiliser Leaflet-Geoman, vous devez inclure les fichiers CSS et JavaScript du plugin dans votre page HTML, après les fichiers de Leaflet. Vous devez ensuite activer le plugin sur la carte en utilisant la méthode pm.addControls, en lui passant les options de la barre d’outils. Vous devez ensuite écouter les événements pm:create, pm:edit et pm:remove pour gérer les actions de l’utilisateur. Voici un exemple de code pour utiliser Leaflet-Geoman :

// Inclure les fichiers CSS et JavaScript de Leaflet-Geoman
<link rel="stylesheet" href="https://unpkg.com/leaflet.pm/dist/leaflet.pm.css" />
<script src="https://unpkg.com/leaflet.pm/dist/leaflet.pm.min.js"></script>

// Activer le plugin sur la carte en utilisant la méthode pm.addControls
map.pm.addControls({
    position: 'topleft',
    drawCircle: false,
    drawCircleMarker: false,
    drawPolyline: true,
    drawRectangle: true,
    drawPolygon: true,
    drawMarker: true,
    editMode: true,
    dragMode: true,
    cutPolygon: true,
    removalMode: true
});

// Ecouter les événements pm:create, pm:edit et pm:remove
map.on('pm:create', function (e) {
    var layer = e.layer;
    // Faire quelque chose avec la couche créée
});

map.on('pm:edit', function (e) {
    var layers = e.layers;
    layers.eachLayer(function (layer) {
        // Faire quelque chose avec la couche modifiée
    });
});

map.on('pm:remove', function (e) {
    var layer = e.layer;
    // Faire quelque chose avec la couche supprimée
});

Leaflet-Geocoder

Leaflet-Geocoder est un plugin qui permet de réaliser du géocodage et du géocodage inverse sur la carte. Le géocodage consiste à trouver les coordonnées géographiques d’une adresse ou d’un lieu, tandis que le géocodage inverse consiste à trouver l’adresse ou le lieu correspondant à des coordonnées géographiques. Ce plugin utilise le service de géocodage de MapTiler, qui permet d’identifier des états, des villes, des rues, des adresses et des points d’intérêt, dans plusieurs langues, avec une limitation par pays, une correspondance floue, une auto-complétion, etc.

Pour utiliser Leaflet-Geocoder, vous devez inclure le fichier JavaScript du plugin dans votre page HTML, après les fichiers de Leaflet. Vous devez ensuite créer un objet L.Control.Geocoder en lui passant les options du géocodeur, et l’ajouter à la carte. Vous devez également obtenir une clé d’accès au service de MapTiler, que vous pouvez créer gratuitement ici. Voici un exemple de code pour utiliser Leaflet-Geocoder :

// Inclure le fichier JavaScript de Leaflet-Geocoder
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>

// Créer un objet L.Control.Geocoder en lui passant les options du géocodeur
var geocoder = L.Control.Geocoder.maptiler('Votre clé d'accès', {
    serviceUrl: 'https://api.maptiler.com/geocoding/',
    geocodingQueryParams: {
        language: 'fr',
        limit: 10
    },
    reverseQueryParams: {
        limit: 1
    }
});

// Ajouter l'objet L.Control.Geocoder à la carte
L.Control.geocoder({
    position: 'topleft',
    placeholder: 'Rechercher un lieu...',
    errorMessage: 'Aucun résultat trouvé',
    geocoder: geocoder
}).addTo(map);

Ces plugins ne sont qu’un aperçu des possibilités offertes par Leaflet pour créer des cartes géographiques interactives dans un contexte de géomatique. Vous pouvez explorer d’autres plugins sur la page officielle¹ ou développer vos propres plugins en suivant la documentation.

Intégrer des plans d’aménagement créés avec AutoCAD sur la carte

AutoCAD est un logiciel de conception assistée par ordinateur (CAO) qui permet de créer des plans d’aménagement pour l’architecture, l’ingénierie, la construction, etc. Il permet de dessiner des géométries vectorielles en 2D ou en 3D, avec des coordonnées, des attributs, des styles, des blocs, des calques, etc. Il permet également d’exporter les plans au format DWG, DXF, PDF, etc.

Si vous souhaitez intégrer des plans d’aménagement créés avec AutoCAD sur votre carte Leaflet, vous devez d’abord convertir les fichiers DWG ou DXF en un format compatible avec Leaflet, comme le GeoJSON, le PNG, le JPEG, etc. Il existe plusieurs outils et méthodes pour réaliser cette conversion, que nous allons vous présenter dans cette section.

Convertir les fichiers DWG ou DXF en GeoJSON

Le GeoJSON est un format de données géographiques basé sur le JSON, qui permet de représenter des géométries vectorielles (points, lignes, polygones, etc.) avec des coordonnées géographiques en degrés de latitude et de longitude. Il est facile à lire, à écrire, et à manipuler avec Leaflet, qui dispose de méthodes pour charger, afficher, et éditer des données GeoJSON.

Pour convertir les fichiers DWG ou DXF en GeoJSON, vous pouvez utiliser le logiciel QCAD, qui est une application de CAO open source, disponible pour Windows, MacOS et Linux. QCAD propose des outils en ligne de commande pour convertir les fichiers DWG ou DXF en GeoJSON, mais aussi en PNG, JPEG, TIFF, etc.

Une fois que vous avez installé QCAD, vous pouvez utiliser la commande dwg2maptiles ou dxf2maptiles pour convertir votre fichier DWG ou DXF en GeoJSON. Par exemple, pour convertir le fichier plan.dwg en GeoJSON, vous pouvez écrire :

dwg2maptiles plan.dwg plan.geojson

Cette commande va créer un fichier plan.geojson qui contient les géométries vectorielles du fichier plan.dwg, avec les coordonnées géographiques correspondantes. Vous pouvez ensuite ajouter ce fichier à votre carte Leaflet, en utilisant la méthode L.geoJSON, en lui passant le chemin du fichier GeoJSON, et en lui spécifiant les options de la couche, comme le style, la popup, etc. Par exemple, pour ajouter le fichier plan.geojson à votre carte Leaflet, vous pouvez écrire :

L.geoJSON('plan.geojson', {
    style: function (feature) {
        return {
            color: feature.properties.color,
            weight: feature.properties.weight
        };
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.name);
    }
}).addTo(map);

Vous pouvez ensuite voir le résultat dans votre navigateur web

Convertir les fichiers DWG ou DXF en PNG, JPEG, etc.

Une autre méthode pour intégrer des plans d’aménagement créés avec AutoCAD sur votre carte Leaflet est de les convertir en images raster, comme le PNG, le JPEG, le TIFF, etc. Ces formats permettent de représenter des données géographiques sous forme de pixels, avec des couleurs, des transparences, des résolutions, etc. Ils sont plus faciles à afficher et à gérer que les données vectorielles, mais ils peuvent perdre en qualité ou en précision.

Pour convertir les fichiers DWG ou DXF en images raster, vous pouvez utiliser le logiciel MapTiler, qui est une application de création de tuiles cartographiques, disponible pour Windows, MacOS et Linux. MapTiler permet de convertir des fichiers PDF, PNG, JPEG, TIFF, etc. en tuiles cartographiques compatibles avec Leaflet, Google Maps, OpenLayers, etc. Il permet également de géoréférencer les images, c’est-à-dire de leur attribuer des coordonnées géographiques.

Une fois que vous avez installé MapTiler, vous pouvez utiliser l’interface graphique ou la ligne de commande pour convertir votre fichier DWG ou DXF en images raster. Pour cela, vous devez d’abord enregistrer votre fichier DWG ou DXF au format PDF, en utilisant AutoCAD ou un autre logiciel de CAO. Ensuite, vous pouvez glisser-déposer votre fichier PDF dans MapTiler, et suivre les étapes pour choisir le profil, le format, la résolution, le géoréférencement, etc. de votre carte.

MapTiler va créer un dossier qui contient les images raster de votre carte, ainsi qu’un fichier HTML qui contient le code Leaflet pour afficher votre carte. Vous pouvez ensuite ouvrir le fichier HTML dans votre navigateur web et voir le résultat

Ces méthodes ne sont pas les seules pour intégrer des plans d’aménagement créés avec AutoCAD sur votre carte Leaflet. Vous pouvez explorer d’autres outils et techniques sur le web. L’important est de choisir le format qui convient le mieux à vos besoins, en tenant compte des avantages et des inconvénients de chaque format.

Mr. Ali OUFRID

Ingénieur Topographe et Géomètre Expert.

Une référence dans le domaine de la topographie et de la cartographie au Maroc et aux nations unies.

Ellipsoide

Contactez notre Bureau d'Etudes et Travaux Topographiques et Cartographiques

Appeler au bureau
Appeler l’ingénieur
Envoyer un e-mail
Demander un devis