Visualizing Track Logs with Google Maps
The track logs from my GPS unit look like this:
Format: DDD M/D/Y H:M:S -4.00 hrs Datum[108]: WGS 84 ID Date Time Latitude Longitude Altitude L ACTIVE LOG T 01/13/2006 14:15:56 40.63935 -74.02917 22.2 T 01/13/2006 14:18:57 40.64027 -74.03097 17.9 T 01/13/2006 14:20:36 40.64095 -74.03195 27.1 T 01/13/2006 14:22:53 40.64061 -74.03347 26.6 T 01/13/2006 14:26:08 40.64065 -74.03324 26.1 ...
It occurred to me that someone must have integrated this with Google Maps and I was right. GPSVisualizer can convert these into a Google Map like this one:
// Create a default icon for all markers var defaultIcon = new GIcon(); defaultIcon.image = "http://www.gpsvisualizer.com/misc/icons/pin15-red.png"; defaultIcon.iconSize = new GSize(15,26); defaultIcon.iconAnchor = new GPoint(7,25); defaultIcon.shadow = "http://www.gpsvisualizer.com/misc/icons/shadow_pin15.png"; defaultIcon.shadowSize = new GSize(30,26); defaultIcon.infoWindowAnchor = new GPoint(7,1); defaultIcon.infoShadowAnchor = new GPoint(12,16);
function drawWaypoint(lon,lat,name,desc,url,color) {
var tempIcon = new GIcon(defaultIcon);
if (color) { tempIcon.image = "http://www.gpsvisualizer.com/misc/icons/pin15-"+color+".png"; }
var w = new GMarker( new GPoint(lon,lat), tempIcon );
var text = '';
if (name) {
if (url) { text = text + '
'+desc+''; }
if (text) { GEvent.addListener(w, "click", function(){ w.openInfoWindowHtml('
'); }); } gmap.addOverlay(w);
// tooltips, from http://www.econym.demon.co.uk/googlemaps/tooltips.htm var topElement = w.iconImage; if (w.transparentIcon) { topElement = w.transparentIcon; } if (w.imageMap) { topElement = w.imageMap; } topElement.setAttribute("title",name); }
var gmap = new GMap(document.getElementById("gmap")); // create map gmap.setMapType(G_HYBRID_TYPE); gmap.addControl(new GMapTypeControl()); // add satellite vs. map vs. hybrid switcher gmap.addControl(new GLargeMapControl()); gmap.addControl(new GScaleControl()); gmap.centerAndZoom(new GPoint(-74.033225,40.634515), 2); // 0 is closest view, 11 is WA+OR, 17 is max
// Draw track #1: var trkpts1 = [ new GPoint(-74.02917,40.63935), new GPoint(-74.03097,40.64027), new GPoint(-74.03195,40.64095), new GPoint(-74.03347,40.64061), new GPoint(-74.03324,40.64065), new GPoint(-74.03428,40.64018), new GPoint(-74.03529,40.63977), new GPoint(-74.03609,40.63916), new GPoint(-74.03687,40.63919), new GPoint(-74.03786,40.63946), new GPoint(-74.03859,40.6396), new GPoint(-74.03751,40.63926), ]; var trk1 = new GPolyline(trkpts1,"#C800CC",3,0.8); gmap.addOverlay(trk1);
// Draw track #1: var trkpts1 = [ new GPoint(-74.03577,40.63891), new GPoint(-74.03672,40.63868), new GPoint(-74.03715,40.63786), new GPoint(-74.03758,40.63701), new GPoint(-74.03795,40.63618), new GPoint(-74.03841,40.63536), new GPoint(-74.03886,40.63451), new GPoint(-74.03926,40.63364), new GPoint(-74.03964,40.63283), new GPoint(-74.03994,40.63196), new GPoint(-74.04039,40.63112), new GPoint(-74.04084,40.63029), new GPoint(-74.04033,40.63044), new GPoint(-74.03949,40.63111), new GPoint(-74.03848,40.63114), new GPoint(-74.03725,40.63088), new GPoint(-74.03608,40.63044), new GPoint(-74.03499,40.6301), new GPoint(-74.03399,40.62973), new GPoint(-74.03286,40.62947), new GPoint(-74.03166,40.62925), new GPoint(-74.03034,40.62889), new GPoint(-74.02928,40.62848), new GPoint(-74.02682,40.62808), new GPoint(-74.02612,40.6286), ]; var trk1 = new GPolyline(trkpts1,"#C800CC",3,0.8); gmap.addOverlay(trk1);
// Draw track #1: var trkpts1 = [ new GPoint(-74.02561,40.63004) ]; var trk1 = new GPolyline(trkpts1,"#C800CC",3,0.8); gmap.addOverlay(trk1);
It can also create SVG, PNG, and JPEG maps but the Google Maps are by far the coolest. You’ll need your own Google Maps API key to copy these files onto your own web site like I’ve done here.
The service makes one major mistake—it uses POST where it should use GET—but it’s free, it’s simple and it works. In fact, it’s considerably easier to use than my client side mapping software. By far the hardest part of this post was figuring out how to keep WordPress from mucking with the JavaScript in this page. (Hint: Install the Text Control plugin and set the post to both “No Formatting” and “No Character Encoding”.) Very cool!
January 17th, 2006 at 9:04 AM
You might be interested in this site:
http://www.gmap-pedometer.com/
It goes the other way…drawing a route in Google Maps, and then converting to GPX format to import into a GPS unit.