Limite des communes avec Leaflet et overpass-turbo: version statique

L’affichage des limites des collectivités territoriales peut être très utile dans le cadre d’un travail cartographique web.
Donc voici le premier tutoriel d’une série dédiée à Leaflet pour l’affichage des limites administratives.

 

Logique de la démarche

Dans ce tutoriel je pars du principe que le développeur ou le gestionnaire du site dispose des limites de la carte et que ce sera toujours la ou les mêmes collectivités territoriales qui seront affichées.
Dans un premier on va donc récupérer le tracé au format geoJSON avec overpass-turbo puis on va l’afficher avec Leaflet dans une carte.
Les données au format geoJSON seront stockées en dur sur le serveur Web.

Récupérer le tracé des limites

Aujourd’hui nous allons travailler sur la commune de Mont-Louis, sympathique petit village de montagne. Comme cette commune fait 0,39 km² le fichier geoJSON ne sera pas trop compliqué à gérer.

Pour récupérer les données il suffit de passer une requête avec overpass-turbo.
Le site officiel : http://overpass-turbo.eu/

mont-louis.jpeg

Code de la requête :
relation
  ["name"="Mont-Louis"]
  ["boundary"="administrative"]
  ["admin_level"="8"];
>;
out;

La valeur de « name » est celle de votre commune/département/région/État. Pour « boundary » c’est « administrative ». Pour « admin_level » il faut mettre le numéro qui correspond à votre collectivité territoriale.

Pour la France ça donne :

  • 1 => État
  • 4 => région
  • 6 => département
  • 7 => arrondissement (sous-préfecture)
  • 8 => commune
  • 9 => arrondissements municipaux (Paris, Lyon et Marseille uniquement)
  • 10 => quartier

Vous trouverez plus d’informations sur le wiki officiel : http://wiki.openstreetmap.org/wiki/Tag:boundary=administrative?uselang=fr

Si vous avez un doute sur l’orthographe exacte du nom de la commune ou son « admin_level » vous pouvez effectuer une requête dans le moteur de recherche d’openstreetmap. La réponse vous donnera toutes les informations nécessaires pour overpass-api et l’identifiant de la relation, qui sera utile pour le prochain tutoriel.

mont-louis-osm.jpeg

Une fois le tracé récupéré il suffit d’exporter les données au format geoJSON et d’enregistrer tout ça sur votre serveur (de développement).

Comme je suis une grosse feignasse, après l’enregistrement on va un peu modifier le fichier. Au début du tableau geoJSON on rajoute le code suivant :

var nom_de_la_commune =

 

et à la fin du tableau on met un point virgule. Ainsi on a transformé le tableau en variable JavaScript directement utilisable. Je sais c’est limite du travail bâclé, mais vu ce que je suis payé…

 

Affichage

Une fois le tracé récupéré il suffit d’afficher une carte toute simple. Le tracé sera traité comme un banal layer geoJSON. Le code JavaScript est donc très simple.

Le code complet

/*
 * Création de la carte
 */


//Fond de carte Mapbox
var mapbox = L.tileLayer('http://{s}.tiles.mapbox.com/v3/phil6611.ikebkh58/{z}/{x}/{y}.png', {
                attribution: 'Carte Verte des Pyrénées-Orientales © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox'
            });

//Création de la carte.
var map = L.map('map', {
    center: new L.LatLng(42.5096936, 2.1208774),
    zoom: 15,
    maxZoom: 18,
    layers: [mapbox]
});


//Récupếration des données GEOJSON.
          
var mont_louis_layer = L.geoJson(mont_louis);
mont_louis_layer.addTo(map);

/*
 * Création des contrôles.
 */

//Contrôles pour les fonds de cartes.
var baseMap = {
    "Rendu Mapbox" : mapbox
};

//Contrôles pour les layers contenant les données.
var overlaysMaps = {

"Mont Louis" : mont_louis_layer

};

L.control.layers(baseMap, overlaysMaps,{ collapsed: false }).addTo(map);
L.control.scale({imperial: false}).addTo(map);

Le code est assez classique. À la ligne 22 on instancie la variable qui va contenir le layer :

var mont_louis_layer = L.geoJson(mont_louis);

Puis on l’ajoute à la carte :

mont_louis_layer.addTo(map);

À la ligne 37 on ajoute le tracé de la commune dans le menu de contrôle. Ainsi l’internaute pourra choisir d’afficher ou non les limites administratives.

Code HTML

Pareil pour la page Web le code est très simple. Avant la fermeture de la balise « body » il faudra rajouter les deux lignes suivantes :

<script src="./geojson/communes/mont-louis.js" type="text/javascript"></script>
<script src="./js/communes/communes.js" type="text/javascript"></script>

Vous n’oublierez pas d’adapter le nom des variables et les url des fichiers en fonction de votre configuration.

Ce premier tutoriel présente une méthode « brut de décoffrage » mais efficace. Le prochain volet sera consacré à l’utilisation de jQuery pour la récupération des données. Cela donnera un code plus propre et plus « professionnel ».

Commentaires

1. Le dimanche, juillet 14 2019, 23:07 par clement

Bonjour,

A partir de l’API du gouvernement je cherche à faire les contours d’une commune par exemple versailles. Je bloque ça ne marche pas… J'ai essayé d'utiliser votre code sans succès... Merci de votre aide

Voici mon code :

function initMap() {
// Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
macarte = L.map('map').setView([lat, long], 11);
// Leaflet ne récupère pas les cartes (tiles) sur un serveur par défaut. Nous devons lui préciser où nous souhaitons les récupérer. Ici, openstreetmap.fr
L.tileLayer('https://{s}.tile.openstreetmap.fr/o... {
// Il est toujours bien de laisser le lien vers la source des données
attribution: 'données OpenStreetMap - rendu OSM France',
minZoom: 1,
maxZoom: 20
}).addTo(macarte)
function style() {
return {
fillColor: rgb(0,176,80),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}
var url = "https://geo.api.gouv.fr/communes/78..."
ajaxGet(url, function (reponse) {
var contour = JSON.parse(reponse);

for (var i = 0 ; i < contour.length ; i++) {
contour[i].reverse();
}
L.geoJson(contour).addTo(macarte);
L.geoJson(contour, {style: style}).addTo(macarte);

})
window.onload = function(){
// Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
initMap();
};
</script>

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.

La discussion continue ailleurs

URL de rétrolien : http://blog.philippe-poisse.eu/index.php?trackback/150

Fil des commentaires de ce billet