WordPress mapping plugins

Orux Maps altimetric profile vs theoreticalThis site, built with WordPress, uses a couple plug-ins for mapping. They are Leaflet Map and WP-GPX-maps.

Leaflet Map

Leaflet map allows you to display a track on a map background. The plug-in allows for use of OSM maps via MapQuest. To use MapQuest you need to sign up for an API key from their website, and for modest use like this website, the API key should be free. However, I opted not to use Mapquest. This is France and France has the IGN (Institut National de l’Information Géographique et Forestière). This institute publishes folding paper maps at many scales and the 1:25000 scale maps are outstanding for hikers. It seems that every department in the country has a hiking trail plan and these trails are all marked on the IGN maps. One point of warning though. The paper versions are sometimes out of date.

In the past few years, the IGN has also moved to the Web and now provides a tiled web map service which is used in their Géoportail. They provide a variety of map backgrounds (including satellite images, different map styles) and overlays (e.g. river basin accentuation, zoning and survey boundaries, etc) and various Javascript APIs for use by developers. The Géoportail provides an excellent range of tools and is ever improving. Because hikers are so used to the IGN 1:25000 scale maps and their specific look and feel, I decided to use an IGN webmap for this website. The maps are rendered with the plug-in using the Leaflet JavaScript library and use the new IGN “Scan-Express” look and feel. Scan-Express is very similar to the hiking maps but has slightly less detail and seems less cluttered. To use the IGN webmap tiles, I had to obtain an API key on the IGN website.

The only catch for this plug-in is that it uses a KML file and is not (currently) able to use a GPX track log. So you have to convert the Garmin GPX to a KML. Basecamp can generate a KML file from a GPX, but this does not seem like a good option as the Basecamp KML’s contain too many points and too much data. I suppose I could filter the GPX track log before conversion but this seems like too much work. Using a simple online GPX to KML converter worked better for me.

An example


But I also wanted an elevation profile and decided to use a second plug-in : WP-GPX-maps. This plug-in uses a GPX, not a KML, which is a bit irritating. In addition, in February 2017, this plug-in does not work out of the box (1). Why ? It accesses various Google Maps HTML services and the developer has not updated the plug-in to allow an end user to add his own Google Maps API key. Google used to allow URL calls to its mapping services without a key as long as the volume was below certain limits but recently they decided that all service calls must use an API key. So to use this plug-in, I had to get my own Google Maps API key, dig into the PHP code to find the place where the URL service is called, change the URL to hard-code the key in the appropriate URL and presto it works. I know that this hard-coded mod might get blown away if the developer provides an update. It’s a risk I will live with in order to get easy access to an elevation profile.

(1) I corrected this article on Feb 28 2017 because the plug-in developer has provided an update which adds the ability to provide a personal Google Maps API key in the settings panel. No need to modify the code any more. Hats off to the developer.

The WP-GPX-Maps map – rendered as satellite imagery in this example) contains substantial Google functionality including the possibility of switching to Google Street view. There is also has a control in the upper left which allows switching to various other map backgrounds. If you like to use maps to explore a hike, this is a good place to start.

Below is a simple example using a favourite track around the Can de l’Hospitalet in the Cévennes :

An example

Total distance: 17243 m
Max elevation: 1082 m
Min elevation: 682 m
Total climbing: 653 m
Total descent: -543 m
Average speed: 3.55 km/h
Total time: 06:17:00
Download file: can-hospitalet.gpx

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.