Code Frenzy

“Real-Time” tracking of GPS locations on a web site is actually quite hard to achieve. In order to see a dot moving around on an online map, the page would need to be constantly refreshing itself. The refresh would initiate a request back to the server where server-side code would grab the new coordinates of the GPS unit out of a database, redraw the map with a dot on it, and send the whole image back to the user’s browser. Whether the refreshing is caused by the page itself or a hidden iframe on the page somewhere, a full roundtrip to the server every few seconds would soon become super annoying, even if it did mean the user got to see a neat dot ‘seemingly’ moving around on a map.

So how do we get around this? Ideally, we would just want to redraw the ‘dot’, not the whole map and definitely not the whole page. Can this be done? Yes! How? Using AJAX.

No, AJAX isn’t a cleaning product. And believe it or not it isn’t even a new technology. AJAX stands for “Asynchronous JavaScript and XML” and is described by WikiPedia as:

A term describing a web development technique for creating interactive web applications using a combination of:

*HTML (or XHTML) and CSS for presenting information *The Document Object Model manipulated through JavaScript to dynamically display and interact with the information presented *The XMLHttpRequest object to exchange data asynchronously with the web server. (XML is commonly used, although any text format will work, including preformatted HTML, plain text, and JSON)

AJAX essentially allows calls to be made to the server without the user ‘noticing’. The call itself does not cause the page to refresh at all. The developer can make the page do whatever they wish with the response from the server. Most often developers will manipulate the page’s appearance using JavaScript, the DOM and CSS.

So how can AJAX be applied to online mapping? Well, using AJAX we can make ‘asynchronous’ calls to some server-side logic that can grab the newest position of the GPS unit out of a database. The coordinates can then be passed back to our page in an XML string. Client-side JavaScript in our page will interpret the XML and create a ‘img’ element that looks like a dot, using CSS to place it at the correct pixel location on the map.

Since I don’t have a real GPS unit to test this with, I have populated a database table with some fake GPS coordinates. To date I’ve tried this using MapInfo’s MapXtreme 2004 (ASP.NET in C#, plenty of JavaScript, CSS and a horrible little Access DB) which worked a treat. I’ve also tried it using a Google Map which you can see below. (If the dot has stopped moving, refresh the page using Ctrl+F5 – I only have about 10 points in my fake GPS unit db table.)

If anyone wants to see my code, please see this article.

Posted Coding, Technology |