Visualizing Track Logs with Google Maps
January 15th, 2006The 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);
