umap/docs-users/fr/tutorials/11-openstreetmap-overpass-and-umap.md
2024-05-08 21:17:01 -04:00

16 KiB
Raw Blame History

!!! abstract "Ce que nous allons apprendre"

- Créer un calque utilisant des *données distantes* cest-à-dire non
  stockées par uMap
- Utiliser une **requête Overpass** comme source de données distantes
- Utiliser une *requête dynamique* prenant en compte létendue visible
  de la carte
- Contrôler laffichage des calques en fonction du niveau de zoom

Procédons par étapes

Lobjectif de ce tutoriel est dexplorer les différentes manières dafficher sur une carte uMap des données externes, ou distantes, cest-à-dire des données qui ne sont pas stockées sur le serveur uMap. Nous allons pour cela utiliser des données OpenStreetMap, que nous allons extraire avec lAPI Overpass.

Nous allons en quelques étapes créer une carte du vélo à Nantes, montrant les stationnements ainsi que les locations en libre-service.

1. Je crée un calque affichant le résultat dune requête Overpass

Commençons par afficher les stations Bicloo, les locations de vélos en libre-service à Nantes. Allons-y étape par étape :

  1. produire et tester la requête Overpass avec Overpass Turbo
  2. adapter la requête pour produire des données acceptées par uMap
  3. exporter la requête
  4. créer un calque uMap utilisant cette requête

Créer la requête Overpass

Le site Overpass Turbo propose un assistant qui facilite la rédaction dune requête. Activez lassistant et saisissez le texte suivant, qui permet dextraire les locations de vélo situées sur la commune de Nantes :

amenity=bicycle_rental in Nantes

Cliquez sur Construire et exécuter la requête : la requête est créée dans léditeur à gauche de la carte, puis le résultat est affiché sur la carte.

overpass_turbo_assistant.jpg

Adapter la requête pour uMap

Avant dexporter la requête nous devons ladapter. Lassistant Overpass Turbo produit des requêtes dont le résultat est au format JSON. uMap sait lire des données dans plusieurs formats, dont le format GeoJSON, mais pas le format JSON produit par Overpass. Par contre uMap comprend très bien le format XML selon la syntaxe OSM (OpenStreetMap).

Pour que la requête produise des données au format XML/OSM, il suffit de modifier dans léditeur de requête la clause [out:json] par [out:xml]. Vous pouvez à nouveau exécuter la requête et observer la différence de format dans longlet Données qui montre le résultat de la requête.

overpass_turbo_format_xml.jpg

Exporter la requête Overpass

Exportez la requête en cliquant sur Exporter : un panneau saffiche. Ouvrez longlet Requête et cliquez sur compact à droite de Overpass QL. Un nouvel onglet intitulé Overpass API Converted Query apparaît. Faites un clic droit sur la ligne soulignée en bleu, et choisir Copier ladresse du lien (avec Mozilla Firefox) : lURL de la requête est copié dans le presse-papier.

overpass_turbo_exporter.jpg

Utiliser la requête dans uMap

umap_requete_overpass_url.png

Dans un nouvelle carte uMap, créez un calque et ouvrez longlet Données distantes. Collez dans la case URL le contenu du presse-papier et sélectionez le format osm, qui correspond au format XML dans Overpass.

Notez que lURL est encodée pour pouvoir être utilisée comme requête HTTP : les caractères spéciaux comme " sont convertis en %22. Ne les modifiez pas !

Vous pouvez configurer le calque comme cela a été décrit dans les tutoriels précédents.

umap_overpass_infobulle.jpg

De la même façon que les valeurs dun tableur peuvent être affichées dans les infobulles (voir cette section du tutoriel précédent), vous pouvez afficher dans les infobulles les tags OpenStreetMap. Les tags disponibles sont visibles dans longlet Données sur Overpass Turbo.

Par exemple le gabarit suivant permet dafficher des infobulles comme celle de droite.

# {name}
{capacity} emplacements
Carte bancaire : {payment:credit_cards}
{note}

2. Jaffiche les parkings à vélo efficacement

Ajoutons à notre carte les parkings à vélo. La requête Overpass pour obtenir les parkings à vélos de Nantes est semblable à celle utilisée pour les locations, et peut être créée avec lassistant : amenity=bicycle_parking in Nantes.

overpass_turbo_export_geojson.png

Lexécution de cette requête prend près de 5 secondes. Ce délai est trop long pour une carte interactive. Aussi plutôt que dexécuter le requête lors de laffichage de la carte nous préférons extraire les données et les importer dans uMap.

Importer des données statiques

Dans Overpass Turbo, cliquez sur Exporter, sélectionnez longlet Données puis cliquez sur Download/copy as GeoJSON. Cette opération convertit le résultat de la requête dans le format GeoJSON (un format standard pour transférer des données géographiques sur internet) et crée un fichier nommé export.geojson dans le dossier Téléchargements de votre ordinateur.

Dans la carte uMap importez le fichier ainsi produit dans un nouveau calque (voir cette section du tutoriel précédent). Les parkings à vélos sont affichés mais la carte perd en fluidité et ne réagit pas immédiatement lorsquon zoome ou la déplace. Cela est dû au nombre élevé de marqueurs affichés sur la carte (plus de 1600).

Afficher une carte de densité

umap_heatmap.png

Une possibilité pour contourner ce problème est dafficher les marqueurs sous forme de clusters, ou de carte de chaleur (heatmap), aussi appelée carte de densité. Nous choisissons la seconde option qui permet de prendre en compte le nombre de places de chaque parking, stocké dans le tag capacity.

Ainsi la carte montrera non pas le nombre de parkings à vélos mais le nombre de places de stationnement (dans OpenStreetMap un seul parking à vélo peut représenter un grand nombre dappuis-vélos).

Dans les propriétés du calque, sélectionnez le Type de calque Heatmap.

Ensuite, dans longlet Propriétés avancées saisissez capacity dans le champ Propriété optionnelle à utiliser pour calculter lintensité de la heatmap. Enfin vous pouvez ajuster lintensité de la couleur en modifiant la Valeur de rayon pour la heatmap.

La carte gagne en fluidité, mais lutilisation dune heatmap ne permet pas didentifier lemplacement précis des parkings à vélos. Létape suivante propose une solution pour résoudre cette inconvénient.

3. Jaffiche un calque en fonction du niveau de zoom

Lorsque les données dun calque sont distantes (cest-à-dire non stockées sur le serveur uMap), il est possible de contrôler laffichage de ces données en fonction du niveau de zoom. Il faut pour cela déposer le fichier de données sur un serveur et déterminer lURL de ce fichier.

Utiliser un fichier stocké sur un serveur

umap_donnees_distantes_wordpress.png

Si vous disposez dun accès FTP à un serveur, cela ne pose pas de difficulté. Si vous avez accès au back office dun CMS comme Wordpress, vous pouvez probablement y déposer un fichier. Prenons lexemple de Wordpress.

Par sécurité Wordpress ne permet pas de déposer un fichier au format JSON. Il se fie pour cela à lextension du nom de fichier, il est donc possible de contourner cette contrainte en renommant le fichier. Procédons par étapes.

  1. renommez le fichier export.geojson produit plus haut en parkings-velos-nantes.txt
  2. dans le back office Wordpress, ajoutez un Média et sélectionnez le fichier ainsi renommé
  3. affichez les détails du fichier et copiez son Adresse Web, de la forme http://monsite.fr/wp-content/uploads/2018/01/parkings-velos-nantes.txt
  4. créez un nouveau calque uMap et collez cette adresse Web dans le champ URL de longlet Données distantes
  5. sélectionnez le format geojson
  6. précisez la licence qui sapplique aux données : ODbL 1.0 puisquil sagit de données OpenStreetMap
  7. activez loption Avec proxy en bas de cet onglet : cela autorise le navigateur Web à accéder à un fichier stocké sur un serveur autre que le serveur uMap
  8. enregistrez les modifications de la carte

Combiner deux calques utilisant le même fichier

Pour associer fluidité de la carte et affichage de chaque parking nous allons associer deux calques utilisant les mêmes données :

  • jusquau niveau de zoom 16, un calque montrant la capacité de stationnement sous forme de heatmap
  • à partir du niveau de zoom 16, un calque montrant les parkings à vélo sous forme de marqueurs

À nouveau procédons par étapes.

  1. éditez le calque créé précedemment et dans longlet Données distantes saisissez la valeur 16 dans le champ Jusquau zoom
  2. dupliquez le calque avec laction Cloner de longlet Actions avancées : ainsi le nouveau calque est déjà configuré pour utiliser le fichier placé sur le seveur
  3. sélectionnez le Type de calque par défaut pour le nouveau calque
  4. dans longlet Données distantes saisissez la valeur 16 dans le champ À partir du zoom

umap_heatmap_et_infobulle.jpg

Enfin vous pouvez renommer le nouveau calque, configurer le type de marqueur, et définir le gabarit de popup, par exemple :

# {capacity} emplacements
Type : {bicycle_parking}
Couvert : {covered}

Limage à droite montre un extrait de la carte au niveau de zoom 16, auquel nous avons choisi dafficher les deux calques.

4. Jutilise une requête dynamique

Utiliser des données extraites plutôt quune requête présente un inconvénient : la mise à jour des données sur OpenStreetMap nest pas répercutée sur notre carte. Pour pallier à cela nous vous proposons de modifier le calque montrant les parkings à vélos sous forme de marqueurs, de sorte quil utilise une requête dynamique.

Une requête dynamique permet dinjecter dans la requête des variables relatives à létat actuel de la carte uMap. Nous allons utiliser une requête qui sapplique sur la seule partie visible de la carte, définie par un rectangle (ou bounding box). Cette requête sexécutera à chaque zoom ou déplacement de la carte (doù le terme dynamique) et récupérera les parkings à vélos à lintérieur de ce rectangle.

Simplifier la requête Overpass

!!! note

Pour faciliter lopération nous commençons par
simplifier la requête Overpass. Les points importants sont :

1.  placer la clause **`[bbox:{{bbox}}]`** en entête de requête pour que
    ce paramètre ne soit présent quune seule fois
2.  remplacer la production du résultat par la clause **`out center;`**
    qui permet de convertir chaque *way* (fermé ou pas) en un point

        [out:xml][bbox:{{bbox}}];
        (
         node["amenity"="bicycle_parking"];
         way["amenity"="bicycle_parking"];
        );
        out center;

Adapter et exporter la requête

requete_dynamique.png

Lopération est délicate, et exige sang froid et concentration :

  1. remplacez {{box}} par {south},{west},{north},{east} : il sagit de 4 variables quuMap remplacera, lors de lexécution de la requête, par les valeurs définissant lemprise de la carte.
  2. exportez la requête en utilisant loption download/copy as standalone query : un fichier texte est produit et téléchargé.
  3. ouvrez le fichier dans un éditeur de texte et ajoutez en début de ligne la base de lURL permettant dexécuter une requête Overpass : http://overpass-api.de/api/interpreter?data=
  4. copiez la requête modifiée et collez le texte dans le champ URL de longlet Données distantes
  5. activez loption Dynamique et définissez le zoom à partir duquel le calque est affiché
  6. selon le serveur Overpass utilisé, loption Avec proxy doit être activée ou désactivée (voir ci-dessous)

Par commodité la requête modifiée est reprise ci-dessous, où elle peut être copiée par un triple-clic :

http://overpass-api.de/api/interpreter?data=[out:xml][bbox:{south},{west},{north},{east}];(node["amenity"="bicycle_parking"];way["amenity"="bicycle_parking"];);out center;

!!! note Nhésitez pas à utiliser un autre serveur Overpass en libre service, dont la liste est disponible dans les Paramètres généraux de Overpass Turbo, par exemple https://overpass.kumi.systems/. Attention ce dernier exige dactiver loption Avec proxy, alors que le serveur http://overpass-api.de/ nécessite que loption soit désactivée.

!!! note

Nutilisez pas la variable {bbox} car elle sera
remplacée par des coordonnées dont lordre (W,S,N,E) nest pas celui
attendu par Overpass (S,W,N,E) !

Vous pouvez manipuler ci-dessous la carte produite par lensemble de ce tutoriel. Zoomez jusquà ce que les parkings à vélos apparaissent et déplacez la carte pour constater laspect dynamique des requêtes.

Voir en plein écran

Faisons le point

Nous avons vu comment créer une carte montrant les données OpenStreetMap à jour, à laide de requêtes Overpass. Seule la couche montrant la densité des stationnements sous forme de heatmap nécessitera de renouveler lextraction des données de temps en temps.

!!! note Les serveurs Overpass utilisés dans ce tutoriel sont des serveurs en libre service mis à disposition gracieusement. Ces serveurs sont très sollicités aussi il convient de les utiliser avec modération.

Si vous produisez une carte destinée à un grand nombre de consultations,
préférez lutilisation de données statiques, importées dans uMap ou
stockées sur un serveur. Merci !

Si vous utilisez Github, ce [court
tutoriel](https://hackmd.io/OkwpRqQ7QXC3p8C0jfTUGQ?view) en anglais
explique comment utiliser un *workflow* pour exécuter une requête
Overpass et placer le résultat en cache.

??? info "Licence"

Travail initié par Antoine Riche sur [CartoCité](https://wiki.cartocite.fr/doku.php?id=umap:11_-_je_valorise_les_donnees_openstreetmap_avec_umap) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).