Clustrmaps: an inkblotch a visitor

When I started this blog, I wanted to reach more people around the world than I had before -- that is why there is some crude support for automated machine translation of the contents in the sidebar panel on the right too -- and as an equally crude way of measuring my reach, I added the visitor map you might also have noticed a bit further down in the sidebar. It adds a red dot for every visitor on the featured map of the earth. (And before my verbal excesses taint your impression from the headline too much, I use the word "blotch" in an affectionate, rather than derogative manner. They're just kind of large for being mere dots. ;-)

Or, well, sort of, anyway; I think they are called "clustrs" and are, intentionally or not, rather big blotches than dots. The service is provided for free for smaller blogs like my own by ClustrMaps, and, the site claiming it is still in beta I thought I'd take this opportunity to both show what I did to get my own ClustrMaps look and feel, and to suggest minor improvements (the web should be about creativity!). But tutorial first, suggestions later.

When you sign up for a free (they are, if you get less than a thousand visitors a day, anyway; let's say I qualify with a margin at this time of writing) account, you get a snippet of HTML code to paste into your site template, and doing so will eventually yield you a nice image, growing slightly redder by the day (assuming you don't set the archive period to reset every day, anyway). Mine looks like this today (site visitors can of course see this for themselves, but this one is dedicated to RSS feed subscribers):

Hover above it (the one in the sidebar) with the mouse, and a much larger, more detailed map will appear. This bit does not come with the basic package, but if you click the image, you will see the big map in your version too, featuring your own visitors. ClustrMaps look up the IP address of your visitors at the same time as they serve them the map image. They then take their time to track down the IP address to a rough geographic location, and finally jot it down on tomorrow's version of the map. Presto!

If you also want the more accessible version of the big map, feel free to borrow my code. Add this snippet of HTML, right after the ClustrMaps HTML blob, for instance:

<script type="text/javascript">
function clustrmaps()
{
  var url = 'http://clustrmaps.com/stats/maps-clusters/';
  var map = document.getElementById( 'clustrMapsLink' );
  var img = (map.all || map.getElementsByTagName( 'img' ))[0];
  var end = '-world.jpg';
  var dim = { w:800, h:340 };
  var get = /url(=|%3D)[^:]*:\/\/([^&]+)*/i;
  var big = document.createElement( 'div' );
  document.body.appendChild( big );
  big.style.display = 'none';
  big.style.position = 'absolute';
  big.style.height = dim.h+'px';
  big.style.width = dim.w+'px';
  map.onmouseout = function(){ big.style.display = 'none'; };
  map.onmouseover = function()
  {
    var link = get.exec( map.href )[2].replace( /\//g, '-' );
    var me = url + link + end;
    var at = getScreenCoordinates( img );
    var w = screen.innerWidth || document.body.clientWidth;
    big.style.border = '1px outset #888';
    big.style.top = (at.y - dim.h - 18) + 'px';
    big.style.left = parseInt((w - dim.w)/2 - 1) + 'px';
    big.style.background = '#1E1E50 url('+ me +') no-repeat 0 -22px';
    big.style.display = 'block';
  };
}

function getScreenCoordinates( node )
{
  var x = node.offsetLeft;
  var y = node.offsetTop;
  while( (node = node.offsetParent) )
  {
    x += node.offsetLeft;
    y += node.offsetTop;
  }
  return { x:x, y:y };
}

var then = window.onload || function(){};
window.onload = function(){ clustrmaps(); then(); };
</script>

This will load the big map when hovering the image (and no sooner; we wouldn't want to bother neither visitor nor ClustrMaps with any needless traffic). Not on the first day, though -- ClustrMaps must first generate the first day's traffic picture for you before this comes up anything more than an empty rectangle.

If you followed the link in my sidebar, though, you might also have noticed that there was a version of the large map with smaller clusters. The default page clusters up all visitors within a radius of about eight pixels, whereas in this version, each visitor gets a blob. If you want to link and/or pop up this version of the map, change the url in the <a href=""> portion of the ClustrMaps HTML to read ...clusters=no where it said ...clusters=yes, or the url variable on the first line to point to ...maps-no_clusters/ instead. You're set!

Some suggestionsto ClustrMaps

These inkblotches only look really good for very small volumes of traffic; peeking at your own traffic archives, the visitor blobs look a lot more like overgrown bacterias happily colonizing a petri dish:

For at least the small thumbnail maps, it would really make sense starting with smaller, say one or three pixel wide minimum size blobs, than the seven pixel wide present minimum size. I would even find a version without the fat black borders useful, and where the first few steps on the scale are just one pixel wide, with growing redness intensity -- compare (the right version is really a downscaled version of the big map):

See how that right one looks strikingly like some authentic console measuring something important at a large world operations headquarters of some sci-fi movie? I think that that's the kind of feeling you want to offer your heavy duty customers.

At least giving the option (it need not be the default; for catching new users, it is probably even a bad idea) of not rendering any cluster blobs larger than the cluster radius -- especially in the thumbnails, would make things not look so bad on sites with much traffic. As it is now, looks actually degrade with increased traffic, rather than the opposite. Which is kind of a shame, because it is a very cool idea otherwise exceptionally well executed.

Categories:

• ClustrMaps
• BlogTech
• maps
• howto