Bringing the web stats to your site

I’m still working on the widgets for W3Counter. I’ve have too many other things that need attention recently to bring anything to finished form, but at least I have 6 of the 8 planned widgets working and in testing. You’ve already seen pWidget, the page stats overlay. Here are a couple more:

I hope W3Counter’s users like the widgets. They’re as easy to add to a site as copying a single line of JavaScript, but completely customizable at the same time. Most of them will allow you to customize borders, colors, sizes and fonts with JavaScript variables. A nice interface with some color pickers and sliders should make creating a custom widget easy as copy-and-paste.

I like the idea of putting stats on your site. I’ve already got the “Popular Posts” on the right and the custom counter at the top of this blog powered by W3Counter’s API. There’s a bunch of statistics on other sites of mine in the footer. Now the less technically savvy, and free users that don’t have access to the API, can add stats to their sites and blogs too.

Unlike Google and investment-backed startups in the space, everything I do with W3Counter needs to consider cost. I don’t have the luxury of cash to burn in the name of innovation or just plain bloat. Widespread adoption of the widgets would take a toll on the limited server resources available to the site. At least implementing a cache was dead simple. Symfony saves me time again and again. Cacheing the full output of the widgets for every user with a 5 minute expiration takes exactly this much work:

  enabled:     on
  with_layout: true
  lifetime:    300

I build them anyway in hope that they might bring in new users and perhaps some new subscribers. And because I love to build things. That little interactive visitor map was a lot of fun.

I had to derive the formula to convert longitude and latitude to coordinates on a given size map image with an origin in the upper left. Then I had to find a mercator projection map of the world, the type of flat map that keeps latitude and longitude lines at right angles at the sacrifice of distorting the continents, or else a point in California might end up somewhere in the sea. I found one somewhere on a CIA site, and overlaid it to the vector map I wanted to use with 50% opacity and scaled my map until the continents lined up.

Then I wrote out the JavaScript to plot the points and attach mouseover functions to display the location in a partially transparent tooltip. It took a while but now I know how a service like Google Maps knows where to place its markers on a flat map given latitude and longitude.

$x = ($longitude + 180) * ($width / 360);
$y = (($latitude * -1) + 90) * ($height / 180);