Récupérer et afficher des données d'openstreetmap

Il est possible de présenter sur une carte umap des données existantes sur Openstreetmap.
Pourquoi faire me direz-vous pouisqu'elles sont sur Openstreetmap et qu'Osm est utilisé comme fond de plan sur Umap ?

parce que certaines données d'osm n'ont pas de rendu et du coup sont "invisibles" sur la carte
parce que sur des cartes participatives, il peut être. intéressant de rendre (très) visible l'existant pour permettre de combler les "manques"

Il existe différentes façons de ramener de la données d'osm dans umap. Le choix va dépendre de plusieurs critères.

si vous travaillez sur une zone "fixe" de la carte

soit vous importez les données
- avantages : affichage hyper rapide de la carte même si il y a beaucoup de données à afficher
- désavantage : les données sont "datées" et donc pas en phase avec l'état d'osm (sauf à faire l'import chaque semaine)
soit vous importez une requête
- avantages : les données sont toujours "à jour" avec les infos d'osm puisqu'il y a requête en temps réel
- désavantage : ne fonctionne pas si il y a beaucoup de données à afficher, ça rame trop

si vous travaillez sur une zone "glissante" de la carte

il faudra importer une requête dynamique
- avantages : quelque soit l'endroit où vous êtes, les données s'affichent
- désavantage : compliqué et pas toujours fonctionnel ;-(

Récuperez les infos d'osm via l'api Overpass

Osm est une grande base de données avant d'être une carte.pour interroger ce gigantesque tableur, il existe l'api Overpass disponible sur https://overpass-turbo.eu
Grâce à elle, nous allons pouvoir interroger osm et en extraire soit des données, soit des requêtes à injecter ensuite dans Umap.
Pour interroger Overpass, il faudra utiliser les clés et les valeurs d'Osm (ex natural=tree pour les arbres).

Interroger Overpass pour ramener une requête

Le site Overpass Turbo propose un assistant qui facilite la rédaction d'une requête. Activez l'assistant et saisissez le texte suivant, qui permet d'extraire l'emplacement des arbres sur la zone affichée.

natural=tree

Cliquez ensuite sur construire et exécuter.
L'écran change et vous montre à gauche la requête construite et à droite sur la carte les données trouvées.

Vous pouvez explorer un peu la requête en cliquant sur les points. Vous pouvez aussi constater que si vous faites glisser la carte, elle ne se met pas à jour => ce n'est pas une requête dynamique mais bien une requête liée à ce morceau de carte précis !

Exporter la requête Overpass

Exportez la requête en cliquant sur Exporter : un panneau s'affiche. Ouvrez l'onglet 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 l'adresse du lien (avec Mozilla Firefox) : l'URL de la requête est copié dans le presse-papier.

Utiliser la requête dans uMap

Dans un carte uMap, créez un calque et ouvrez l'onglet Données distantes. Collez dans la case URL le contenu du presse-papier et sélectionez le format osm.

Notez que l'URL 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 !

A SAVOIR : Pour les données importées via requête, il n'y a pas de possibilités de travailler le rendu de l'infobulle, ni de voir la table d'attributs, ni de contribuer sur ce calque.

Interroger Overpass pour ramener des données "statiques"

Il arrive que les requêtes que l'on envoie sur Overpass prennent du temps à s'afficher (plusieurs secondes). Il y a "trop" de données sur la zone.
Ce délai est trop long pour une carte interactive. Aussi plutôt que d'exécuter le requête lors de l'affichage de la carte nous préférons extraire les données et les importer dans uMap.

Construisez votre requête dans Overpass comme précédemment et faites construire et éxecuter. Le résultat s'affiche sur la carte.
Cliquez sur Exporter, sélectionnez l'onglet 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 sur votre ordinateur (parfois compressé en .zip).

Dans la carte uMap importez le fichier ainsi produit dans un nouveau calque. Les données sont affichées.
Vous pouvez dans la section "édition des calques" voir les données importées (et les tags disponibles) en cliquant sur le petit tableau.
Vous pouvez aussi voir les données importées (et les tags disponibles) en demandant dans les options d'interaction du calque, un affichage tableau du popup et en cliquant sur les points (en ayant désactivé l'édition).

De la même façon qu'on peut customiser le look et le contenu de l'infobulle (voir tuto précédent), il est possible de remplir l'infobulle avec les valeurs importées dans le calque.
Pour ce faire, rendez-vous en mode édition dans les options d'interaction de votre calque. Dans gabarit du contenu de la popup :

par défaut pour l'affichage
et composez le contenu de l'infobulle en dessous en plaçant les tags entre {}

L'exemple ci à côté vous indique ce que cette infobulle rend sur la carte.
Attention : c'est très sensible, le moindre faux pas dans le nom du tag et pas d'affichage ;-(

Le désavantage de cette méthode est que les données ne sont pas maintenue à jour par rapport à osm. C'est embêtant dans certains cas mais peut-être "compensé" par un import à fréquence régulière en "écrasant" les données du calque (Remplacer le contenu du calque).
Lorsqu'on ajoute un point sur ce calque, on est invité à rentrer toutes les informations du "tableau".

Astuce: si la quantité d'informations importées est trop grande, la carte peut s'en trouver fort encombrée et illisible. Vous pouvez alors activer dans les options de votre claque, un affichage en cluster (points regroupés) ou en heatmap (carte de chaleur).

Interroger Overpass pour ramener une requête dynamique

Important zone sensible et NON opérationnelle actuellement

Utiliser des données extraites plutôt qu'une requête présente un inconvénient : la mise à jour des données sur OpenStreetMap n'est 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 qu'il utilise une requête dynamique.

Une requête dynamique permet d'injecter dans la requête des variables relatives à l'état actuel de la carte uMap. Nous allons utiliser une requête qui s'applique sur la seule partie visible de la carte, définie par un rectangle (ou bounding box). Cette requête s'exécutera à chaque zoom ou déplacement de la carte (d'où le terme dynamique) et récupérera les données demandées à l'intérieur de ce rectangle.

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

placer la clause [bbox:{{bbox}}] en entête de requête pour que ce paramètre ne soit présent qu'une seule fois
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["natural"="tree"];
 way["natural"="tree"];
);
out center;

Adapter et exporter la requête

L'opération est délicate, et exige sang froid et concentration :

remplacez {{box}} par {south},{west},{north},{east} : il s'agit de 4 variables qu'uMap remplacera, lors de l'exécution de la requête, par les valeurs définissant l'emprise de la carte.
exportez la requête en utilisant l'option download/copy as standalone query : un fichier texte est produit et téléchargé.
ouvrez le fichier dans un éditeur de texte et ajoutez en début de ligne la base de l'URL permettant d'exécuter une requête Overpass : http://overpass-api.de/api/interpreter?data=
copiez la requête modifiée et collez le texte dans le champ URL de l'onglet Données distantes
activez l'option Dynamique et définissez le zoom à partir duquel le calque est affiché

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["natural"="tree"];way["natural"="tree"];);out center;