Créer une carte avec uMap

Ce scénario donne des exemples d’application et explique comment géoréférencer et cartographier des lieux avec le logiciel uMap. L’application en ligne uMap permet de créer et de diffuser des cartes géographiques personnalisées, interactives et collaboratives. uMap est utile pour les chercheurs et étudiants, car l’application permet de présenter des données sur une carte en ligne et de collaborer à plusieurs personnes sur une même carte, offrant ainsi une plateforme conviviale pour la visualisation et la communication efficace des informations géospatiales. 

---

Exemples d’application

Voici quelques exemples de projets réalisés avec l’aide de uMap :

La guerre civile en Syrie

Carte créée en 2015 pour documenter l’évolution de la guerre en Syrie. Chaque point représente un événement lié à la guerre et les régions contrôlées par les parties sont identifiées par des couleurs différentes.

Map of Sustainable Resources around Montréal

Projet de cartographie collaborative visant à cartographier les ressources durables offertes aux personnes vivant à Montréal, en mettant l’accent sur la sécurité alimentaire et les soins communautaires (Shahamati et al., 2022).

Objectifs du scénario

Dans ce scénario, nous allons créer une carte interactive avec uMap à partir d’adresses d’anciens commerces mentionnés dans un journal. Le but étant de lier des informations géospatiales (noms de lieux) à d’autres données (événements, personnes, URL, vidéo, etc.) et de les mettre en valeur à l’aide d’un outil de visualisation collaboratif et intuitif.

Méthode

Nous allons géolocaliser, à l’aide de coordonnées géographiques, des entités d’intérêt (lieux, personnes, événements, etc.) sous forme de points pour créer notre carte.

Le géolocalisation consiste à attribuer des coordonnées (longitude et latitude) à des entités, lesquelles sont entrées dans un système d’information géographique (SIG). Une fois les entités référencées, il est possible d’y ajouter des informations supplémentaires telles que des descriptions, catégories, icônes, liens web, et vidéos. Nous avons choisi l’application en ligne SIG uMap, car elle permet de diffuser facilement des cartes en ligne et de travailler de façon collaborative. Il existe d’autres logiciels SIG tels que QGIS (gratuit et ouvert) ou ArcGIS Online et ArcGIS Pro (payants mais disponibles à l’UQAM, produits par Esri).

---

Étapes du scénario

■ Préparer

Source des données

Tout type de données géospatiales peuvent être utilisées : nom de ville, de pays, de régions, mais l’utilisation d’adresses complètes est préférable.

Nous allons utiliser des archives de journaux québécois disponibles sur BAnQ afin d’identifier cinq commerces montréalais pour notre carte. Le numéro du Devoir du jeudi 2 février 1950 disponible ici sert comme source de données. Les informations suivantes ont été extraites :

Nom du commerce	Adresse
Pharmacie professionnelle Sarrazin et Choquette	921 est, rue Sainte-Catherine
La Patrie Fleuriste	168 est, rue Ste-Catherine
Thos. Cook & Son limited (organisateur de voyages)	1241, rue Peel
Bijoutier J. Omer Roy	1658 est, Mont-Royal
Café Provincial	1165, St-Hubert

Créer le fichier de données

Pour ajouter plusieurs données sous forme de points à notre carte, nous allons créer un fichier au format CSV (comma separated values). Un ficher CSV est un fichier de base de données construit comme un tableau avec des colonnes et des lignes qui peut être créé avec le logiciel Excel ou encore LibreCalc. Chaque colonne de notre tableau correspond à un attribut qui décrit notre commerce. Par exemple, les colonnes : Nom du commerce, Adresse, Latitude, Longitude, Description.

Géocoder les adresses

Pour trouver les coordonnées géographiques (latitudes et longitudes) associées à nos adresses, nous utilisons l’outil de géocodage Geocoder.ca. Il existe d’autres outils tels que Geoapify, Geonames, GoogleMaps ou encore des librairies telles que GeoPy qui permettent de réaliser cette étape.

1. Entrer l’adresse dans la boîte de recherche en spécifiant la ville (Montréal) et cliquer sur le bouton « GeoCode ».

2. Copier les coordonnées qui apparaissent sous la carte dans le tableur. Le premier chiffre correspond à la latitude, le deuxième à la longitude.

NOTE : Les adresses anciennes peuvent ne pas correspondre aux adresses actuelles. Vous pouvez utiliser des outils pour retracer les changements de noms de rues et les changements de numérotation des immeubles :

• Banque de noms de lieux du Québec
• Carte-index des atlas de Montréal
• Dossiers par rues des Archives de Montréal
• Recherche de toponymes

3. Compléter les informations associées à chaque commerce dans les colonnes appropriées. À ce stade, le fichier ressemble à ceci :

4. Enregistrer le fichier au format CSV.

■ Créer la carte avec uMap

Visiter le site https://umap.openstreetmap.fr/fr/

Créer un compte uMap

Cliquer sur « Créer un compte » et choisir « Openstreetmap » dans la liste des fournisseurs. Suivre les instructions pour activer votre compte.

Noter qu’il est possible de créer une carte sans se créer un compte au préalable, mais il faudra alors vous assurer de ne pas perdre le lien vers votre carte, puisque ce dernier ne sera pas récupérable en cas de perte. 

Créer une nouvelle carte et importer les données

1. Cliquer sur « Créer une carte » (2 options possibles).

2. Renommer votre carte en cliquant sur « Carte sans nom » en haut à gauche. La fenêtre d’édition des propriétés de la carte s’ouvre. Vous pouvez ajouter une description et modifier plusieurs paramètres.

3. Paramètrer les permissions pour permettre le partage et l’édition collaborative de la carte. Cliquer sur « Visibilité » ou l’icône de clé pour accéder aux options.

Les options sont :

• Qui peut modifier : sélectionner ici les options pour permettre à d’autres utilisateurs inscrits de modifier la carte et les données. Les éditeurs doivent absolument avoir un compte uMap.
• Qui peut voir : pour modifier les options de visibilité.
• Propriétaire : pour changer le propriétaire principal de la carte
• Éditeurs de la carte : ajouter ici les noms de compte uMap des Éditeurs

NB : partager l’URL courte (voir les options de partage plus bas) pour inviter un éditeur à collaborer à la carte.

4. Pour importer les données dans le fichier CSV créé précédemment, cliquer sur le bouton « Importer les données ».

5. Importer votre fichier avec les options suivantes puis cliquer sur « Importer ». Il est possible d’importer d’autres formats de données, notamment KML, JSON, GPX.

6. Une fois les données importées, les points représentant les commerces s’affichent sur la carte.

Il est aussi possible d’ajouter manuellement des points, des lignes et des surfaces, voir le menu du côté droit en haut.

7. Pour déterminer le zoom de la carte à l’ouverture, cliquer sur l’icône à droite des deux flèches avec le point.

Éditer les données

Une fois les données importées, il faut configurer la façon dont elles s’affichent sur la carte.

1. Cliquer sur l’icône « Voir les calques » puis sur l’icône « Éditer » (crayon) pour accéder au menu d’édition des paramètres du calque qui contient les données de commerces importées. Il est possible d’ajouter plusieurs calques pour représenter et éditer séparément différents ensembles de données.

2. À partir de cette fenêtre, il est possible de renommer le calque, y ajouter une description et modifier la présentation des marqueurs et des informations associées.

Ajouter du contenu dans les infobulles

Parmi les menus offerts, l’onglet « Options d’interaction » permet d’ajouter l’affichage d’une infobulle (popup) aux marqueurs. On peut entre autres y insérer les informations contenues dans la table des attributs du calque en utilisant le nom des entêtes de colonnes que vous voulez afficher. Cliquer sur l’icône « ? » pour plus de détails sur la syntaxe utilisée.

NB : Il faut toujours sauvegarder les paramètres et sortir du mode d’édition pour voir le résultat.

L’exemple ci-haut permet d’afficher le nom du commerce en titre et les champs Adresse et Description lorsqu’on clique sur l’icône de l’édifice :

Cliquer sur « Éditer » pour retourner en mode d’édition de la carte. Explorer les autres options d’affichage si désiré.

Insérer des images, des vidéos et des liens web

Il est aussi possible d’insérer des images, des vidéos et des liens web dans les infobulles au moyen d’URL.

1. Pour une image, on peut utiliser un lien déjà existant ou créer un lien permanent à l’aide de sites d’hébergement gratuits tels Internet Archive, GooPics ou Postimages.

Dans l’exemple plus bas, nous avons utilisé l’image de la publicité de la « Pharmacie Sarrazin et Choquette » tiré du journal duquel le nom du commerce a été initialement trouvé que nous avons déposée dans GooPics afin d’obtenir une URL.

2. Pour insérer des images dans les infobulles, cliquer sur l’icône  »Éditer dans un tableau » du calque.

3. Puis ajouter une nouvelle colonne en cliquant sur le bouton  »Ajouter une propriété’. Attribuer un nom à la colonne et coller les URL des images que l’on souhaite afficher en prenant soin de les encadrer de doubles accolades comme ceci : {{URL}}

Dans cette fenêtre, vous pouvez aussi modifier le contenu des champs associés aux lieux et ajouter d’autres champs au besoin. Enregistrer puis fermer la fenêtre.

4. Retourner dans l’onglet « Options d’interaction » du menu des propriétés du calque pour appeler la nouvelle variable créée en insérant le titre de la colonne.

5. Quitter le mode d’édition et cliquer sur l’icône du commerce pour voir le résultat. L’image devrait apparaître. Vous pouvez ainsi ajouter des liens web et d’autres types de contenus tels que des vidéos Youtube et des contenus intégrés avec des balises iframe.

■ Diffuser et exporter

Une fois la carte terminée, cliquer sur l’icône « Exporter et partager la carte ». Il y a plusieurs options de diffusion :

• « Intégrer la carte dans une iframe » permet d’insérer la carte interactive dans un site web.
• « Lien » permet de partager la carte avec les options de présentation (options d’export suivantes).
• « Options d’export » permet de paramétrer les options de présentation de la carte. Attention : modifier ces options change les caractères du code iframe et le lien.
• « URL courte » : pour partager la carte avec une URL plus petite, mais ne prend pas en compte les options d’export.
  • NB : partager cette URL pour inviter un éditeur à collaborer à la carte.
• « Télécharger les données » : pour sauvegarder les données de la carte sous forme de fichier. Plusieurs formats : données complètes (en format uMap, pour un copie de sûreté), GeoJson, JPX, KML.

Intégrer une carte à un site web

Pour intégrer une carte à un site web, utiliser le code iframe qui un élément de balisage HTML. Par exemple, voici à quoi ressemble un code

Voici le résultat final d’une carte uMap intégrée à un site web :

Voir en plein écran

---