Cartopartie sentiers de Rumes
Toggle navigation
carto-sentiers
Notes partagées
C'est quoi Openstreetmap ?
C'est quoi OpenStreetMap ?
Qui l'a fait et pourquoi ?
Et ça fonctionne ?
Mais pourquoi ça marche ?
Un projet jamais fini !
Et les données sont vraiment libres ?
Et les données sont vraiment fiables ?
Contribuer sur Openstreetmap
Tuto : contribuer sur Openstreetmap
Interroger la base Openstreetmap
Imprimer une carte Openstreetmap
Le vélo dans Openstreetmap
Créer un point noeuds et une relation dans osm (vidéo)
Ressources partagées
Sommes-nous prêts à partager ?
Gardien de la ressource
Rechercher
×
Se connecter
×
Se connecter
Mot de passe perdu ?
Se souvenir de moi
S'inscrire
Aide
Gestion du site
Tableau de bord
Base de données
Dépôts
Archives
Activer JavaScript pour joindre des fichiers.
Joindre / Insérer un fichier
Annuler
Échoué
×
Télécharger le fichier
Texte du lien de téléchargement
Alignement de l'image
Gauche
Centre
Droite
Taille de l'image
Miniature (140x97)
Moyenne (300x209)
Large (780x544)
Taille originale
Texte de la vignette
Paramètres avancés
Lien associé
Effets graphiques
Bord blanc
Ombre portée
Agrandissement au survol
Texte de remplacement
======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" ""<div class="lead">""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.""</div>"" {{grid}} {{col size="6"}} ===si vous travaillez sur une zone "fixe" de la carte=== - soit vous i__mportez 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 {{end elem="col"}} {{col size="6"}} ===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 ;-( {{end elem="col"}} {{end elem="grid"}} ====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=== {{grid}} {{col size="8"}} 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. {{end elem="col"}} {{col size="4"}} {{attach file="assistantrequete.png" desc="image assistantrequete.png (34.6kB)" size="original" class="left"}} {{end elem="col"}} {{end elem="grid"}} {{attach file="requetearbres.png" desc="image requetearbres.png (0.4MB)" size="original" class="left"}}""<div class="clearfix"></div>"" 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 ! ** ""<div style="display: none;">"" CETTE PARTIE N EST PLUS A JOUR ==Adapter la requête pour uMap== Avant d'exporter la requête nous devons l'adapter. L'assistant 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. Les données devraient de nouveau s'afficher sur la carte. {{attach file="requetexml.png" desc="image requetexml.png (0.2MB)" size="original" class="left"}}""<div class="clearfix"></div>"" ""</div>"" ===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. {{attach file="requetelienjson.png" desc="image requetelienxml.png (34.8kB)" size="original" class="left"}}""<div class="clearfix"></div>"" {{grid}} {{col size="6"}} ==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. {{end elem="col"}} {{col size="6"}} {{attach file="importrequetexml.png" desc="image importrequetexml.png (30.9kB)" size="original" class="left"}} {{end elem="col"}} {{end elem="grid"}} ===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). {{attach file="tableattribut.png" desc="image tableattribut.png (66.0kB)" size="original" class="left"}}""<div class="clearfix"></div>"" {{grid}} {{col size="5"}} 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 ;-( {{end elem="col"}} {{col size="7"}} {{attach file="designinfobulletag.png" desc="image designinfobulletag.png (25.9kB)" size="original" class="left"}}{{attach file="renduinfobulletag.png" desc="image renduinfobulletag.png (16.6kB)" size="original" class="left"}} {{end elem="col"}} {{end elem="grid"}} 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=== == ""<span class="label label-danger">Important</span>"" zone sensible et PAS TOUJOURS opérationnelle== 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;%%
Sauver
Annuler
Thème
Protection anti-spam active
×
Apparence de la page RecupererOsm
Thème
gatien-bootstrap3
margot
minibandeauhaut
yeswiki
Squelette
fixed-1col.tpl.html
fixed-2cols-left.tpl.html
fixed-2cols-right.tpl.html
fixed-3cols.tpl.html
fullscreen-1col.tpl.html
fullscreen-2cols-left.tpl.html
fullscreen-2cols-right.tpl.html
fullscreen-3cols.tpl.html
fullwidth-1col.tpl.html
responsive-1col.tpl.html
responsive-2cols-left.tpl.html
responsive-2cols-right.tpl.html
responsive-3cols.tpl.html
Style
blue.css
gray.css
green.css
red.css
yellow.css
Image de fond
‹
›
Paramètres avancés
Langue de la page
Català
English
Español, castellano
Français
Nederlands, Vlaams
Português
Choisir une page pour :
le menu horizontal
les raccourcis en haut à droite
l'entête (bandeau)
le pied de page
le menu vertical
la colonne de droite