7.3 Web et cartes interactives

Cette section fournit:

  • Un aperçu des outils de carte interactive en ligne pour la visualisation des données
  • Instructions pas à pas pour la création de cartes interactives avec deux outils: uMap et Overpass Turbo

Aperçu

Les cartes interactives sont considérées comme l’équivalent moderne de la communication visuelle avec des cartes. Cela implique la création et l’étude de la représentation visuelle des données (cartes). Pour communiquer des informations de manière claire et efficace, la visualisation de données utilise des graphiques statistiques, des graphiques d’information et d’autres outils. L’utilisation de cartes interactives offre aux utilisateurs la possibilité de modifier librement l’affichage de la carte selon ses préférences.

Ressources et supports de formation

Cette section présente une sélection de ressources destinées aux gestionnaires de projet, aux formateurs ou même aux auto-apprenants sur les sujets décrits ci-dessus.

La section suivante est conçue pour servir de matériel auto-rythmé pouvant être utilisé à la fois pendant les formations et par des apprenants auto-guidés.

Cette section couvre deux outils permettant de créer des cartes interactives à l’aide de données OSM uMap et Overpass Turbo. uMap vous permet de créer rapidement des cartes avec des couches OSM. La plate-forme propose des exemples de cartes pour vous inspirer des couches, des points d’intérêt, de la conception et des licences Overpass Turbo Query est un outil de filtrage de données basé sur le Web pour OSM. Vous pouvez exécuter des requêtes et analyser les données OSM résultantes de manière interactive sur une carte. Il existe un assistant intégré qui facilite la création de requêtes.

Overpass Turbo

Overpass Turbo Query est un outil d’exploration de données basé sur le Web pour OpenStreetMap. Il exécute tout type de requête API Overpass et affiche les résultats sur une carte interactive.

Compétences et technologie nécessaires

  • Ordinateur avec
  • Une Connexion à Internet
  • Recommandation: une souris externe

Niveau de compétence requis Débutant/intermédiaire

Comment utiliser Overpass Turbo

  1. Dans votre navigateur Web, entrez https://overpass-turbo.eu/ pour charger Overpass Turbo
  2. Cliquez sur Assistant dans la barre du haut pour créer une requête de données.

  1. Créez une requête. Par exemple, tapez highway=* (cette requête recherche toutes les autoroutes de la zone qui vous intéresse) dans la zone de recherche, puis cliquez sur ‘Build Query’.

  1. Dans le champ de recherche situé à droite (Map Canvas) tapez la zone qui vous intéresse (telle que Kampala, Uganda) ensuite zoomer dessus.

  1. Sur la barre du haut, cliquez sur Exécuter pour obtenir les données. (Après le chargement des points de données sur la carte)

  1. Cliquez sur Exporter dans la barre supérieure. Sous la section Carte, téléchargez une carte interactive et partagez-la.

uMap

uMap vous permet de créer une carte avec des couches OpenStreetMap et de l’intégrer à votre site. Tous dans quelques minutes. Y Vous pouvez créer des cartes personnalisées (voir les exemples ci-dessous). Il est alimenté par un logiciel libre sous licence WTFPL. Compétences et technologie nécessaires

  • Ordinateur avec
  • Une connexion à internet
  • Recommandation: une souris externe

Niveau de compétence requis Débutant/intermédiaire

Comment utiliser uMap

  1. Dans votre navigateur Web taper http://umap.openstreetmap.fr/en/

  2. Sur la barre du haut, cliquez sur connexion / inscription et choisissez l’application tierce (l’icône OpenStreetMap) à utiliser.

  3. En utilisant le compte OpenStreetMap, accordez l’accès à Umap et vous serez redirigé vers l’interface uMap.

  4. En haut à droite, cliquez sur l’onglet Créer une carte.

  1. Dans la barre supérieure, cliquez sur Edition, Carte sans titre pour fournir le titre de la carte, une description de la carte et configurer les paramètres d’interaction et de symbologie de la carte.

  1. Cliquez sur ENREGISTRER après chaque action pour éviter de perdre des modifications

  2. Cliquez sur l’icône Importer les données dans les outils d’édition (barre de droite) pour ajouter des données à la carte. Naviguez jusqu’à l’endroit où vos données sont stockées et importez-les.

  1. Cliquez sur Gérer l’icône de données dans les outils d’édition (barre de droite), puis cliquez sur le bouton Modifier (crayon) pour modifier les propriétés visuelles des données, telles que la couleur et le style de l’icône.

  1. Cliquez sur Enregistrer dans la barre du haut pour enregistrer les modifications apportées.

  2. Actualisez la page et sur le panneau de gauche, cliquez sur l’icône de partage pour copier le lien qui peut être partagé pour la carte interactive générée ou incorporer la carte dans un site Web personnalisé.

Lier uMap et Overpass Turbo

La liaison entre uMap et Overpass Turbo rend votre mise à jour uMap interactive au fur et à mesure que les données OpenStreetMap sont en cours de mise à jour.

Compétences et technologie nécessaires

  • Ordinateur avec
  • Une connexion à internet
  • Recommandation: une souris externe

Comment relier uMap et Overpass Turbo

  1. Après avoir créé une requête dans overpass-turbo.eu, cliquez sur Exporter, Requête, puis compactés

  1. Copiez le lien de requête sous forme de texte et collez-le dans un éditeur de texte (par exemple, le notepad). Si vous utilisez la fonction “Copier le lien” de votre navigateur, vous devrez peut-être d’abord décoder l’URL en collant ici, puis en cliquant sur Décoder avant de le copier dans un éditeur de texte.

  1. Ensuite, nous devons prendre ce texte et le généraliser pour qu’il fonctionne sur n’importe quelle zone de la carte:

  2. Ajoutez http://overpass-api.de/api/interpreter?data= avant le texte copié.

  3. Remplacez les coordonnées de latitude et de longitude codées par({south},{west},{north},{east}). Cela devra être fait trois fois. après node[x], way[x], et relation[x].

  4. Le résultat final devrait ressembler à ceci http://overpass-api.de/api/interpreter?data=[out:json][timeout:25];(node[“source”=”HOT-UG”]({south},{west},{north},{east});way[“source”=”HOT-UG”]({south},{west},{north},{east});relation[“source”=”HOT-UG”]({south},{west},{north},{east}););out body;>;out skel qt;

  5. Naviguer maintenant vers umap.openstreetmap.fr.

  6. Cliquer sur Créer une carte et effectuez un panoramique / zoom dans la zone qui vous intéresse.

  7. Cliquer sur le bouton Calques, puis sur Modifier (symbole du crayon).

  8. Dans le volet de droite, cliquez sur Données distantes et collez l’URL créée à l’étape 6 dans la zone URL.

  1. Sélectionner “osm” dans la liste déroulante Format.
  2. Cochez la case dynamique.
  3. Facultatif: Si vous avez beaucoup de données, vous pouvez limiter l’affichage à certains niveaux de zoom (afin de ne pas surcharger les serveurs Overpass). Vous pouvez le faire en entrant un niveau de zoom minimal dans la zone À partir du zoom. Ici, j’ai entré 13 comme niveau de zoom minimal.
  4. Personnaliser en utilisant les options sur la droite. Ici, j’ai modifié l’arrière-plan de la carte en OSM monochrome et la couleur des données de superposition.
  5. Cliquez sur Plus sur le côté gauche, puis sur Intégrer et partager cette carte.
  6. Copiez et collez l’iframe incorporable (vous devrez peut-être cliquer sur Vue actuelle plutôt que sur la carte par défaut dans la zone d’options iframe.