Displaying GPS tracks in Navionics webapi with WordPress

I’ve had a couple of people ask me how I get my GPS track to show on maps. Well here you go!

First you need to register for an API key from Navionics by filling in their form. It’s free. See Navionics

I use a Garmin eTrex 20 to record my tracks when out and about. I did have an eTrex 10 which I really do not recommend, the eTrex 20 is far far superior. So, as I use a garmin product to record my GPS tracks, I also use Garmin Basecamp  (it’s free) for managing my GPS tracks. Having imported my tracks from the GPS to Garmin Basecamp, I then select the track I want and save as a .KML file.

Now as Garmin Basecamp outputs not only the track, but also every waypoint for each and every change of direction, it is not only a big file, but also full of data I don’t want. So I edit the .kml file in another free program called Komodo Edit. After all it’s just an xml file…

I delete from line 16 <folder>, to it’s corresponding tag </folder> on line 16497! Down the file a few pages! Komodo Edit helpfully lets you find the matching tag (although sometimes this doesn’t work if the file too big – but I’ve done this enough times now I know what tag “</folder>” to look for before the track data)

Komodo Edit also checks your resulting file is ok, or if you have made an error.  

Having deleted all the data I don’t want and if everything is ok, I save the resulting file. In this instance it is called 20190908.kml. I generally only do one trip a day, so using the reverse date format, for sorting purposes, is fine. I then load this file to a directory (called Navionics) on my server using FTP. I use another excellent freebie program called FileZilla.     

Now I had better say something about what software I use to maintain my website. I use WordPress. A few years ago I did use Joomla, but I was forever getting hacked and consequently decided to try . I am now a fan and (touch wood) haven’t been hacked since. If you don’t use , then I would recommend it. There is a huge repository of themes, plugins that you can use to customise your site to your own requirements. One such plugin is offered by Navionics. It’s a bit basic – before the app I use to code each Navionics Map in HTML/javascript, within … really messy.

Having installed the Navionics plugin into my WordPress site. I can then create (or Edit) Navionic Components or (maps with my data in). Note: the blacked out line is where you put your key. The only other thing to change is the file name of your KML file and possibly your directory/folder structure. Of course you can always change some of the other parameters for your own purposes (height, width, border, zoom, layer, navy etc). The Navionics site has examples and documentation to refer to help you.

Wordpress Navionics
WordPress Navionics

This Navionics component is then saved in WordPress. At this point I usually copy the Navionics shortcode. I can then paste the shortcode into any WordPress post, exactly where I want the Navionics map to appear.

For instance if I create a new post and paste the shortcode like this…

CreatePost

When I  preview the post I get the map with my track displayed!

PostPreview

Here I have posted the shortcode in this post…  

.

One issue I have found is that you can only post one Navionics map in one post or page. It doesn’t work if you try to post two maps!

I hope the above makes sense. Please let me know if you have any questions.

Happy Days!

Scroll to top