Tuesday, February 03, 2009

TimeMap & Other Timelines

One of the most frequent questions I get asked by readers of Google Maps Mania is whether there is an easy way to create a Google Maps mashup with a timeline. It seems that lots of you want to create maps that show developments over time.

The Google Maps API itself does not contain a timeline but that does not mean you cannot have a timeline with your map. Nick Rabinwitz has created a Javascript library called TimeMap that lets you use the Google Maps API in conjuction with the Simile Timeline API, alternatively you could use a third party map creation tool like Dipity to create a timeline map, or, if you have the development skills, you could create your own timeline interface to work in conjunction with Google Maps.


TimeMap Javascript Library

The Google Geo Developers Blog last week carried a post by Nick Rabinowitz, who is the creator of TimeMap, a Javascript library that helps the Google Maps API work with the SIMILE Timeline API to create maps and timelines that work together.



There are a number of examples of maps using the Simile Timeline API. In the post Nick used the Google Maps API Birthday Timeline as an example of a map using his library. This map created a timeline of all the Google Maps feature updates in its first three years of its existence and also mapped all the posts from Google Maps Mania.

One of my favourite maps Ushahidi's Kenya Incident Map also uses Nick's TimeMap library to create a timeline tracking and mapping reports of incidents of violence around Kenya.

Of course you don't have to use Nick's library to use the Simile Timeline. Olivier G has used the Simile Timeline to create a biographical map called Map My Life. Olivier has created a 'life player' which animates the timeline. Therefore users can just press play and watch Olivier's life flash by on the timeline and on the Google Map.

Map My Life will even let you create your own biographical map. To create your own biographical map write an xml file with the data of your biography and then just load it onto the map.

Third Party Creation Tools

Dipity is a good example of a third party site that allows users to create widgets with maps and timelines. The created timelines can then be embedded in a website or blog.

Using Dipity it is possible to show the progress of a subject both chronologically and geographically. You don't need any programming skills to create maps in Dipity and anyone can create a timeline map very quickly using this widget.

The payoff of course is that you have no freedom with the look and feel of the final map. Using Nick's TimeMap library requires some knowledge of coding but the reward is you have much more flexibilty over the design of your map.

Create your Own Timeline


The third option for developers is to create your own timeline interface with Google Maps. This of course gives developers the greatest freedom but is also the hardest option. Not surprisingly the best independently produced timeline maps have come from those who have been able to spend a bit of money on development.


The Washington Post's TimeSpace World is a very good example of a custom made timeline map. A timeline at the bottom of the Washington Post map illustrates peaks in coverage and allows users to customize news searches to a specific day all the way down to a particular hour.

What Was Here, a map showing 1000 years of Liverpool's history, is another good example of a map with a timeline. This timeline covers 1000 years of history so its conception and inception obviously required some thought.


So, if you want to create a Google Maps mashup with a timeline you have three main options. The easiest method is to use a third party creation tool like Dipity. If you have some development skills you could use the TimeMaps Javascript library. However if you want to have complete freedom over your map's design you need to get your hand's dirty and start playing with the Google Maps API.

________________

2 comments:

Hugobiwan Zolnir said...

Very clear and useful : thank you !

Anonymous said...

The examples helped me to collect what I could implement in my project.