2005-12-16

I spy with my little eye

Recent visitors of my blog index page might have noticed some new eye candy of mine: a visitor log pacing back and forth between the locations of the most recent hundred visitors, one at a time, every thirty seconds. This is the kind of thing you can do with GVisit JSON feeds and some cleverly applied Google Maps API programming. No server side support you need to install anywhere, only bits of client side javascript, composing maps from geomapped referrer logs care of GVisit. Beautiful, isn't it?

Just the kind of mildly astonishing thing I felt my blog should have instead of some blog banner graphic, when I decided on not wanting to devote my poor man's Photoshop skills on making something at least somewhat tacky as graphics goes. After all, this blog is about insane javascript hackery, so insane javascript hackery it is. :-)

You may keep reading this blog by RSS feed and not be bothered much by the additional load time, too; in fact, I warmly recommend reading most blogs that way. The occasional tool or featured article page where I go into more advanced live page layouts, with form widgets or javascript enabled other usability tricks will of course still be worth visiting for, but I think I will leave the post permalink pages alone, so don't be alarmed.

I started out with making a full-screen visitor tracker with about the same layout, which adapts itself a bit to the dimensions of your browser window, leaving out some elements as screen real estate grows less abundant. Most of that code was initially written by Chris Thiessen, and I happened upon it quite by chance, scouring the Google Maps API newsgroup for any interesting discussion on GVisit. I have not now been able to reach Chris by mail, but hope and he does not mind my extending his nice triple pane Google Maps code. Quite the contrary, in fact; it is being released under a Creative Commons license. I'll get back with more details in a later post.

Most of my extensions to it, apart from the integration with GVisit, is adding lots of keyboard bindings for things I usually miss with applications built on top of Google Maps. They actually only work in Mozilla, as far as I know, for reasons I have not digged into yet, but there, they are active when the mouse hovers either of the map views. An exhaustive list:

  • Arrow keys scroll the viewport
  • Page Up/Down, Home and End scroll ¾ of a windowful

  • Map mode
  • Satellite mode
  • Hybrid mode
  • Toggle mode, cycling through all three

  • + zooms in
  • - zooms out
  • 1-9, 0, shift+1-7 instantly zooms to level 1..17
  • Zoom back to this map view's default setting

  • Center the map on the last visitor, or for the smaller map views, the next map's present coordinates
  • (Shift+C snaps there instantly, whereas plain C does smooth scrolling, in cases where the distance covered is small)

  • Next visitor
  • Previous visitor
  • Shift+N zooms to the most recent visitor
  • Shift+P zooms to the first still remembered visitor

The scroll wheel can also be used to zoom in and out, and naturally you can drag the map and click on the various buttons or icons in the map views as well, double click to focus some specific spot, and so on, as with most Google Maps.

The visit times listed are shown in your own time zone down to second precision, and a more rough estimate in the visitor's time zone. I don't really have any source that maps a location to an exact time zone, much less handling daylight savings time rules there (which is a huge mess, throughout the world; DST being an endless source of trouble, larger than Y2K problems but publicly accepted due to bad heritage). What I do have, though, is an approximate longitude reading, and given that and your own time zone offset (which your browser knows about, if your computer time settings are correct), I calculate what approximate time it in the visitor's neighbourhood, and show this somewhat more vaguely. Here is the time zone compensation code, that takes a Date object and a longitude (±0..180 degrees) and returns a Date object with that time zone's local time:
function offset_time_to_longitude( time, longitude )
{
var my_UTC_offset = (new Date).getTimezoneOffset() * 6e4;
var UTC_offset = longitude/180 * 12*60*60e3 + my_UTC_offset;
return new Date( time.getTime() + UTC_offset );
}

I am planning a tutorial on how to make your own visitor log using this code and a registered GVisit account; with this ground work done it isn't much more than doing some finishing-up touches, perhaps adding a few features I did not think of putting into the JSON feed in the first place and writing up the article for you. But don't hold your breath -- Christmas is coming up, and chances are I may be gone for large parts of it.
blog comments powered by Disqus