{"id":96,"date":"2006-01-15T10:57:47","date_gmt":"2006-01-15T15:57:47","guid":{"rendered":"http:\/\/blog.elharo.com\/blog\/?p=96"},"modified":"2008-05-29T10:19:14","modified_gmt":"2008-05-29T15:19:14","slug":"mapping-track-logs-with-google-maps","status":"publish","type":"post","link":"https:\/\/www.elharo.com\/blog\/software-development\/web-development\/2006\/01\/15\/mapping-track-logs-with-google-maps\/","title":{"rendered":"Visualizing Track Logs with Google Maps"},"content":{"rendered":"<p>\nThe track logs from my GPS unit look like this:\n<\/p>\n<pre>Format: DDD  M\/D\/Y H:M:S  -4.00 hrs  Datum[108]: WGS 84\r\nID\tDate Time\tLatitude\tLongitude\tAltitude\r\nL\tACTIVE LOG\r\nT\t01\/13\/2006 14:15:56\t40.63935\t-74.02917\t22.2\r\nT\t01\/13\/2006 14:18:57\t40.64027\t-74.03097\t17.9\r\nT\t01\/13\/2006 14:20:36\t40.64095\t-74.03195\t27.1\r\nT\t01\/13\/2006 14:22:53\t40.64061\t-74.03347\t26.6\r\nT\t01\/13\/2006 14:26:08\t40.64065\t-74.03324\t26.1\r\n...\r\n<\/pre>\n<p>\nIt occurred to me that someone must have integrated this with Google Maps and I was right. <a href=\"http:\/\/www.gpsvisualizer.com\/map\">GPSVisualizer<\/a> can convert these into a Google Map like <a href=\"\/googlemap.html\">this one<\/a>:\n<\/p>\n<p>\t\t\t<script src=\"http:\/\/maps.google.com\/maps?file=api&amp;v=1&amp;key=ABQIAAAANzhjmjn_aQro8IDfoVHCkxT-n61mIiazNPHwWTk3s75Ar5J1YhQDxyPhUR-O4Nfg_1iRn1pAUseY4g\" type=\"text\/javascript\"><\/script><\/p>\n<div align=\"center\">\n<div id=\"gmap\" style=\"width: 600px; height: 600px\"><\/div>\n<div style=\"font: 10px Verdana,sans-serif;\">Map created by <a target=\"_top\" href=\"http:\/\/www.gpsvisualizer.com\/\">GPSVisualizer.com<\/a><\/div>\n<\/p><\/div>\n<p>\t<script type=\"text\/javascript\"><\/p>\n<p>\t\t\t\/\/ Create a default icon for all markers\n\t\t\tvar defaultIcon = new GIcon();\n\t\t\tdefaultIcon.image = \"http:\/\/www.gpsvisualizer.com\/misc\/icons\/pin15-red.png\";\n\t\t\tdefaultIcon.iconSize = new GSize(15,26);\n\t\t\tdefaultIcon.iconAnchor = new GPoint(7,25);\n\t\t\tdefaultIcon.shadow = \"http:\/\/www.gpsvisualizer.com\/misc\/icons\/shadow_pin15.png\";\n\t\t\tdefaultIcon.shadowSize = new GSize(30,26);\n\t\t\tdefaultIcon.infoWindowAnchor = new GPoint(7,1);\n\t\t\tdefaultIcon.infoShadowAnchor = new GPoint(12,16);<\/p>\n<p>\t\t\tfunction drawWaypoint(lon,lat,name,desc,url,color) {\n\t\t\t\tvar tempIcon = new GIcon(defaultIcon);\n\t\t\t\tif (color) { tempIcon.image = \"http:\/\/www.gpsvisualizer.com\/misc\/icons\/pin15-\"+color+\".png\"; }\n\t\t\t\tvar w = new GMarker( new GPoint(lon,lat), tempIcon );\n\t\t\t\tvar text = '';\n\t\t\t\tif (name) {\n\t\t\t\t\tif (url) { text = text + '<nobr><b><a target=\"_blank\" href=\"'+url+'\">'+name+'<\/a><\/b><\/nobr>'; }\n\t\t\t\t\telse { text = text + '<nobr><b>'+name+'<\/b><\/nobr>'; }\n\t\t\t\t}\n\t\t\t\tif (desc) { text = text + '<br \/>'+desc+''; }\n\t\t\t\tif (text) { GEvent.addListener(w, \"click\", function(){ w.openInfoWindowHtml('<\/p>\n<div style=\"text-align: left; width: 190px; line-height: 1;\"><span class=\"wpt\">'+text+'<\/span><\/div>\n<p>'); }); }\n\t\t\t\tgmap.addOverlay(w);<\/p>\n<p>\t\t\t\t\/\/ tooltips, from http:\/\/www.econym.demon.co.uk\/googlemaps\/tooltips.htm\n\t\t\t\tvar topElement = w.iconImage;\n\t\t\t\tif (w.transparentIcon) { topElement = w.transparentIcon; }\n\t\t\t\tif (w.imageMap) { topElement = w.imageMap; }\n\t\t\t\ttopElement.setAttribute(\"title\",name);\n\t\t\t}<\/p>\n<p>\t\t\tvar gmap = new GMap(document.getElementById(\"gmap\")); \/\/ create map\n\t\t\tgmap.setMapType(G_HYBRID_TYPE);\n\t\t\tgmap.addControl(new GMapTypeControl()); \/\/ add satellite vs. map vs. hybrid switcher\n\t\t\tgmap.addControl(new GLargeMapControl());\n\t\t\tgmap.addControl(new GScaleControl());\n\t\t\tgmap.centerAndZoom(new GPoint(-74.033225,40.634515), 2); \/\/ 0 is closest view, 11 is WA+OR, 17 is max<\/p>\n<p>\t\t\t\/\/ Draw track #1:\n\t\t\tvar trkpts1 = [\n\t\t\t\tnew GPoint(-74.02917,40.63935),\n\t\t\t\tnew GPoint(-74.03097,40.64027),\n\t\t\t\tnew GPoint(-74.03195,40.64095),\n\t\t\t\tnew GPoint(-74.03347,40.64061),\n\t\t\t\tnew GPoint(-74.03324,40.64065),\n\t\t\t\tnew GPoint(-74.03428,40.64018),\n\t\t\t\tnew GPoint(-74.03529,40.63977),\n\t\t\t\tnew GPoint(-74.03609,40.63916),\n\t\t\t\tnew GPoint(-74.03687,40.63919),\n\t\t\t\tnew GPoint(-74.03786,40.63946),\n\t\t\t\tnew GPoint(-74.03859,40.6396),\n\t\t\t\tnew GPoint(-74.03751,40.63926),\n\t\t\t];\n\t\t\tvar trk1 = new GPolyline(trkpts1,\"#C800CC\",3,0.8);\n\t\t\tgmap.addOverlay(trk1);<\/p>\n<p>\t\t\t\/\/ Draw track #1:\n\t\t\tvar trkpts1 = [\n\t\t\t\tnew GPoint(-74.03577,40.63891),\n\t\t\t\tnew GPoint(-74.03672,40.63868),\n\t\t\t\tnew GPoint(-74.03715,40.63786),\n\t\t\t\tnew GPoint(-74.03758,40.63701),\n\t\t\t\tnew GPoint(-74.03795,40.63618),\n\t\t\t\tnew GPoint(-74.03841,40.63536),\n\t\t\t\tnew GPoint(-74.03886,40.63451),\n\t\t\t\tnew GPoint(-74.03926,40.63364),\n\t\t\t\tnew GPoint(-74.03964,40.63283),\n\t\t\t\tnew GPoint(-74.03994,40.63196),\n\t\t\t\tnew GPoint(-74.04039,40.63112),\n\t\t\t\tnew GPoint(-74.04084,40.63029),\n\t\t\t\tnew GPoint(-74.04033,40.63044),\n\t\t\t\tnew GPoint(-74.03949,40.63111),\n\t\t\t\tnew GPoint(-74.03848,40.63114),\n\t\t\t\tnew GPoint(-74.03725,40.63088),\n\t\t\t\tnew GPoint(-74.03608,40.63044),\n\t\t\t\tnew GPoint(-74.03499,40.6301),\n\t\t\t\tnew GPoint(-74.03399,40.62973),\n\t\t\t\tnew GPoint(-74.03286,40.62947),\n\t\t\t\tnew GPoint(-74.03166,40.62925),\n\t\t\t\tnew GPoint(-74.03034,40.62889),\n\t\t\t\tnew GPoint(-74.02928,40.62848),\n\t\t\t\tnew GPoint(-74.02682,40.62808),\n\t\t\t\tnew GPoint(-74.02612,40.6286),\n\t\t\t];\n\t\t\tvar trk1 = new GPolyline(trkpts1,\"#C800CC\",3,0.8);\n\t\t\tgmap.addOverlay(trk1);<\/p>\n<p>\t\t\t\/\/ Draw track #1:\n\t\t\tvar trkpts1 = [\n\t\t\t\tnew GPoint(-74.02561,40.63004)\n\t\t\t];\n\t\t\tvar trk1 = new GPolyline(trkpts1,\"#C800CC\",3,0.8);\n\t\t\tgmap.addOverlay(trk1);<\/p>\n<p>\t\t<\/script><br \/>\n<!--more--><\/p>\n<p>\nIt can also create SVG, PNG, and JPEG maps but the Google Maps are by far the coolest. You&#8217;ll need your own <a href=\"http:\/\/www.google.com\/apis\/maps\/signup.html\">Google Maps API<\/a> key to copy these files onto your own web site like I&#8217;ve done here.\n<\/p>\n<p>\nThe service makes one major mistake\u00e2\u20ac\u201dit uses POST where it should use GET\u00e2\u20ac\u201dbut it&#8217;s free, it&#8217;s simple and it works. In fact, it&#8217;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 <a href=\"http:\/\/dev.wp-plugins.org\/wiki\/TextControl\">Text Control plugin<\/a> and set the post to both &#8220;No Formatting&#8221; and &#8220;No Character Encoding&#8221;.) Very cool!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,11],"tags":[410],"class_list":["post-96","post","type-post","status-publish","format-standard","hentry","category-tech","category-web-development","tag-flash"],"_links":{"self":[{"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/posts\/96","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/comments?post=96"}],"version-history":[{"count":0,"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/posts\/96\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/media?parent=96"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/categories?post=96"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/tags?post=96"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}