Trail : créez et par­ta­gez votre par­cours en 5 minutes avec OpenS­treet­Map

Se livrer à son sport favo­ri avec des outils libres, ce n’est pas tou­jours évident. L’un des obs­tacles à fran­chir est de tra­vailler avec des fonds de cartes libres et pou­voir en faire à peu près ce qu’on en veut. Ce petit tuto­riel rapide à pro­pos de Umap va sûre­ment vous être utile !

Vous venez de faire votre par­cours (ou vous en pro­je­tez un) et vous brû­lez d’envie de par­ta­ger le tra­cé avec vos amis ?

Il existe pour cela plu­sieurs solu­tions :

  1. Vous dis­po­sez d’un appa­reil qui se charge pour vous de télé­ver­ser votre tra­cé et une flo­pée de don­nées per­son­nelles sur un site de par­tage. Là, tant pis pour vous et la confi­den­tia­li­té de vos don­nées, c’est un choix.
  2. Vous pre­nez une carte, vous scan­nez et des­si­nez ensuite le par­cours par des­sus… un peu labo­rieux, non ?
  3. Vous téle­ver­sez votre tra­cé sur un site qui offre des fonds de carte et un édi­teur prêts à l’emploi. Géné­ra­le­ment un fond de carte IGN (issu de Géo­por­tail) est acces­sible. C’est là aus­si un choix, mais votre carte ne sera tou­jours pas libre.
  4. Vous tra­vaillez avec Umap.

C’est quoi Umap ? Il s’agit d’une appli­ca­tion en ligne uti­li­sant plu­sieurs fonds de cartes issus du pro­jet OpenS­treet­Map. Comme il s’agit de car­to­gra­phie libre vous pou­vez alors en dis­po­ser à votre guise pour affi­cher vos par­cours sur votre site ou par­tout ailleurs sans contre­ve­nir à des ques­tions de copy­right. Vous pou­vez même choi­sir la licence sous laquelle votre tra­cé pour­ra être par­ta­gé.

Étape par étape, voi­ci com­ment faire pour obte­nir le tra­cé ci-des­sous, c’est à dire per­mettre à d’autres de visua­li­ser une zone de carte sur laquelle on a tra­cé quelque chose.

Voir en plein écran

Étape 1

  1. Ren­dez-vous à l’adresse umap.openstreetmap.fr et ouvrez un compte (soit sur OpenS­treet­Map, ou en vous connec­tant avec vos comptes Github ou même Twit­ter si vous en avez).
  2. Cli­quez sur « créez une carte ».
Accueil Umap
Accueil Umap

L’interface est rela­ti­ve­ment simple mais son aspect dépouillé (au pro­fit de la car­to­gra­phie) peut paraître dérou­tant.

Umap
Umap

En gros, à gauche vous dis­po­sez des outils vous per­met­tant d’interagir avec le site et l’interface. À droite, vous dis­po­sez des outils d’édition. Ce sont ces der­niers que nous allons voir de près.

Boutons Umap
Bou­tons Umap

L’idée géné­rale est de par­ta­ger un ou plu­sieurs calques sur un fond de carte. En termes clairs : je des­sine quelque chose sur un calque et je par­tage ce calque pour l’afficher avec le fond de carte de mon choix.

Les trois pre­miers bou­tons sont très faciles a) insé­rer un mar­queur, b) tra­cer une ligne ou une c) forme.

Pour chaque élé­ments que je des­sine, qu’il s’agisse de ligne, de forme ou de par­cours, je pour­rai lui assi­gner des pro­prié­tés : un nom, un des­crip­tif, des cou­leurs et d’autres pro­prié­tés (épais­seur de trait, inter­ac­ti­vi­té, etc.)

Ensuite, dans l’ordre d’apparition des bou­tons : d) impor­ter des don­nées, e) modi­fier les pro­prié­tés de la carte, f) chan­ger le fond de carte, g) cen­trer la carte sur la zone que l’on est en train de tra­vailler, h) gérer les per­mis­sions (pos­si­bi­li­té de rendre l’accès pri­vé).

Étape 2

  1. Impor­tez vos don­nées (outil d) soit depuis votre machine (bou­ton « par­cou­rir ») soit depuis une url. Choi­sis­sez le for­mat uti­li­sé (par exemple GPX) et cli­quez sur Impor­ter.
  2. Sitôt impor­té, le tra­cé se des­sine sur la carte qui se centre auto­ma­ti­que­ment sur la zone concer­née.
  3. En double-cli­quant sur le tra­cé du par­cours, chaque point pour­ra être édi­té.
Umap Interface
Umap Inter­face

Étape 3

  1. Allez ensuite dans les para­mètres (bou­ton e).
  2. Don­nez un nom à votre carte et un des­crip­tif.
Umap Interface
Umap Inter­face

Étape 4

  1. Ajou­tez un ou plu­sieurs mar­queurs pour défi­nir des points remar­quables de votre par­cours : le départ, l’arrivée, un point de vue, etc.
  2. À chaque mar­queur vous pour­rez défi­nir son nom (s’affichera au sur­vol de la sou­ris), un des­crip­tif. Dans les pro­prié­tés avan­cées, vous pou­vez défi­nir sa cou­leur, sa forme. Dans les coor­don­nées, vous pou­vez affi­ner si besoin en modi­fiant la lati­tude et la lon­gi­tude.
Umap Interface
Umap Inter­face

Étape 5

Reve­nez aux para­mètres de la carte (bou­ton e), puis :

  1. dans les Options d’Interface, cochez les bou­tons dont vous lais­se­rez l’usage à vos lec­teurs. Les para­mètres par défaut peuvent suf­fire dans un pre­mier temps.
  2. Les pro­prié­tés par défaut vous per­mettent de valo­ri­ser les élé­ments de votre carte en par­ti­cu­lier le tra­cé. Choi­sis­sez par exemple une cou­leur bien tran­chée (un rose fushia!)
  3. Dans notre exemple, nous avons choi­si une opa­ci­té de 0.5 points et une épais­seur de 8 points.
  4. Bien d’autres options sont dis­po­nibles, vous pour­rez y reve­nir plus tard.

Étape 6

  1. Cli­quez sur enre­gis­trer le zoom et le centre actuel (bou­ton g). Cela per­met­tra à vos lec­teurs d’accéder direc­te­ment à la zone sur laquelle vous tra­vaillez.
  2. Dans la par­tie cré­dit : ren­sei­gnez les cré­dits que don­nez à votre carte. Ici, nous pla­çons la carte sous licence libre CC-By-SA.
Umap Interface
Umap Inter­face

Étape 7

  1. Cli­quez sur le bou­ton f pour affi­cher les dif­fé­rents fonds de carte dis­po­nibles.
  2. Si vous cour­rez en ville, le fond de carte par défaut (OSM-Fr) devrait être suf­fi­sant. Si par contre vous cour­rez en nature (mon­tagne, cam­pagne, etc), et pour obte­nir un affi­chage plus proche de ce que vous connais­sez habi­tuel­le­ment, choi­sis­sez le fond Open Topo Map
  3. Cli­quez sur Enre­gis­trer, en haut à droite.
Umap Interface
Umap Inter­face

Étape 8

  1. Allez sur les outils de gauche et cli­quez sur le bou­ton expor­ter et par­ta­ger la carte.
  2. Vous avez alors votre dis­po­si­tion le code l’iframe que vous pour­rez col­ler sur votre site web ou ailleurs. Les options d’export vous per­mettent de régler la hau­teur, la lar­geur et autres options que vous lais­sez à l’usage de vos lec­teurs (à savoir : le lien « plein écran » per­met­tra au lec­teur d’afficher la carte ne grand sur le site Umap).
  3. L’autre solu­tion étant tout sim­ple­ment de copier l’url de votre carte (dans la barre de votre navi­ga­teur) et de l’envoyer à vos cor­res­pon­dants.
Umap Interface
Umap Inter­face

Christophe

Fram(hack)tiviste, je fais du vélo et je mange des châtaignes.