Australia For The Ashes

An Interactive responsive / cross platform implementation of Google Maps v3 API utilising google.maps.ImageMapType, MarkerClusterers and a custom class I wrote myself known as 'Cluster Orbits'.

Tool kit

View Project

I've worked on a few Maps projects now and it's pretty easy to create a custom looking map. Using something like https://snazzymaps.com/ can really speed up re-skinning of a Google Map. But...

When G-Labs wanted to do something a little extra special for The Ashes I needed to have a re-think.

Nested deep within the API is a class called ImageMapType. This class allows for a complete face lift of Google Maps as we know it. So, rather than CSS styling the existing svg map elements (objects) we can replace them with bitmap data. In this case its a beautifully illustrated map of Australia.

To achieve this the method is as follows:

  1. Splice the bitmap up into relevant pre-determined 256x256(px) tiles across all the zoom levels required.

  2. Re-map the top left and bottom right coordinates of the illustration over the real lat/lng coordinates / real geographical location.

  3. Place each tile at the correct computed coordinate.

As a side the note, the amount of tiles is determined by the level of zooms. In this case we're only using zoom 3-6 which results in 276 separate tiled images. This total can grow into the thousands if you're using a larger range of zoom.

Manually creating the tiles for this is completely unfeasible and so i used a product called MapTiler

alt

With MapTiler it's quite easy to plot real lat/lng coordinates over a bitmap asset, it also handles the exporting of tiles too... which is nice!

Then it's just a case of projecting the tiles onto the map using getTileUr which is constructed from the coordinate lat/lng and the current zoom level.

var maptiler = new google.maps.ImageMapType({ getTileUrl: function(coord, zoom) { var proj = map.getProjection(); var z2 = Math.pow(2, zoom); var tileXSize = 256 / z2; var tileYSize = 256 / z2; ...

Markers and Clusters:

We did face a bit of a UX problem in that the locations we intended to use were all geographically close together, meaning in order to see them in relation to a real geographical coordinate we'd need to zoom the map into street level so the API would un-cluster them, somewhere around zoom level 19.

However, at that zoom level the illustrative map becomes a green blob so we restricted the zoom to max 6. This resulted in the requirement for real geographical locations and non real geographical locations.... headache!

To solve this problem I created something I called a 'clusterOrbit'

Cluster Orbits:

The centre marker for each city is a real lat/lng but it's surrounding marker points are fixed but have been determined by + or - the real lat/lng

Here's a snippet from the orbit array:

orbits : [ { position : { lat: 0, lng: 0 } }, { position : { lat: -0.17, lng: 2.18 } }, { position : { lat: 1.38, lng: 1.7} }, { position : { lat: 2.1, lng: 0 } }, { position : { lat: 1.38, lng: -1.7 } }, { position : { lat: -0.17, lng: -2.18 } }, { position: { lat: -1.8, lng: 0} } ]

Each Marker and Orbit is clickable and using another part of the API InfoWindows it's possible to open an infoWindo containing an image, a bit of copy and a link to another Guardian article.

alt

There's also the ability to switch between airport locations and Ashes locations which was achieved using a checkbox (toggle) to add or remove the markers from the Map.

After this project I'm considering myself as a bit of Google Maps expert and would be happy to work with this API again!