DNR Road Trip Tracker++

I actually created this a while ago, but it wasn't on a server that I could allow the general public to access. Last night, I signed up for a free ASP hosting service (websamba.com) so that I could finally blog about this.

The DNR Road Trip Tracker that Dr. Neil and his team put together was nice. It allowed a GPS-connected PC inside of the boat to periodically send it's current geolocation to a server, which the Via Virtual Earth team saved to a XML file. When the tracker page was loaded (either from the DNR Road Trip Homepage or from the VVE URL directly), the ASPX would take the coordinates from the XML, and stuff the data into the HTML by means of a [table]. Javascript would then iterate through the rows of the table, and create a pushpin for each geocode (lat/long pair).

This was cool, and let you more or less see where the DNR team was at any point during their drive. But, because each point was plotted individually, it took a very long time to get through all of the points to the end of the trip. Also, it appears that in order to get updated information, that you had to reload the ASPX, which meant waiting for all pushpins to be plotted again.

I wanted to see why the plotting was so slow, and what could be done to improve the rendering. I also wanted to see if I could eliminate the need for the ASPX to include the data (i.e., a HTML/JavaScript-only solution). So, I set off to improve the work that Dr. Neil, et al, had initiated.

Making the page HTML-only was easier than I thought. The ASPX was really only needed to merge the data into the resulting HTML. But, since the XML was also accessible to the web, I immediately thought of AJAX (in concept, at least). But, the data was on another server, so the browsers were having a fit security-wise with trying to access it.

My solution was to use a simple ASP and ServerXmlHTTP to act as a proxy server. That way, when my ASP was executed, it fetched the XML from VVE, and then returned the result on the Response stream.

dim x
set x=server.createobject("MSXML2.serverxmlhttp")

x.open "GET", "http://www.viavirtualearth.com/DotNetRoadtrip/tracks.xml", false
x.send ""

response.contenttype="text/xml"
response.write x.ResponseText

set x=nothing

Instead of using a Msxml2.DOMDocument object on the client (which FireFox did not seem to like, but since I don't like FireFox, the feeling is mutual), I opted to do straight-up javascript string parsing to extract the data points.

Then I started playing with the VE API, and seeing what I could do to improve the render time of the pushpins, as well as look-and-feel things. Well, I discovered that you could render 50 pushpins in not much more perceived time as one pushpin with a minor code change. Also, by inserting some pauses, I gave the map some time to load tile images, so that the pushpins would plot on top of, well, a map instead of on a blank canvas (this was another annoying issue with VE and slow connections or heavy CPU loads while the trip was being plotted). This worked surprisingly well with little code change from Dr. Neil's.

I also added some "nice to have" things, like when the date changes, I create a top-most pushpin with the new date so that you can see where that day's leg starts. Also, I cycle through colors to distinguish one day's leg of the trip from another's.

Here, just take a look. It's all client-side (HTML/JavaScript), so you can examine the code for yourself. Hopefully, this free ASP host won't cause problems (i.e., with that proxy ASP that grabs the data from VVE in order to prevent cross-site security issues).

http://www39.websamba.com/JasonF/trip2.htm

11/13/05: If you get a map, but no dates start showing up, then chances are that the WebSamba server is overloaded (happened once since I started hosting on it). IOW, try again later. :(