Le blog de Philippe Poisse

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/

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.

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 ».