Tutoriel : publier une trace GPS enregistrée avec un téléphone sur un blog sous WordPress

Nous enregistrons la plupart de nos journées de déplacements à vélo avec notre téléphone, sous la forme d’un fichier .gpx. Ces fichiers alimentent pour certains la page Où sommes nous. Comme nous avons un peu galéré pour arriver à mettre ces traces en ligne, je vous propose un tutoriel sur la méthode employée.

Tout d’abord, si vous ne connaissez pas le projet Open Street Map, vous pouvez visiter leur site ou lire la page Wikipedia correspondante.

Enregistrer les traces gpx depuis un téléphone sous Android

Il vous faut : un appareil sous Android, équipé d’un GPS (a priori tous)

  • Installer OsmAnd par le biais de votre choix et lancer l’application
  • Afficher la carte et activer la localisation dans les paramètres systèmes si nécessaire
  • Quand la localisation est effectuée, utilisez l’icône en haut à gauche représentant une antenne, et tapez sur Enregistrer GPX. Vous aurez alors à choisir la fréquence d’enregistrement des points
  • Vous pouvez suspendre l’enregistrement et le reprendre de la même façon autant de fois que vous voulez, cela fera des chemins successifs
  • Lorsque vous avez terminé votre parcours, arrêtez l’enregistrement et toujours dans le menu, tapez sur Sauvegarder la trace GPX actuelle
  • La trace enregistrée se trouve dans votre dossier /osmand/tracks/<date>.gpx
  • Transférez la sur un ordinateur, par exemple en branchant le téléphone en usb et en le copiant avec votre explorateur de fichiers

Note: l’application OsmAnd propose une version gratuite, qui a quelques limitations, notamment en quantité de donnée téléchargeables pour usage hors-ligne,  et une version payante, qui n’a pas cette limitation. Pour 7 euros, ce n’est pas un investissement vain pour peu que vous fassiez de la randonnée ou du vélo. Il existe aussi un plugin qui permet de récupérer automatiquement les courbes de niveau, ce qui est appréciable dans mon cas.

Nettoyer la trace GPX avec josm

josm est une application utilisée notamment par les contributeurs du projet Open Street Map pour éditer les données cartographiques et les publier.

  • Téléchargez et lancez josm sur votre ordinateur. Il vous faut pour cela disposer d’une machine virtuelle java, ce qui est a priori le cas, sinon reportez vous à la documentation de votre système d’exploitation.
  • Si nous importons une trace gpx seule, nous la verrons seule, sans contexte pour vérifier où elle passe… pour y remédier,  insérez un calque de fond  en faisant Imagerie > OpenStreetMap (Mapnik), ou une autre source de tuiles de votre choix. Attention, chez moi la position par défaut était au milieu de l’océan… j’ai cru un moment que l’ajout de calque n’avait pas marché, alors qu’il me suffisait de dé-zoomer pour me repérer.
  • Importez votre fichier GPX via Fichier > Ouvrir un fichier. Votre fichier gpx apparaît dans la liste des calques et sur la carte.
  • Faites un clic droit sur le calque correspondant dans la liste des calques et sélectionnez Convertir en calque de données. Une confirmation vous est demandée, vous pouvez valider malgré l’avertissement: nous ne réalisons pas cette conversion dans l’objectif d’une contribution à OSM.
  • Vous pouvez alors nettoyer votre calque:
    • Sélectionner et déplacer/supprimer des points de manière triviale à l’aide des outils présents à gauche de l’écran
    • Vous pouvez simplifier le chemin rapidement après l’avoir sélectionné via Maj + Y (ou regarder dans le menu Outils)
    • Je vous laisse explorer les différentes possibilités de josm en la matière… notamment pour joindre des chemins si votre enregistrement s’est fait en plusieurs parties
  • Quand votre calque est propre, enregistrez le résultat en fichier GPX via Fichier > Enregistrer, en nommant bien votre fichier en .gpx. Vous pouvez alors indiquer des meta-informations avant de valider.
  • … vous pouvez ensuite aller lire la documentation de JOSM tant vous avez trouvé l’outil intéressant.

Insérer la trace dans une page sous WordPress

Dans l’interface d’administration de votre site sous WordPress:

  • Installez le plugin OSM et activez le
  • Dans un article ou une page en cours d’édition, envoyez votre fichier gpx en utilisant le bouton Ajouter un média . Vous pouvez aussi le déposer dans un emplacement accessible depuis internet, par exemple avec un outil de transfert FTP.
  • Notez l’adresse de votre fichier: dans l’interface d’ajout de média, vous pouvez la trouver en sélectionnant le fichier et en regardant sous « Réglages de l’affichage du fichier attaché« . Elle sera du type votreblog.fr/wp-content/uploads/année/mois/monfichier.gpx
  • Dans votre page en cours d’édition, passez en mode Texte (en haut à droite de la zone d’édition)
  • Insérez alors votre shortcode sur la zone voulue:
    • Trouvez la section WP OSM Plugin shortcode generator dans votre page d’édition
    • Zoomez sur la zone géographique vous intéressant, le code à insérer se met à jour en dessous de la carte. Il est de la forme: [osm_map lat="XX" long="XX" zoom="XX" width="600" height="450" type="Mapnik"]… Copiez le
    • Et collez-le à l’emplacement ou vous souhaitez voir la carte s’afficher.
  • Il ne nous reste alors qu’à insérer notre fichier gpx dans la carte. Entre les crochets de votre shortcode, insérez un champ gpx_file, sous la forme gpx_file="mon_fichier.gpx"
  • Vous pouvez aussi, entre autres, indiquer la couleur de tracé voulue, en utilisant la syntaxe gpx_color="couleur"
  • Vous obtenez alors un code du type: [osm_map lat="43.205" long="5.508" zoom="14" width="600" height="450" type="Mapnik" gpx_file="http://crepuscules.info/wp-content/uploads/2014/02/2014-02-09_14-12_dim_Cassis-nettoye.gpx" gpx_color="black"]

Vous obtenez alors le résultat suivant: