Tutorial : how to publish a GPS track recorded with a smartphone on a WordPress blog

French note : cet article est la traduction en anglais de l’article Tutoriel : publier une trace GPS enregistrée avec un téléphone sur un blog sous WordPress.

English note : Because the Tutoriel : publier une trace GPS enregistrée avec un téléphone sur un blog sous WordPress article got a clear success according to the statistics, I made an english version for non-french speaking people. Feel free to contact me for a comment or correction.

We usually record our bicycle path with our phone, as a .gpx file. We assemble those files on the « Where are we ? » page. Because it took us some time to find how to do this, here is a short tutorial.

First, if you don’t know about Open Street Map project, you can visit their website or read the wikipedia page.

Recording gpx tracks with an Android smartphone

You’ll need : a androphone with GPS function (they all got it I think)

  • Install OsmAnd using your favorite way and launch it
  • Get to the map display and check that localisation is activated in you device’s settings
  • When the application got your position, use the GPX icon on the right and select Start recording. Then you’ll have to choose your recording frequency before you can start the recording.
  • You can suspend and start again with the gpx button, you’ll just get independent paths for each record
  • When you are done, stop the recording and save the track using the same menu
  • The recorded track will be in the /osmand/tracks/<date>.gpx of your phone’s disk, transfer it on your computer

Note: The Osmand app is free but with some restrictions, like the number of maps you can download for offline use. There is a paying version for 7 euros, that don’t have such restriction, and I think it is well used money if you are a regular traveller, by foot or bicycle. There is also a plugin which will get SRTM data (contour lines) for you. Really convenient when travelling with 20kg on the bike.

Clean the GPX track with josm

josm is an application mainly used by the Open Street Map contributors to edit and publish maps and associated data.

  • Download and launch josm. You will need a Java virtual machine, which should have come with your operating system. If not, check your OS documentation or Oracle’s website.
  • If we just open the gpx track, we will see it alone in the central space of the application. To see « where we are », insert a background layer with Imagery > OpenStreetMap (Mapnik). Be carefull: you can be in the middle of an ocean and think that it did not worked… just zoom out to check.
  • Import your gpx file with File > Open. Your track will appear on the layers list and on the map.
  • Right-click on the track’s layer and select Convert to data layer.
  • You can then clean your layer:
    • Select, move and remove points with the basic tools available on the left of the screen
    • You can simplify the path easily after selecting it, by using Shift + Y
    • You can explore the different tools provided by josm to tune your path…
  • When your layer is ready, save the result in GPX format
  • … you can then read the JOSM documentation because you found that tool fantastic.

Insert the track in a WordPress site

In the administration interface of your website:

  • Install the OSM plugin and activate it
  • Go to the edit page of the article or page in which you want to insert your map.
  • With the Insert media panel, upload your gpx file. You can also upload it somewhere else on the internet. Note the URL of your file.
  • Back in your edit page, switch to Text mode (up right of the editing zone)
  • Insert your shortcode where you want to see your map :
    • Find the WP OSM Plugin shortcode generator section in the edit page (under of the text area)
    • Zoom on the area you want to show, the WP OSM Plugin shortcode generator will be updated bellow the map. It looks like : [osm_map lat="XX" long="XX" zoom="XX" width="600" height="450" type="Mapnik"]… Copy it.
    • Past it in the text editing area, at the document section where you want your map to appear.
  • You just have then to insert your gpx file’s URL in the shortcode brackets with the gpx_file variable : gpx_file="my_file.gpx"
  • You can also specify some parameters, like the path’s colour : gpx_color="color"
  • You will get to something like : [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"]

Which give you this result :