Kimler Adventure Pages (http://randsco.com)

ClustrMap: Dots show visitor locations. Click for bigger map.

A ClustrMap|NASA Mashup

Twas the night before Christmas and all through the house, not a creature was stirring - except Scott, who was playing with PhotoShop! Sorry, but "Visits in the Night" isn't about Santa Claus coming down our chimney. It's about creating a "night-time" display using a satellite image from NASA, merged with our worldwide website visitors tracked on ClustrMaps.

Ever since November 2005, we've been tracking the locations of many of our randsco.com visitors by using an application developed by Marc Eisenstadt, called "ClustrMaps". (Hover the globe in "Site Tools" section of the sidebar, for the regular map thumbnail - like the one that also shows here). Since that time, we've logged over 2 million visitors!

When you click the globe in the sidebar (or the thumbnail above) you'll be directed to the ClustrMap website, which shows a much larger visitor map for our website (clicking on country regions shows even greater detail). Since inception, Marc and the ClustrMap team have been continually adding features to their service and they recently won "Best Free Web Tool" in the 2011 Edublog Awards.

Not long ago, when I clicked on the globe and went to the larger, world-wide map, I noticed that the dots showed first and that it took a few seconds for the underlying "map" to reveal itself. I thought, "The dots by themselves, make an interesting display." They reminded me of a NASA image I once saw, showing urban lights across the world at night. (The image below. Click it for an even larger version).

Earth at Night: Lights from urbanized areas show up clearly on this NASA image (a composite of hundreds of images taken by orbiting DMSP satellites).

The Mashup

Below is the mashup that combines the NASA satellite image and our ClustrMap visitor data (most of December 2011). The white dots represent visitors. The larger the dot, the more visitors from that city/town.

If you hover over the image, the dots will disappear, revealing the satellite image. You'll note a fairly good correlation between urban lights and visitors, which indicates that we're very fortunate in attracting readers from all over the world, despite the fact that it's an English language blog.

How We Made it

Making the mashup was fairly straight forward and can be done using two fairly common design/development tools: an image editor (PhotoShop) and a live CSS-editing tool (Web-Developer, a plugin for FireFox).

When I noticed our world map taking a while to load at the ClustrMap site, I realized that the dots could be separated from the underlying map. Using the "Web Developer" plug-in for FireFox, it's easy to live-edit the ClustrMap webpage and hide elements to make only the red dots visible.

Live Editing: Screen dump of the ClustrMap website, after modifying the CSS needed to kill the underlying map & other elements (CSS used shown in grey box).

A quick screen dump of just the dot data was pulled into PhotoShop and manipulated (changing the red dots to white and eliminating the background color).

Then it was just a matter of finding the NASA satellite image, making a copy, resizing it, stretching it, sliding it and moving it to (closely) match the ClustrMap world map.

I added ClustrMap/NASA logos, cleaned up the image a bit and then posted the result.

It's a nifty way of looking at the same old data. It was a fun little project and was satisfying to do, although in the grand scheme of things, it has very little value!

One thought that did come to mind, however, was that in another iteration of ClustrMap improvements, maybe Marc and his team could allow user-CSS files for map pages (to allow replacement of the standard ClustrMap world map with a user's own version and/or modifying other elements on the page?) Twitter and other such services allow limited variations on this theme, why not ClustrMaps?