Sites


Guide du SIG libre

Webmapping et OSM avec uMap

Projet Espace OpenStreetMap Francophone

v1.0, 18/12/2014

88x31.png

Publié sous licence Creative Commons Attribution-ShareAlike 3.0 Unported License

Paternité (BY) - Partage des Conditions Initiales à l'Identique (SA)

http://creativecommons.org/licenses/by-sa/3.0/

 

Ce chapitre est un guide d'utilisation de uMap, un projet qui permet à des non-techniciens de pouvoir créer très facilement des cartes en ligne partageable avec différentes sources de données, alors que par le passé cet objectif imposait la mise en place d’une structure logicielle lourde et techniquement complexe (serveur web, serveur de données, lignes d’encodage, etc.) ou l'utilisation de plateformes s’appropriant les données crées et ne permettant pas de les récupérer, à l’exemple des cartes personnelles réalisées avec GoogleMaps. Simple d’emploi, il  constitue un vrai changement dans la réutilisation de la donnée géographique sur le web.


Qu'est-ce que uMap ?

uMap est un service en ligne créé par Yohan Boniface qui permet de créer gratuitement des cartes web interactives et personnalisables qui utilisent notamment en fonds des rendus OpenStreetMap.

Le projet est open source, sous la licence publique permissive WTFPL et le code est hébergé sur Bitbucket. Il est hébergé sur les serveurs de l'association OpenStreetMap France.

Que peut-on faire avec uMap ?

Avec uMap, il est facile de créer des cartes personnalisées qui utilisent en fonds des rendus OpenStreetMap avec par-dessus des calques de différentes natures :

  • des points, lignes et polygones ajoutés à la main

  • des données vectorielles existantes sous forme de fichiers qui sont importés dans la carte

  • des données en ligne, dont OSM, récupérées via une requête et automatiquement mis à jour dès qu'elles sont modifiées à la source

 

L'outil est facile à utiliser et permet à des non-géographes ou cartographes de réaliser facilement des cartes (cependant, pour qu'elle soit réussie, toute carte doit respecter les conventions de la cartographie qui visent à rendre les cartes facilement compréhensibles) qui peuvent être aussi intégrées dans un site web.

Par défaut, vous êtes le seul éditeur de la carte, mais pouvez ajouter d'autres éditeurs ou la rendre éditable par n'importe qui. Par défaut, la carte est publique, mais vous pouvez choisir qu'elle soit privée pour vous-même ou votre groupe d'éditeurs, et non accessible aux internautes ou aux autres utilisateurs de uMap.

Que ne peut-on pas faire avec uMap ?

uMap n'est pas conçu pour faire des cartes imprimées, avec un titre et une légende, bien qu'il soit possible de faire des impressions écran. Pour l'obtention de cartes papier, il convient mieux d'utiliser des outils en ligne comme MapOSMatic (mais qui ne permet pas d'ajouter de la donnée au fonds OpenStreetMap) ou des outils hors ligne comme QGIS (sur lequel vous pouvez tout faire, mais nécessite un apprentissage plus long).

 

Pour vous faire une idée, vous pouvez regarder des cartes déjà réalisées. Depuis la page d'accueil de uMap, descendez un petit peu pour faire apparaitre la carte des uMaps dans le monde. Vous pouvez cliquer et zoomer pour voir des cartes sur une zone precise.

uMap_carte_uMaps.png

Vous pouvez aussi descendre un peu plus depuis la page d'accueil et voir la liste des dernières cartes réalisées.

 

Débuter avec uMap

Rendez-vous sur le site de uMap: http://umap.openstreetmap.fr. Evitez d'utiliser Internet Explorer. Automatiquement le site détecte la langue du système d'exploitation et adopte soit le français, soit l'anglais. Si votre système d'exploitation est en anglais et que vous préférez uMap en français, changez "en" par "fr" à la fin de l'URL.

uMap_page_accueil_fleches.png

Vous pouvez créer une carte sans vous connecter, mais cela n'est pas vraiment conseillé car vous aurez plus de mal à la retrouver par la suite.

Cliquez sur "Connexion / Créer un compte" et parmi les choix disponibles, vous pouvez choisir OpenStreetMap. Une page va s'ouvrir pour vous demander d'accepter que uMap se connecte à votre compte. Acceptez en cliquant sur le bouton en bas et vous retournerez automatiquement sur uMap, mais cette fois en étant connecté.

Toutes les cartes que vous créerez seront accessibles depuis "Mes cartes" en haut de la page d'accueil.

Interface et paramétrages des cartes uMap

Interface de uMap

Légende dune carte sur uMap.PNG

 

Créer une carte

  • Cliquez sur le bouton "Créer une carte" en haut à droite.

 

Vous allez arriver sur une carte centrée sur le Nord de la France.

A droite, vous trouvez la barre d'outils, à laquelle seuls les éditeurs de la carte ont accès.

A gauche se trouvent des outils qui sont utilisables à toute personne qui peut accéder à la carte. En dessous des zooms plus et moins se trouvent le sélecteur de calques. Si vous cliquez en bas sur uMap_Plus.png, d'autres outils apparaissent.

 

  • Commencez par vous déplacer jusqu'à la zone que vous voulez voir apparaitre sur votre carte, et à zoomer ou dézoomer au besoin. Vous pouvez aussi aller directement sur une localité en cliquant sur uMap_plus.png, puis sur uMap_trouver_localite.png, et en saisissant le nom de la localité.

  • Cliquez sur Carte sans nom en haut à gauche pour pouvoir donner un nom à votre carte. Un bloc de propriétés va s'ouvrir sur la droite.

  • Saisissez le nom de la carte et cliquez sur Enregistrer.

uMap_nom_carte_fleches.png

La carte est maintenant sauvegardée et son URL intègre le nom. Ce qui identifie la carte est cependant le numéro qui suit juste après le nom, ce qui permet de changer le nom de la carte par la suite si besoin.

  • vous pouvez maintenant éditer votre carte, quand vous êtes satisfait du résultat, cliquez sur uMap_enregistrer.png pour sauvegarder de façon permanente vos modifications.

Paramétrages de la carte

uMap_centrer_zoom.png permet de conserver le centre de la carte et le zoom qui seront utilisés au lancement de la carte.

uMap_carte_fonds_de_carte.png permet de choisir quel rendu OSM sera affiché en fond de carte. Le rendu standard, le plus régulièrement remis à jour, est celui nommé "OpenStreetMap". Il est possible de choisir n'importe quel autre fond, comme "HOTOSM Style" pour l'humanitaire ou "Toner" qui, étant noir et blanc, a l'avantage de faire ressortir les calques qui seront ajoutées par dessus.

uMap_carte_permissions.pngpermet de choisir les permissions de la carte, concernant l'édition et l'accès.

Pour le statut d'édition, vous pouvez ne pas vouloir être le seul créateur (option par défaut) et soit choisir des éditeurs (saisissez alors leur identifiants en bas - ils doivent s'être déjà connectés sur uMap), soit choisir que tout le monde puisse éditer.

Pour l'accès, vous pouvez ne pas vouloir que tout le monde puisse accéder (option par défaut), mais seulement ceux qui possèdent le lien (l'URL) ou même seulement les éditeurs (qui peut se restreindre à vous-même). Cliquez sur le bouton bleu en bas pour

uMap_carte_parametrages.pngpermet de changer le nom, mais aussi de paramétrer l'interface et le fond :

Editer les propriétés dune carte sur uMap - Etape1.PNG

1. Les "Options d'Affichage", où vous pourrez décider d'afficher ou non le bouton "Plus" (et ainsi permettre aux utilisateurs d'accéder à plus d'options), le bouton sélecteur de calques, le bouton de zoom, la possibilité de zoomer avec la molette, la mini-carte de situation, l'échelle de la carte, etc.

Editer les propriétés dune carte sur uMap - Etape2.PNG

2. Le "Fond de carte custom", où vous pourrez modifier le fond de carte en insérant un lien URL.

Editer les propriétés dune carte sur uMap - Etape3.PNG

 

3. Les "Actions avancées", où vous pourrez supprimer une carte ou la cloner.

Editer les propriétés dune carte sur uMap - Etape4.PNG

Calques et création de données dans uMap

Créer un calque

  • Placez votre souris sur le sélecteur de calques (3ème bouton à gauche).

Créer un calque avec uMap - Etape0.PNG

  • puis cliquez sur "Ajouter un calque".

Créer un calque avec uMap - Etape1.PNG

 

  • Donner un nom et une description au calque

Créer un calque avec uMap - Etape2.PNG

  • Si vous ne voulez pas que le calque s'affiche par défaut au chargement de la carte (parce que la donnée qu'il contient est lourde à charger ou parce que vous jugez qu'il y aurait trop d'informations en même temps sur la carte), décochez la case "Afficher au chargement".

  • Cliquez sur uMap_enregistrer.pngpour sauvegarder le calque.

  • En allant dans le sélecteur de calques uMap_selecteur_calques.pngpuis en cliquant sur le crayon uMap_crayon.png, vous pouvez à nouveau modifier les paramètres du calque.

 

 

Créer un calque avec uMap - Etape3.PNG

 

Supprimer un calque

  • Placez la souris sur le sélecteur de calques uMap_selecteur_calques.png puis en cliquez sur le crayon uMap_crayon.png du calque à supprimer pour accéder à ses paramètres.

  • Cliquez tout en bas sur "Actions avancées" puis "Supprimer"

Créer un calque avec uMap - Etape6.PNG

Dessiner des points

  • Pour ajouter un point sur la carte, cliquez sur le 3ème bouton à droite, puis placez votre point à l'endroit où vous le souhaitez.

Créer un point avec uMap - Etape0.PNG

 

  • Choisissez sur quelle calque vous souhaitez que le point apparaisse. Donnez un nom et une description au point.

Créer un point avec uMap - Etape1.PNG

  • répétez l'opération autant de fois que nécessaire pour créer tous vos points.

  • si la représentation pour l'ensemble des points ne vous convient pas, allez dans le sélecteur de calques uMap_selecteur_calques.png, cliquez sur le crayon uMap_crayon.png du calque et changez le paramètre. Pour les points, vous pouvez modifier les paramètres suivants :

    • Couleur (sélectionnez dans le tableau ou saisissez un code hexadécimal commençant par #, par exemple #00000 pour le noir)

    • Forme de l'icône

    • Ajouter un symbole (choisissez dans la liste ou indiquez l'URL d'une icône)

    • Gabarit pour la pop-up (la fenêtre qui montre le nom et la description quand(la fenêtre qui montre le nom et la description qaund on clique sur la ligne) on clique sur le point)

    • Niveau de zoom automatique

    • Ajouter une étiquette

  • si vous désirez que l'un des points ait une représentation différente des autres points, cliquez dessus puis changez ses proriétés avancées, il sera le seul modifié.

  • Cliquez sur uMap_enregistrer.pngpour sauvegarder les modifications.

Créer un point avec uMap - Etape2.PNG

 

  • Pour visionner le résultat, "Enregistrer" puis cliquez sur "Désactiver l'édition".

Créer un point avec uMap - Etape3.PNG

 

Créer un point avec uMap - Etape4.PNG

Dessiner des polygones

  • Cliquez sur le 2ème bouton en haut à droite.

Créer un polygone avec uMap - Etape0.PNG

  • Tracez votre polygone suivant la zone qui vous intéresse (revenez sur le premier point pour fermer votre polygone).

Créer un polygone avec uMap - Etape1.PNG

 

  • Donner un nom et si besoin une description au polygone.

Créer un polygone avec uMap - Etape2.PNG

  • Répétez l'opération autant de fois que nécessaire pour créer tous vos polygones.

  • Si la représentation pour l'ensemble des polygones ne vous convient pas, allez dans le sélecteur de calques uMap_selecteur_calques.png, cliquez sur le crayon uMap_crayon.png du calque et changez le paramètre. Pour les polygones, vous pouvez modifier les paramètres suivants :

    • Couleur (sélectionnez dans le tableau ou saisissez un code hexadécimal commençant par #, par exemple #00000 pour le noir)

    • Opacité

    • Épaisseur (du trait du contour)

    • Pointillés (paramétrables en indiquant la largeur de chaque trait et espace par des chiffres séparés par une virgule)

    • Gabarit pour la pop-up (la fenêtre qui montre le nom et la description quand on clique sur le polygone)

    • Trait (si le contour du polygone est visible ou non)

    • Remplissage (présence oui ou non)

    • Couleur de remplissage

    • Opacité du remplissage

    • Lien externe

    • Clickable (oui ou non)

Créer un polygone avec uMap - Etape3.PNG

  • Si vous désirez que l'un des polygones ait une représentation différente des autres points, cliquez dessus puis changez ses proriétés avancées, il sera le seul modifié.

  • Cliquez sur uMap_enregistrer.pngpour sauvegarder les modifications.

 

Dessiner des lignes

  • Cliquez sur le 1er bouton en haut à droite.

Créer des lignes avec uMap - Etape0.PNG

 

  • Tracez vos lignes suivant la ligne ou la zone qui vous intéresse (revenez sur le premier point pour fermer la zone).

Créer des lignes avec uMap - Etape1.PNG

 

  • Donner un nom et si besoin une description.

Créer des lignes avec uMap - Etape2.PNG

 

  • répétez l'opération autant de fois que nécessaire pour créer toutes vos lignes.

  • si la représentation pour l'ensemble des lignes ne vous convient pas, allez dans le sélecteur de calques uMap_selecteur_calques.png, cliquez sur le crayon uMap_crayon.png du calque et changez le paramètre. Pour les lignes, vous pouvez modifier les paramètres suivants :

    • Couleur (sélectionnez dans le tableau ou saisissez un code hexadécimal commençant par #, par exemple #00000 pour le noir)

    • Opacité

    • Épaisseur (du trait du contour)

    • Simplification du tracé (cela permet de simplifier le contour aux zooms les plus petits)

    • Pointillés (paramétrables en indiquant la largeur de chaque trait et espace par des chiffres séparés par une virgule)

    • Gabarit pour la pop-up (la fenêtre qui montre le nom et la description quand on clique sur la ligne)

    • Niveau de zoom automatique

Créer des lignes avec uMap - Etape3.PNG

  • si vous désirez que l'un des polygones ait une représentation différente des autres points, cliquez dessus puis changez ses proriétés avancées, il sera le seul modifié.

  • Cliquez sur uMap_enregistrer.pngpour sauvegarder les modifications.

Modifier un objet

  • Pour modifier un point, cliquez sur le crayon uMap_edition.png pour passer en mode édition, puis cliquez sur le point à modifier.

Créer un point avec uMap - Etape5.PNG

Supprimer un objet

  • En mode édition, cliquez sur un objet, puis sur "Actions avancées" puis "Supprimer" ou faites un clic droit sur l'objet et cliquez sur "Supprimer cet élément".

Créer un point avec uMap - Etape6.PNG

  • Cliquez sur uMap_enregistrer.png puis sur "Désactiver l'édition".

 

Importer des données dans uMap

Vous avez 2 solutions : importer un fichier ou utiliser un lien vers des données distantes.

Importer un fichier (Data)

Cela convient mieux pour les données qui changent rarement.

  • Créez si besoin un nouveau calque

  • Cliquez sur uMap_import.png, le 4ème bouton en haut à droite.

Importer des données sur uMap - Etape0.PNG

  • Sélectionnez votre fichier de données à importer en cliquant sur "Parcourir".

  • Sélectionnez le format du fichier. Sont pris en charge les formats geojson, csv, gpx, kml, osm, georss. D'autres peuvent apparaitre au fur et à mesure des améliorations apportées à uMap.

  • Indiquez le bon calque où importer les données.

  • Finalisez en cliquant sur "Importer".

Importer des données sur uMap - Etape1.PNG

  • Rendez-vous dans le sélecteur de calques uMap_selecteur_calques.png, puis cliquer sur le crayon uMap_crayon.png du calque pour accéder à ses paramètres.

  • Aller dans les "Propriétés avancées" puis descendez jusqu'à "gabarit pour la popup" pour spécifier les infos que vous voulez voir apparaître. Si vos données possèdent plusieurs attributs (c'est le cas pour OSM), choisissez Tableau.

Importer un lien URL (requête)

A l'inverse, cette méthode est plus adaptée pour les données qui changent souvent et sont accessibles via URL. Ainsi, elles seront mises à jour automatiquement. Il peut s'agir de données OSM, d'un flux RSS, ou de données mises à jour sur un serveur externe et accessibles aux formats geojson, csv, gpx ou kml.

  • Rendez-vous dans le sélecteur de calques uMap_selecteur_calques.png, puis cliquer sur le crayon uMap_crayon.png du calque pour accéder à ses paramètres.

Importer des données sur uMap - Etape2.PNG

 

  • Cliquez sur "Données Distantes".

 

Créer un calque avec uMap - Etape5.PNG

  • Insérez le lien URL que vous aurez récupéré, par exemple sur http://www.overpass-turbo.eu (voir le chapitre du guide qui lui est dédié).

  • Indiquez le format des données (OSM s'il s'agit d'un lien overpass-turbo)

  • Aller dans les "Propriétés avancées" puis descendez jusqu'à "gabarit pour la popup" pour spécifier les infos que vous voulez voir apparaître. Si vos données possèdent plusieurs attributs (c'est le cas pour OSM), choisissez Tableau.

  • Cliquez sur uMap_enregistrer.png.

Modes de représentation avancée des points dans uMap

Il existe pour le moment deux modes de représentations avancés pour les points.

Représentation par cluster

Ce mode de représentation s'adresse à des points d'un même calque pour lesquelles il est intéressant, lorsqu'ils sont proches, qu'ils soient regroupés lorsque le zoom est à échelle moyenne ou petite, plutôt que de se chevaucher. Les points se rassemblent alors en "clusters", et au centre de chacun d'eux est indiqué le nombre de points qu'il contient. Lorsque les points ne se trouvent pas dans un cluster, ils sont représentés par le symbole choisi pour la couche (deux enfants qui courent dans l'exemple ci-dessous).

uMap_clusters_exemple.png

Pour obtenir ce résultat, il faut :

  • si besoin, cliquer sur uMap_edition.png pour passer en mode édition

  • Aller sur le sélecteur de calques uMap_selecteur_calques.png puis sur le crayon uMap_crayon.png du calque que vous voulez modifier.

  • Dans "Type de calque", changez "Par défaut" par "Avec cluster".

 

uMap_clusters_parametrage.png

  • Cliquez sur uMap_enregistrer.pngpour sauvegarder le calque.

Représentation par heatmap (carte de chaleur)

Ce mode de représentation s'adresse à des points d'un même calque pour lesquelles vous cherchez à montrer leur concentration à travers une reprśentation colorée allant du bleu (faible concentration) au rouge en passant par le vert, le jaune et l'orange. Il nécessite de fait une grande densité de données.

uMap_heatmap_exemple.png

Pour obtenir ce résultat, il faut :

  • si besoin, cliquer sur uMap_edition.png pour passer en mode édition

  • Aller sur le sélecteur de calques uMap_selecteur_calques.png puis sur le crayon uMap_crayon.png du calque que vous voulez modifier.

  • Dans "Type de calque", changez "Par défaut" par "Heatmap".

  • Allez dans "Propriétés avancées", tout en bas pour paramétrer le rayon et l'intensité de la heatmap

uMap_parametres.png

Visualiser ou faire des recherches dans les données uMap

Ces actions peuvent être réalisées par tous ceux qui ont accès à la carte, pas seulement les éditeurs. Elles concernent tous les types d'objets : ceux dessinés, ceux importés depuis un fichier et les données distantes.

  • Aller sur le sélecteur de calques uMap_selecteur_calques.png puis sur uMap_visualiser_donnees.pngqui affiche tous les objets de chaque couche

uMap_visualiser_donnees_exemple.png

  • saisissez du texte dans la zone "Filtrer..." pour n'afficher que les objets correspondant au filtre.

  • cliquez sur une loupe uMap_loupe.png si vous désirez dépalcer la carte sur un objet en particulier.

Partager la carte uMap ou les données visibles

Ces actions peuvent être réalisées par tous ceux qui ont accès à la carte, pas seulement les éditeurs.

  • Cliquez à gauche sur uMap_plus.pngpour faire apparaître les outils supplémentaires puis sur "Exporter et Partager la carte"uMap_partager.png.

Récupérer une iframe à insérer dans une page web

 

  • Copier le texte qui se trouve dans la boîte sous "Embarquer la carte en iframe"et aller le coller dans votre page web.

Récupérer une URL courte menant à la carte

  • Copier le texte qui se trouve dans la boîte sous "URL courte".

Télécharger les données visibles sur la carte

  • Choisir le format des données qui seront téléchargées, entre geojson, gpx et kml.

  • Cliquer sur le bouton en bas "Télécharger les données".

 

Chercher une localité dans uMap

Cette action peut être réalisée par tous ceux qui ont accès à la carte, pas seulement les éditeurs.

  • Cliquez sur uMap_plus.png, puis sur uMap_trouver_localite.png, et en saisissant le nom de la localité.

Mettre à jour la donnée OSM visible dans la carte uMap

Cette action peut être réalisée par tous ceux qui ont accès à la carte, pas seulement les éditeurs.

  • Cliquez sur uMap_plus.png, puis sur uMap_edition_OSM.png puis choisissez votre éditeur, iD ou JOSM. Si vous choisissez JOSM, il faut que le logiciel soit déjà ouvert et son contrôle à distance soit activé.

Mesurer des distances sur la carte uMap

Cette action peut être réalisée par tous ceux qui ont accès à la carte, pas seulement les éditeurs.

  • Cliquez sur uMap_plus.png, puis sur uMap_mesurer_distances.png puis dessinez le parcours que vous voulez mesurez. A chaque nouveau clic, la distance totale est mise à jour.

Dernières fonctionnalités implémentées

uMap fait régulièrement l'objet de nouveaux développements, de sorte que le présent chapitre peut ne pas couvrir les derniers disponibles. Pour les connaître, il est conseillé de regarder le journal OSM de Yohan Boniface, le développeur de uMap : https://www.openstreetmap.org/user/ybon/diary.

Informer d'un problème ou faire une suggestion sur uMap

Il est possible d'envoyer un email directement au développeur de uMap, Yohan Boniface. depuis la page d'accueil de uMap, cliquez sur "Feedback".

Il est également possible de créer un ticket pour un bug ou une suggestion sur la page du projet sur Bitbucket, à condition de s'inscrire sur le site au préalable  : https://bitbucket.org/yohanboniface/umap.

Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.

Vous devriez rafraîchir la page.