Garmin and Google Maps

The bought a Garmin Forerunner recently which is a really cool piece of kit but the maps that come with it are very poor.

Google maps has an API that allows you to integrate these rich maps into your own web applications.

Garmin has the option to export your training history as an XML file.

This XML file contains not just Latitude and Longitude points but also your heart rate, the time, elevation and what you were doing (i.e. cycling or running).

From these you can work out more details such as how steep the hill was , how fast you were running and how hard your heart was pumping.

Google provides a well documented API largely in Javascript.

The current site, just shows a list of bike rides from the GPS XML extract and plots the ride on the map. It animates the ride by overlaying a small section of the ride in red and using setTimeout in a loop to keep it moving.

Some of the key aspects are explained below...

A reference to the google maps API script is included as described in the documentation.

A map is created, on the server the width and height of the map is calculated (by looking at east/west-most and north/south-most points) and the javascript created to ensure that the map is centred and zoomed appropriately. The zoom model is a logarithmic one and I had to do a little relunctant maths to create this function.

public string GetBestFitZoom(int mapWidth, int mapHeight)
    {
        double c = 1.5624;
        
        double height = Math.Round(Convert.ToDouble(Math.Log(c/mapHeight  * Convert.ToDouble(GetHeight()), .5)) + .5);
        double width = Math.Round(Convert.ToDouble(Math.Log(c/mapWidth  * Convert.ToDouble(GetWidth()), .5)) + .5);
        
        return Math.Min(height, width).ToString();
    }

The source javascript shows an array of GLatLng objects. These are google map representations of a point on a map.

The map objects addOverlay method is called to add a GPolyline object (a line) to the line.

The animation is acheived by creating a GPolyline from a few points at a time. The GPolyline is then removed and replaced a bit further along the ride (which is basically an array).

Author Dave Howard

I have been involved in IT development for the last 10 years - a lot of it around desktop applications and telecoms.

Add Comment

Name
Comment
 

Your comment has been received and will be shown once it passes moderation.