Je vais te montrer comment partager une carte, avec un ou plusieurs marqueurs permettant de situer des endroits précis. Pour cela je vais utiliser deux services en ligne libre et gratuit d’OpenStreetMaps : la carte principale et uMap. Le second service est plus complet en ce qui concerne les outils (utilisation de plusieurs marqueurs et choix de leurs formes et couleurs, insertion de polygones, de traits, etc.).

  • Le tuto
  • Description
  • Liens

Je vais donc te montrer deux méthodes pour partager une carte. La premiere se ferra avec la carte principale d'OpenStreetMap et la seconde avec le logiciel uMap.

  • La carte principale
  • Le service uMap

Pour accéder à la carte rend toi sur www.openstreetmap.org. Sur la gauche se trouve le cadre d’infos qui peut être fermé en cliquant sur la petit croix grise (1). À droite se trouve le menu principal (2) avec les outils de la carte :

Tutoriel OpenStreetMap - Réalisé par Sorgin Informatique

Info

La création d’un compte n’est pas obligatoire pour partager une carte.

Pour mon exemple je veux donner un lieu de rendez-vous avec des ami.e.s pour aller faire une ballade sur les crêtes d’Iparla. Ce lieu de rendez-vous sera le parking de Bidarrai à côté d’Auñamendi.

Pour pouvoir situer le plus précisément possible le parking, le mieux c’est de zoomer sur la carte. Pour cela j'utilise les bouton + et - (1) du menu principal. Il est également possible de zoomer avec sa souris en double cliquant sur le lieu choisi. Pour se déplacer dans la carte il faut garder le bouton gauche de la souris enfoncé et de déplacer la carte.

Tutoriel OpenStreetMap - Réalisé par Sorgin Informatique

Maintenant, pour bien indiquer le parking, je vais y mettre un marqueur. Un marqueur est un petit icône en forme de goutte : . Dans le menu principal je clique sur l'icône (1).

Tutoriel OpenStreetMap - Réalisé par Sorgin Informatique

Ça va ouvrir automatiquement le panneau de réglage de cet outil (1) :

Tutoriel OpenStreetMap - Réalisé par Sorgin Informatique

Je coche la case Inclure le marqueur (1). Ce dernier apparaît au centre de la carte. On peut le déplacer n’importe où sur la carte en mettant le curseur dessus, puis tout en gardant le clic gauche enfoncé on déplace la souris ; la carte se recentrera automatiquement. Nous allons donc mettre notre marqueur sur le parking de notre rendez-vous (2) :

Tutoriel OpenStreetMap - Réalisé par Sorgin Informatique

Maintenant il faut envoyer cette carte aux personnes venant à la ballade. Toujours dans les outils de partage, il faut copier le lien personnalisé de cette carte incluant le marqueur. Juste en dessous de la case qu’on vient de cocher pour ajouter le marqueur, on peut voir 3 boutons pour 3 styles de liens (1).

Tutoriel OpenStreetMap - Réalisé par Sorgin Informatique
  • Lien : c’est celui par défaut. Le lien de notre exemple ressemble à ça : https://www.openstreetmap.org/?mlat=43.26509&mlon=-1.35077#map=17/43.26509/-1.35077
  • Lien abrégé : celui de notre exemple ressemble à ça : https://osm.org/go/b~tAyBOWw-?m=
  • HTML : le lien est inclut dans du code HTML. Le code fourni ici (une balise iframe) sert à intégrer la carte dans la page d’un site.

Pour choisir le lien à utiliser, il suffit de cliquer sur l'un des trois boutons. Le code HTML, pour notre exemple, ne nous concerne pas. Nous allons utiliser l’un des deux autres, car je vais l'envoyer par mail. Il suffit de faire un copier-coller de l’un de ces deux codes et de l’insérer dans le message du mail.

Voila ce que verront mes ami.e.s quant ils-elles cliqueront sur le lien : accéder à la carte.

uMap est un logiciel open source sous licence WTFPL. Basée sur les cartes d'OpenStreetMap, il permet de les personnaliser pour les partager par mail ou de les afficher dans un site Internet.

Info

Ce logiciel pouvant être installé sur son propre serveur, il est possible de trouver d'autres services de carte uMap. Comme par exemple dans le collectif C.H.A.T.O.N.S.

C.H.A.T.O.N.S (Collectif des Hébergeurs Alternatifs, Transparents, Ouverts, Neutres et Solidaires) est un regroupement de structures désireuses d’offrir des services libres, décentralisés, éthiques et sans collecte des données personnelles, contrairement aux services des GAFAM (Google, Amazon, Facebook, Apple, Microsoft) & Co. Pour un même service, chaque structure de ce collectif utilise le même logiciel, mais installé sur son propre serveur. Chaque service est donc indépendant des autres. De cette manière si l’un d’eux venait à ne plus marcher, il serait toujours possible d’utiliser les services d’une autre structure membre du collectif (plus d’infos et liste des structures et services sur chatons.org. Voir leur manifeste et leur charte).

Ce tuto est donc valable pour le même service de n'importe quelle structure du collectif.

La différence entre uMap et la carte principale c’est qu’il propose beaucoup plus d’outils. On peut :

  • choisir 25 fonds de carte (ou carte topographique)
  • ajouter des POI : marqueurs, lignes, polygones, etc.
  • choisir la couleur et la form des marqueurs
  • gérer les options de la carte : afficher une minicarte, l’échelle, etc.
  • importer des données géographiques en masse
  • choisir la licence des données
  • exporter et partager la carte
  • sauvegarder le projet dans des formats ouverts ou standards internationaux (geojson, gpx, kml, osm, etc.).

Un avantage avec uMap, c’est qu’il est possible d’exporter des données pour les importer dans un autre projet. Ça peut faciliter grandement la création de certains projets. Comme par exemple si l’on doit faire les contours de départements ou communes. Il suffit d’exporter les données puis de les importer dans son projet.

Pour se rendre mieux compte des possibilités d’uMap, voici des exemples de cartes :

Info

La création d’un compte n’est pas obligatoire pour partager une carte. En avoir un permet de retrouver et de gérer ses cartes. La gestion des comptes ne se fait pas dans le logiciel uMap. Sur umap.openstreetmap.fr il faut créer un compte soit sur OpenStreetMap, Twitter, Github, ou Bitbucket. Pour rester dans l'esprit du mouvement du logiciel libre, je conseille de créer le compte sur OpenStreetMap.

Je vais reprendre l’exemple de la carte principale, mais avec d’autres infos. Je vais proposer des lieux de covoiturage. Pour créer une nouvelle carte je clique sur l’un des deux boutons Créer un carte (1 et 2) :

Tutoriel uMap - Réalisé par Sorgin Informatique

Si on a créé un compte il est possible de donner un nom au projet et éventuellement y mettre une description. Il faut cliquer sur Carte sans nom (1). Ça ouvre, sur la droite, un volet avec toutes les propriétés de la carte. C’est là qu’il faudra donner un nom (2) et ajouter une description (3). Quand c’est fait il faut sauvegarder en cliquant sur le bouton Enregistrer (4).

Tutoriel uMap - Réalisé par Sorgin Informatique

Pour la mise en forme des textes uMap utilise Markdown un language de mise en forme relativement simple. Voici quelques exemple de syntaxes :

  • Italique : un simple astérisque avant et apres le mot ou la phrase - Exemple : *mot*
  • Gras : un double astérisque avant et apres le mot ou la phrase - Exemple : **mot**
  • Gros titre : un dièse et un espace juste avant le mot ou le groupe de mot - Exemple : # titre
  • Titre moins gros que le précédent : deux dièses et un espace juste avant le mot ou le groupe de mot - Exemple : ## titre
  • Titre moins gros que le précédent : trois dièses et un espace juste avant le mot ou le groupe de mot - Exemple : ### titre
  • Lien simple : pour afficher uniquement l'URL - Exemple : [[https://www.sorgin-informatique.com]] sera affiché de cette maniere : https://www.sorgin-informatique.com
  • Lien avec texte : pour afficher un lien avec texte - Exemple : [[https://www.sorgin-informatique.com|Site internet de Sorgin Informatique]] sera affiché de cette maniere : Site internet de Sorgin Informatique
  • Séparateur horizontal : trois tirets (touche 6 du clavier) pour faire une ligne horizontale : --- (en fait c'est trois tirets minimum, car le nombre importe peu)

Important

Prends l’habitude d’enregistrer le plus souvent possible pour éviter de perdre ton travail. Surtout pour des gros projets.

Maintenant je vais ajouter le marqueur pour le lieu de rendez-vous principal. Pour mémoire c’est à Bidarrai sur le parking à côté d’Auñamendi. Je zoom jusqu’à voir le parking. Puis je clique sur la petite icône (1) dans le menu des outils, puis je clique sur le parking. En même temps que le marqueur est ajouté (2), le volet de ses propriétés s’ouvre (3). On peut donner un nom au marqueur ainsi qu’une description.

Tutoriel uMap - Réalisé par Sorgin Informatique

Je fait la même chose pour les deux lieux de rendez-vous pour le covoiturage :

Tutoriel uMap - Réalisé par Sorgin Informatique

Maintenant je vais changer la forme et la couleur des marqueurs. Pour ça je clique sur l'un d'eux et juste au dessus de celui-ci deux icônes, un stylo et une corbeille apparaissent (1). Je clique sur le stylo pour ouvrir le panneau des réglages du marqueur. Je met un nom (2) et une description (3). Je vais modifier l’apparence du marqueur en cliquant sur Propriété de la forme (4).

Tutoriel uMap - Réalisé par Sorgin Informatique
Tutoriel uMap - Réalisé par Sorgin Informatique

Pour la forme du marqueur trois sont disponibles :

  • défaut (1)
  • cercle (2)
  • goutte (3)
  • épingle (4)

Comme forme je vais choisir la goutte et comme c'est le marqueur du lieu principal de rendez-vous je vais le mettre en rouge.

Info

Pour modifier les proprietes et options des marqueurs il faut cliquer sur le bouton définir (1) :

Tutoriel uMap - Réalisé par Sorgin Informatique

Je clique donc sur le bouton définir pour la couleur et un damier de plusieurs couleurs apparait (1). Pour choisir une couleur il suffit simplement de cliquer sur l'une d'elles. Moi je choisis donc le rouge.

Tutoriel uMap - Réalisé par Sorgin Informatique

Pour modifier la forme du marqueur, apres avoir cliquer sur le bouton définir, j'ouvre la liste déroulante et je choisi la forme goutte.

Je fait de même pour les deux autres marqueurs, sauf pour la couleur, je choisis le noir.

Astuce

Pour le choix de la forme j'ai fait marqueur après après marqueur. Mais il y a possibilité de faire le choix en une fois pour tous les marqueurs. Dans mon exemple c'est pas long car il y en s que trois. Mais dans un projet contenant, par exemple 10 ou 50 marqueurs, ça peut être utile et plus simple.

Pour ça je clique sur la roue crantée (1) du menu des outils. Ça ouvre le panneau pour les réglages généraux de la carte. Il faut cliquer sur Propriétés de forme par défaut (2). On y retrouve les mêmes réglages que précédemment.

Tutoriel uMap - Réalisé par Sorgin Informatique

Pour que ça soit plus clair sur la carte, je vais afficher une étiquette à chaque marqueur. En fait c’est le nom du marqueur qui apparaîtra. Comme je veux que cette étiquette soit active pour tous les marqueur je vais utiliser la même manipulation que pour la forme. Je clique sur Options d'interaction par défaut (1). Dans Afficher une étiquette je clique sur définir. Il y a trois choix d'affichages :

  • Toujours : l’étiquette est affichée en permanence.
  • Jamais : l’étiquette n'est jamais affichée
  • Au survol : l’étiquette s'affiche uniquement quant on met le curseur (sans cliquer) sur le marqueur.

Moi je veux qu'elles soit toujours visibles. Je choisis donc Toujours.

Il est possible de choisir la direction de l’étiquette par rapport au marqueur : automatique (c'est le logiciel qui définit la direction), à sa gauche, à sa droite, au-dessous ou au-dessus. Moi je vais mettre toutes les étiquette à gauche de leur marqueur.

Maintenant je vais dé-zoomer de manière à avoir une vue d’ensemble de ma carte et que l'on voit mes trois marqueurs des deux rendez-vous de covoiturage et du rendez-vous principal (1). Pour enregistrer le zoom et le centrage actuel de la carte clique je sur le l'icône (2).

Tutoriel uMap - Réalisé par Sorgin Informatique

Ma carte est prête à être partager par mail avec les personnes venant à la ballade. Je clique sur l'icône (1) se trouvant dans le menu de gauche.

Tutoriel uMap - Réalisé par Sorgin Informatique

il est possible de partager une carte de deux manières : en l'insérant dans la page d'un site en utilisant l'iframe, code HTML permettant d’intégrer la carte dans la page d’un site (1) ou en utilisant l'URL générée automatiquement (1). Moi je veux l'envoyer dans un mail, donc je vais utiliser la seconde méthode. L'URL de ma carte ressemble à ça : http://u.osmfr.org/m/201314/

Pour voir ce que ça donne clique sur le lien suivant : accéder à la carte.

Tutoriel uMap - Réalisé par Sorgin Informatique

OpenStreetMap (OSM) est une association qui propose une carte du monde à la manière de Google Maps, mais sous licence Open Database License (OdbL). Tout comme Wikipédia, l’encyclopédie libre, c’est une carte collaborative, c’est à dire que tout le monde peut participer, suivant ses compétences, à l’amélioration de la carte.

C'est en juillet 2004, à Londres, que le projet est lancé par Steve Coast. " Le premier prototype du projet est une cartographie tracée à partir d'une trace GPS, collectée lors d'un trajet à vélo. Le constat de Steve Coast a été que l'agence cartographique publique de son pays, l'Ordnance Survey, conserve le droit de reproduction à son profit, alors qu'elle est financée par ses principaux utilisateurs, les contribuables britanniques. " (source : Wikipédia).

En novembre 2011 l'association OpenStreetMap France est créée pour promouvoir et soutenir le projet en France.

Les données d'OpenstreetMap utilisant une licence permettant de les utiliser librement, commercialement ou non, on peut en trouver sur différents sites et certaines applications de cartographie et de navigation sur Android et iOS.