Well, lets start with the basics. My name is Annie Luxton and I’m a developer. Programmer. Scripter. Geek? Whatever.
Anyway… This site / blog was meant to be a place for me to put down some of my ideas and try to actually go through with some of them. I really enjoy discovering new ways of coding cool new things and the web seems to be full of just that.
I currently work as a developer for a GIS company called Critchlow Associates based in Wellington, New Zealand. Although I don’t think I’d ever even heard of GIS before working for Critchlows, I’m actually quite fond of maps now (as you can probably tell by the flavour and probably most of the content of this site). Online mapping seems to have really taken off in the past couple of years and I’m finding it harder and harder to keep up with all the neat stuff people are doing out there. Oh well, who needs sleep anyway?
Please feel free to comment on anything in this site. I’m still in the process of getting it up and running so don’t expect too much just yet.
Right. Enough on me for now. So until another time…
“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.
Today, while waiting for my incredibly slow script to finish running, I came across a very interesting Firefox extension: Greasemonkey.
Greasemonkey is a Firefox extension which lets you to add bits of DHTML (“user scripts”) to any web page to change its behavior.
One really interesting use of these Greasemonkey scripts is Stephen Fernandez’s Geotagging Flickr with Google Maps and Greasemonkey . His two greasemonkey scripts allow users to geotag flickr images quickly and efficiently by injecting new links into both the flickr and multimap interfaces. On the flickr side, the user clicks the ‘Add Geotags’ button and is then automatically redirected to multimap.com. Once the user is at multimap.com they can geocode their location. When multimap has found the location it will present the user with a link that says ‘Add GeoTags to your flickr image’. A couple more clicks and the user is back at their flickr image and with a bit of luck, the geotags should have been inserted successfully.
I’m thinking this type of script could be very useful for my TravelBlog application. Getting the lat long coordinates of the user’s location was always going to be a problem as I have yet to find a free world-wide geocoding web service to user. Instead I was assuming users would have to actually browse to a site such as multimap.com or maporama.com, geocode their location and then manually copy and paste the lat long coords into the blog entry. Not so nice.
So the next step is to get the TravelBlog up to speed so it is actually more like a weblog than it currently is. Then onto the Greasemonkey scripts!
