Google Maps and Suburbs

This thursday and friday my company , held its quarterly innovation day event. This is similar to Google’s own Innovation Time Off or Atlassian’s FedEx days . In short, we as employees got to propose ideas beforehand and then work on them for two whole days. Towards the end of friday, we got to present our efforts in front of the company and the best ideas got a business impetus to be developed as a company feature. The result of the last innovation day was the open sourcing of the page model developed in house called Gizmo by Luke Cunningham.

So last thursday, I decided to join forces with Geoffrey Giesemann on his idea of visualising suburbs and their corresponding information onto google maps. In this, I hoped my recent knowledge of their V3 API would come in handy. So we started at about lunch time on thursday and we split the task on basis of front and back end. The back end became Geoff’s task and he decided to write a rails application to load the monstrously verbose and complicated suburbs’ file and parse to JSON in a neat form. (Neat here being defined by the lack of extraneous data). My task became the front end. That is, to mock the JSON data that Geoff would provide and set up the map to display it. And thankfully, my knowledge from the recent devfest did come in handy 🙂 .

I started with a simple map and ensured that I could load the defaults and set up a single marker. This was fairly easy as the new API is very intuitive to work with. Then came adding additional controls to the top left of the map, which we decided would be the capital cities of the states. This would allow us to go directly to the geographical centers of the states, or centre of Australia, if we wanted. The mock data simply comprised of suburb name, its geocodes (latitude and longitude) and the name state it belonged to. I started out with a hundred suburbs and loaded them, using default markers in firefox and the whole thing was working neatly. I set up the info windows and was disappointed when I found out that the content was simple HTML(I was hoping for more controls, they are fun). The fun started when I loaded all the suburbs from Australia that I could find (in this case 15,000).

The fun was that with 15000 suburbs, all my browsers crashed; Firefox, Safari, Chrome. Someone suggested lynx but we had to decline, even though ASCII representation was tempting 😛 . So we decided to use clustering. Now V2 API used to have a MarkerClusterer, but for V3 Fluster2 was recommended. And rightly so. It was very easy to use and even easier to understand; even for someone like me who has not done much Javascript. But even after we clustered the suburbs, only Chrome could manage the load, probably due to its V8 engine. Once we dropped it in, the result was as follows:

Then we added custom markers for suburbs based on their state.

These markers were obtained from google’s map icon repository.

and some information on the InfoWindow

and our front end was complete. Geoffrey soon provided the the actual JSON data and after optimising our JS code to handle such a large load, we had a very nice application.

P.s Particular thanks to Daniel Hall who made me understand why the ‘A’ in AJAX stands for asynchronous.