Show Tracks on Maps

In principle this is an easy task: to show a track that was recorded by a GPS, onto a Google map. But my search for a suitable applet did not result in anything, so again I did write such a little widget. The term "widget" here might be slightly misleading: the components shown here are not self-contained applications, but pieces of code which anyone could implement in their web site.

The principle is to use an IFRAME, for accessing the script and showing it in a clearly defined region of the web page. The Iframe calls the scripts that I have written - they are hosted on our server.

The widget for showing a track is based on the following:

• a GPX file exists which has the track stored. GPX appears to be a standard XML file, which is used by the OpenStreetMap Community. The Garmin software "MapSource" provides an easy way of exporting recorded tracks into GPS files; and since I use a Garmin GPS, this was the most straight-forward method for me to implement. The GPX file can be accessed with HTTP - this needs then to be included in the parameter URL.


• The GPX file has the track points in the tag . Segments within the track are disregarded - they are simply merged into one track.

The Javascript file that is called by the IFRAME, expects simple the filename of the GPX file (usually given as a URL; tracks can be hosted on OpenStreetMap, and the URL of these tracks can directly be used). This filename is given as a parameter in the URL, together with the optional parameter of track color and track heading.

The script then reads the GPX file. In order to do this, a separate PHP file had to be written which adds the 'text/xml' content-type header before the GPX file is actually loaded. The Javascript file then evaluates the XML file and extracts the points. Start time and end time are recorded too, but no further evaluation takes place. The route is then made into a polygon and is drawn onto the Google Map.

Here is an example how this looks:




This is the code for the above map:

<iframe width="100%" frameborder="0" src="http://creativetech.inn.leedsmet.ac.uk/_Track/ShowMapTracks.php?h=400&tr=tracks/080626_RB.gpx,Red,Bicycle%20Ride" height="400px" >
</iframe>


There is no real reason why these two widget (showing places, showing tracks) need to be in two separate files. In fact, they share a common script file and are basically identical, so either of these files will support all the GET parameters handed over in the URL. The two files may in the future be merged, but for now they will remain separate.

The track display allows to click on the track: a text balloon appears then, indicating start and end time as well as total length of the track. This latter function uses Google Maps function for computing the polygon length.

Map "Widget"

When I tried to include a Google Map into one of my recent blog entries, I did not find a suitable method to just add a placemark and show the map in the blog entry. There was the option to show a map as a static image, provided by Google, but I wanted to keep all the user interaction open (zoom, shift, etc.). So I had no other choice than to write again an HTML page with this functionality.

This page allows to show any set of locations, provided through just the URL. The following is an example how it looks:



This is the code for it:

<iframe width="100%" frameborder="0" src="http://creativetech.inn.leedsmet.ac.uk/_Track/ShowMapPlaces.php?h=400&p=34.8239369,33.6019474,Journalist%20Village,http://www.esk.org.cy/en1.htm&p=34.8210700,33.6035568,Hotel%20Pharos,http://www.faros-village-larnaka.eureka-reservation.com" height="400px" >
</iframe>

Anyone can use this for inclusion in their own blog - no warranty is given here, not for functionality, damage, or sustainability. The above URL may disappear any time, but for now it will remain here - if it would be moved, it will be announced here in this blog.

The method is to embed an IFRAME into any web page, with the usual parameters. The URL is http://creativetech.inn.leedsmet.ac.uk/_Track/ShowMapPlaces.php.

Parameters are:

h= height of the map
w= width of the map; if not given, it will automatically adjust to the width of the IFRAME
p= point
This is given by 4 parameters, separated by commas:
latitude, longitude, headline text, headline URL

Feel free to test it out into your own web site.
Not sure how long the URL can be... but any number of points is ok. In case of 1 point, a zoom factor of 17 is assumed. In case of more points, the bounding box is computed automatically, and the zoom is set so that all points are within the visible map.

Have fun!