Updating Google Map Marker's z-index

Lately I've been working on a web application that uses Google's Maps API. It's been an interesting and engaging project.

One of the limitations of the current Maps API is that the z-index of a marker cannot be changed after it has been created. The client requested that the selected marker "popped to the front" as some markers obscured others in certain map areas depending on zoom and closeness of coordinates. This was a reasonable request and would enhance the UI, but was not so easy to implement.


Mike Williams gives a good introduction to this issue and details of how to set the z-index of the marker when it is created with addOverlay() in his Google Maps API Tutorial. Having read this, I attempted to re-create each marker when it was clicked and keep track of the top most z-index. I had some success but had unpredictable z-index results and it was definitely an inefficient way to produce the desired effect.

I decided to browse the DOM and see if I could find a better way to do this. I found a guide to Undocumented Google API features which seems to be mostly out of date, but contained the very important details of how to calculate a Marker's default z-index:

Use marker.setZIndex(Math.round(marker.getLatitude()*-100000)) to get a moved marker to overlap correctly.

Even though setZIndex() and getLatitude() are not valid methods in the current API, it's easy to understand the calculation.

In my application I was already using a unique icon for each marker so that they displayed sequential letters (A,B,C...) and had added an index property to the marker object. I was able to leverage this with a bit of jQuery magic to find each icon in the DOM and alter the CSS z-index value. Since the default z-index is something like -108619296, I created a function to toggle the z-index between normal and front positions by multiplying it by -1.

icon = $("#mapbox div div div img[src='/images/markers/"+marker.index+".png']");
zidx = icon.css('z-index');
icon.css('z-index',zidx*-1);

Just to make sure that no other marker was still in the top position, I looped through my array of markers and reset the z-index with this function.

function reset_zorder(marker) {
$("#mapbox div div div img[src='/images/markers/"+marker.index+".png']").css('z-index',Math.round(marker.getPoint().lat()*-100000));
}

Obviously none of this is a copy+paste solution. but it should give anybody needing to manipulate Google Maps MAP Marker z-index a good example to work from.

"X-Moz: prefetch" and skewed page-hits

Earlier today I installed a WordPress plugin recommend for tracking the popularity of posts. The plugin is unsurprisingly named "Recently Popular". After installing the plugin I ran some quick tests and found that I was getting extra hits recorded. I spent a bit of time back-tracking to find the source and after systematically disabling all other plugins and page elements found that it was firing in wp_head() in the page header.

After some more digging, I noticed that the extra hit was for the chronologically next published post and that the problem occurred in both WordPress and WordPressMU. This wasn't making a lot of sense so I decided to try a different browser - more of a sanity test than anything. That's when I found it didn't occur in Chrome, or Opera - just Firefox 3.5.6 that I'd upgraded to a few hours earlier.

I fired up the Live HTTP Headers add-on and checked out the requests Firefox was making. It was definitely making both post requests. I took a closer look at the second request and noticed the extra header "X-Moz: prefetch".

A quick search for X-Moz: prefetch turns up Mozilla's Link prefetching FAQ which gives a good description of what is happening and why. WordPress creates a tag similar to the following when wp_head() is executed:

<link rel='next' title='The Next Post' href='http://your_domain/year/month/day/the_next_post/' />

I am unaware of anyway to disable the prefetch hints. You could edit your header.php and remove the wp_head() statement, but many plugins rely on the execution of this function so results could be unexpected and undesirable. The issue for me was not that the hint was published but that the prefetch hits were being counted as real post requests, as well as the actual request when I clicked through a second or two later. This would seriously skew the perceived popularity of posts.

My solution was to ensure that the Recently Popular plugin ignored post requests that passed the "X-Moz: prefetch" header. Depending on your server configuration, the method of checking the header exists may differ - apache_request_headers() (alias getallheaders()) is only supported when PHP is installed as an Apache module. Most servers should support checking for $_SERVER['HTTP_X_MOZ'].

I wonder how many other people will wonder why their page hit stats have mysteriously increased without any increase in ad impressions, etc.

I will contact the plugin author to suggest an update once I've published this post.

How To: Android Scrollable Divs

Lately I've been working on a webapp for the Motorola Droid and a QNX CAR device. The application interface is a split screen with one half being a list of items of variable length. Neither of these browsers on these devices support iframes or scrollable divs, so the approach used in a traditional browser was not an option.

The application was using jQuery, so using the jQuery UI Draggable plugin was a natural choice. It was quick and easy to implement and worked well on the QNX device, but didn't work at all on the Android browser.

To get the prototype version of the application finished on time for the deadline, I resorted to adding up/down buttons to the interface that scrolled the div content by manipulating the margin-top via javascript. This satisfied the client, but as a solution it was less than optimal, and in my opinion it made the UI feel clunky.

At the time that I write this, there's not a lot of information about how to deal with this issue in the Android browser. It took me a while to discover that this issue is also a problem for the iPhone/iPod Touch browser and since Android's browser also uses WebKit, there is already a working solution called iScroll developed by Matteo Spinelli on Cubiq.org.

This code utilises WebKit's "touch" events, which are akin to click events, but are only fired by touch screens. You can find a great introduction to Javascript Touch Events on Michael's "Back To The Code" blog. If you're new to developing mobile webapps, you should probably also take a look at iPhone Webapps 101.

Hopefully posting these bits and pieces together here will help save somebody a lot of time searching on Google.

Skype vs XAMPP

I like Skype. I use it everyday. Most of the people I need to communicate with are Skype users. Skype handles chat, voice and file transfers to individuals and groups, and one-to-one video-chat, and allows you to cheaply connect to real-world telephony and SMS too. I'd have to say I am a bit of a fan.

The only annoyance I have found is that when I reboot my PC (which is not that often), Skype starts up and grabs port 80 before my XAMPP install starts. This means that my local XAMPP Apache install fails to start. In the past I've been forced to quit Skype, start Apache and then restart Skype. No big deal, but a little annoying.

Yesterday I had a closer look at Skype's Advanced Settings and found this problem can be resolved by simply unchecking the "Use port 80 and 443 as alternatives for incoming connections" option and restarting Skype. Simple stuff, but I though it was worth posting.

Parsing and visualising JSON

Over the last few days I've been working on a project that uses some fairly complex JSON objects. Because JSON (JavaScript Object Notation) is a lightweight data interchange format, it can be a great way to grab complex data structures via Ajax. It's been said that JSON is "the fat-free alternative to XML".

In theory JSON is easy to parse, but if your data structure starts to contain numerous nested objects and arrays, it can be come hard to keep track of and starts looking like a long jumble of punctuation.

I found Brenton Fletcher's JSON 2 HTML to be a quick and easy way to check your JSON syntax and visualize the data. You can either copy+paste a JSON string or sumbit a URL and the will page load the JSON string from the URL. It's definitely worth checking out if you're working with JSON.

Converting Media Formats

There are so many media format in common use these days that it's difficult to keep up with them, not just with when and why to use each format, but also being able to read them or convert between them.

Lately I found the need to convert a couple of different file formats that Windows isn't natively strong with. If you've ever tried to track down a codec for a slightly different format, then you'll know how annoying and confusing it can be, especially when you want to export to another format.

There is one tool I have found to be very useful in this area, and it's a great piece of freeware. The name of the application is "SUPER © Simplified Universal Player Encoder & Renderer".



Here's a warning though - the website is not very aesthetic or user firendly, but it's worth the effort to get the free fully functioned application with codecs included. Just scroll to the bottom of the first two pages looking for the download link, and then the actual download link should be on the third page. If I post the download page link here it'll just redirect you to the first page anyway...

Just to prove that it's useful, here a vdeo I made with a an old .m4a file that I could finally convert to a more useful wav/mp3 and threw together twith some screen captures from Winamp's Milkdrop plugin. I wrote this track years ago (when I was in my "synth" phase), the original files are long gone...

Hey, Where'd My Space Go?

Recently I was doing some routine stuff when I noticed the was a LOT less space on my main hard-drive than I expected. I was down to less than 500MB of space! I remember the days when I was smug about having a 30MB drive when the guy working on the next PC only had a 20MB drive. It's hard to believe in this age of relatively gigantic drives we can still fill them up without too much effort. I guess we can put it down to the ever increasing filesizes driven by higher pixel counts of digital cameras, the recent epidemic of software bloat, and the invention of peer-to-peer file sharing.

I needed to free up some space, so I dug out my favourite drive-space analysis tool. It's pretty lean and has a great interface, so I thought I would share it here.



This is Steffen Gerlach's freeware application for Windows called Scanner. Once the application has scanned your drive, you can drill down through each folder of the sunburst chart to easily identify what has been gobbling up your drive space. Admittedly the initial scanning can take a few minutes, but no more than it takes to grab a cup of coffee.