MapSurface | February 22, 2006

Mapsurface is the personal project of friend and local developer, Glenn Jones. Inspired in part by Jeremy’s DOM Scripting book, Glenn decided to rediscover DOM scripting and created his excellent Ajax link tracker. If you’ve not seen the link tracker before, it’s a cool little script that records and displays which links your users are clicking on. This is a fantastically useful tool as it allows you to see which parts of your page are getting more attention and which parts are not working. As such it could be used in both a marketing and a usability context.

Screen shot of Glenn Jones Ajax Link Tracker

Many people would have stopped there, but working evenings and weekends Glenn advanced the technique to produce Mapsurface. Mapsurface is essentially a stats widget which displays the traffic, referrers and user link behaviour on your site. Most stats packages show this information, so what’s so special? Well, while most stats packages show you this information on a separate admin page in aggregate, Mapsurface makes this data readily available on the actual page. I’ve been beta testing Mapsurface on my site now for a few weeks, so hit alt x and see for yourself.

Screen shot of the mapsurface dashboard

You should now be greeted with the Mapsurface dashboard, a floating widget that contains basic data for the page such as the number of visits, and highest referrals. The widget is composed of JavaScript, XHTML and CSS, has PNG transparency and is fully dragable. Glenn explains the workings a little more over at his blog.

Rather than weigh each page down with code that will only be used by a few people, the files that make up the widget are downloaded on demand, when the user presses the required key combination. This is a truly fantastic feature and one I’m sure we’ll see a lot more of. If you’d like to know how this all works, Glenn also explains the map surface architecture at his site.

Clicking the map link at the top of the dashboard brings up the now familiar link tracking map. As you can see from the following image, 133 people clicked on the link to my book in a recent post, while 229 checked out the book flickr set. You don’t have to be Jakob Nielsen to see how useful this type of data could be for your site usability.

Screen shot showing the link map superimposed over my CSS Mastery book article

Clicking on the more link brings up a second window showing a 7 day and 30 day activity graph, a full referrers list and the exit points for the page.

Screenshot of a bar chart showing the weekly visitor stats for the homepage

Now I don’t know about you, but I find it much more useful viewing page statistics on the actual page in question, rather than trying to decipher the divorced and aggregated data most stats packages supply. For instance, prior to installing MapSurface I’d probably look at my stats 3-4 times a year. Because it’s now so easy I check them at least a couple of times a week, more if I’m posting a lot of stuff.

Mapsurface is still in beta, but you can sign up for a test drive over at I’m not sure what Glenns plans are for this widget, so don’t know if it’s going to become a commercial project or not. However I know that I’d happily pay $2 per month for such a cool and useful tool. What do you think?

Posted at February 22, 2006 10:10 AM


mark lloyd said on February 22, 2006 11:37 AM

wow, thats pretty impressive. the fact that they are right infront of you is pretty handy and makes it very convenient.

the stats provided appear to be pretty in depth aswell, which might help to discover what your users are looking for.

looks likea cool project :D

Si said on February 22, 2006 12:32 PM

That’s a great little system! Those statistics are normally the only bits I’m interested in on my stats package so I’ve signed up for an invite to testdrive it on my site.

It would be interesting to see if it could incorporate some additional features such as Page Rank and similar Google info.

JBagley said on February 22, 2006 1:00 PM

Wow! MapSurface seriously rocks! Onpage link stats on the fly. Brilliant.

Now if Glenn could build an API for it, similar to what Shaun did with Mint, developers could go mad with widgets for it.

Glenn could make some serious dough with this app if he wanted to do. Awesome. Thanks for the headsup Andy.

josh said on February 22, 2006 2:01 PM

this method of displaying information is something i think i told you about when in the pub one time talking about email marketing.

in the system we use you can see the same in-page stats in your html emails. this helps you to design your emails to be more effective.

good stuff!

Jack said on February 22, 2006 2:28 PM

so hit alt x and see for yourself.

Hmmn, doesn’t work for me (OS 10.4.5, Firefox, which is a shame, since it looks like a seriously slick little widget.

Andy Budd said on February 22, 2006 3:48 PM

That’s strange as it works for me in OS 10.4.5, Firefox Because it’s dynamically loaded, you may have to wait a short while for the widget to appear. Check your status bar to see if it’s connecting to

Nice Paul said on February 22, 2006 3:53 PM

I’ve had it installed on my new blog for a few days, but the lack of instructions as-yet meant I couldn’t figure out how to actually use it. Now I know about the alt-x thing and have had a play, very nice :-) I’ll find it most useful for tracking outbound links.

Yvonne Adams said on February 22, 2006 4:33 PM

Jack, I’m using the same combo you are and it works okay for me. I did have to scroll back to the top of the page to see it.

Hauke Rehfeld said on February 22, 2006 4:43 PM

Doesn’t work in Opera 9pt1 on XP (works in ff though) :/

Patrick Haney said on February 22, 2006 6:18 PM

What is this Alt key you speak of? Oh, you mean Option.

It seems to be pretty slow for me and it took pressing Alt-X twice to get the widget to appear (though perhaps it just took that long to load). I also noticed that the widget doesn’t appear in the center of the window regardless of where you’ve scrolled, it sits up top. I didn’t even notice it until I scrolled back to the top of your page and saw it (I’m using Firefox on OS X).

Very nifty though. I like being able to see page stats on the actual page in question, especially with where the user is clicking. This sort of thing could be great for usability testing.

Julian said on February 22, 2006 6:39 PM

Have you tried website overlay in Google Analytics?

trovster said on February 22, 2006 8:39 PM

Woah, that looks pretty schweet. Lots of neat stats packages coming out.

However, the problem I have with Analytics/Mapsurface/MeasureMap/Mint is the reliance on JavaScript to collect the data. But the interfaces are great!

But I don’t get people charging for them, especially when they rely on JS. hmmm

mattymcg said on February 22, 2006 10:07 PM

Works fine for me. Andy I noticed on this page that there aren’t any percentages for the Google ads. I’d be interested to know whether MapSurface is able to track these, or if in fact no-one is clicking on them?

Glenn Jones said on February 22, 2006 10:26 PM

Thanks for the comments about MapSurface. I would like to try answer some of your points and questions.

I have now added the code so that MapSurface takes account of how far down the page you have scrolled. You should now not have to scroll back to the top of the page to see it.

I am very aware of the speed issue. The control loads with a second or two, but the data can take a lot longer (10 seconds). This is because this prototype is on a simple test development server. In a true production environment it would load very quickly. So while I look into upgrading the backend system, I have added loading notification to increase feedback.

I have many ideas about how MapSurface cold be taken forward, I would love to here any suggestion you may have.

Tom Watson said on February 23, 2006 12:28 AM

I’m quite impressed! It looks incredibly useful, but I’m curious how it compares to Google Analytics site overlay feature.

Nice Paul said on February 23, 2006 1:23 AM

Patrick, I think some Macs have Alt keys, others have Option keys, though I’ve never seen it explained why…

Lakshan said on February 23, 2006 2:34 AM

Simply Impressive.

Chris Heilmann said on February 23, 2006 2:42 PM

This is well impressive. Is there a chance to limit the amount of people who will be able to see the information? While a lot of our clients ask for a solution like this, nearly none is happy to share their data with their competitors.

I’ll be happy to test it on my box, too.

Jim Calleder said on February 23, 2006 4:45 PM

Good work Glenn! Ive been using this widget for over two weeks, and have been impressed with the simplicity of the interface and results view.

Brent O'Connor said on February 23, 2006 10:42 PM

That’s pretty darn cool!

Bart Claeys said on March 7, 2006 9:17 AM

It seems there is still room for innovation in the stats business!

Bart Claeys said on March 7, 2006 9:22 AM

I have been thinking… This widget could be adapted to act as a pepper for Mint by Shaun Inman?

Michael said on March 8, 2006 6:30 PM

Not to knock MeasureMap, but I feel the need to add that the concept of page level stats overlays are not a new idea. This has been a feature of Omniture’s SiteCatalyst for years.

Nice Paul said on March 20, 2006 11:45 PM

I’ve had MapSurface installed on my blog for about 4 weeks now, and I’ve just stumbed upon a very similar (though prettier) service on the way called Crazy Egg.

Joy said on March 21, 2006 6:37 PM

I was wondering if there is a map feature because I see a Map link but it doesn’t bring a map up. What does the map link do then?