Timelines, Tweening & Temporal Heat Maps

Timemap is a JavaScript library to help add a SIMILE time-line to an online map, including Google Maps. The library includes a number of sample maps that show how you can use the SIMILE time-line with Google Maps. Two of the examples I haven't seen before and both maps are impressive in their own right.

The Temporal Heatmap from a Google Spreadsheet example is a map with markers that are sized on the map according to a data point in the spreadsheet. It is a great template for showing expanding and shrinking data points over time. In the example map the markers show cumulative deaths from asbestosis and silicosis in Texas over time.


The other example is On-the-fly Polygon Tweening. This map tweens a polygon so it grows and shrinks in conjunction with the time-line control. Polygon tweening could be used for any number of map based visualisations, for example to show a changing city boundary other time.

The Latest Earthquakes on Google Maps

The Ö-Files - Live Earthquake Map uses Google Maps and the Simile Timeline with a number of data sources to provide a live map of earthquakes around the world.

The map is updated every five minutes to show the latest reported earthquake and you can use the time-line to explore earthquakes over the last seven days. It is also possible to refine the results shown on the map based on the different data sources.

_________________

The Amsterdam of Anne Frank

Everything about the Het Amsterdam van Anne Frank time-line is beautifully realised, including its use of static and interactive Google Maps.

The time-line explores the history of Amsterdam before and during German occupation in World War II. The time-line includes excerpts from Anne Frank's diary alongside historical photographs and videos of Amsterdam during the occupation.

If you click on an entry in the time-line it will open in a lightbox style window. Most of the entries are geo-located using a a static Google Map. If you click on the static map a larger Google Map will open to show the entry's location in Amsterdam.

_________________

A Time-Line Library for Google Maps

Time-Map is a Javascript library for Google Maps that adds a fully functioning time-line to a Google Map.

The time-line element includes three different time sliders that allows the user to change the year, month or day. As the user drags the time-line the markers are automatically updated on the map.

The same developer has also provided a number of frameworks for creating custom information windows, styled maps, draggable driving directions and custom map markers. You can see examples and download the libraries here.

_________________

Follow the Eighth Marines on Google Maps

One-Eight Basetrack is an experimental media project, tracking the deployment of 1/8 – 1st Battalion, Eighth Marines, throughout the duration of their deployment to southern Afghanistan. A small team of mobile media operators is embedded with the battalion, transmitting their reports and reflections from Helmand province as they travel across the battalion’s area of operations.



The project is using Google Maps with the SIMILE Timeline to provide a navigation aide to the videos, photographs and posts collected by the team on the ground.



The videos of the marines serving their tour of duty in Afghanistan are particular powerful. As photographer Teru Kuwayama says the project creates "a pipeline between 1,000 Marines working in very austere, isolated conditions in southern Afghanistan and connects them to their mothers, their fathers, their wives, their girlfriends, their husbands and their kids."



________________

DHO: DIscovery

Ireland's Digital Humanities Project is using Google Maps and the Simile Time-Line as a way to browse Irish digital collections and resources.

You can select to view a collection from the drop-down menu. Once you have selected a collection you can choose to browse the collection in a Google Maps view or on a time-line.

The map view obviously depends on whether location data has been added to individual collections.

DHO Discovery Interface

_________________

Make Your Own History Map

Weaving History from the Open Knowledge Foundation lets you create your own history maps with a little help from the Simile Timeline and Google Maps.

The Simile Timeline widget has long been a favourite tool for Google Maps developers who want to create maps about historic events. The programming skills required for both the timeline widget and the Google Maps API however does create a barrier for anyone who hasn't got the necessary knowledge of javascript.

With Weaving History you can create your own historical timeline and map without any programming skills. To create a new timeline map you just need to start a new 'thread' on Weaving History and add some relevant 'factlets'.

When adding factlets you can just add the URL of a Wikipedia article and the factlet is added automatically. As you add factlets to your thread they are automatically added to your thread. It is as easy as that.

Add a few factlets to a thread and you soon have your own historical timeline map.

Weaving History

_________________

A Google Map of the American Civil War

Washington Post Civil War Map

I do like my history served up on a nice map. And this is a very nice map!

The Washington Post's Google Map of the Civil War maps all the battles and casualties of the American Civil War. The map features an animated time-line that allows you to watch the war unfold over time. You can pause the animation at any time and you can also refine the view to show any period of time.

If you roll over the circles you can view the date and the casualties of the mapped battle. If you click on the circle you can read a more detailed account of the battle. There were a lot of battles and a lot of casualties in the Civil War so obviously a lot of work has gone into creating this map!

A lot of effort and an awesome map.

Also See

• The American Civil War Timeline Project

________________

News Timelines on Google Maps

TimeSpace: World

The Washington Post's TimeSpace: World compiles all the world news content from The Washington Post, washingtonpost.com, PostGlobal, Foreign Policy magazine, and partner sites including The Associated Press and Reuters onto one customizable map.

All the news coverage is collected into clusters around hot-spots on the map. By clicking a cluster, users can view articles, blog posts, photos, videos, and even reporter's Twitter feeds. A timeline at the bottom of the map illustrates peaks in coverage and allows users to customize news searches to a specific day all the way down to a particular hour.

TimeSpace: World is also available in widget form so users can embed the map on their own sites. In addition, a share function creates a unique URL for an individual story within the map that users can link to or send to friends.

ITN Story Map

ITN is using Google Maps with the SIMILE Timeline to display the world's news.

Using the timeline above the map it is possible to view today's news or to scroll back and view past news items from ITN geotagged on a Google Map. It is possible to filter the news shown by world, sport, entertainment or business.

The mapped news stories include photographs or videos and contain links to view the full story on the ITN website.

________________

Data Animations with Google Maps

Timemap
Timemap is a Javascript library to help create Google Maps with the SIMILE timeline. The Timemap page on Project Hosting on Google Code has a number of really good examples of how to implement the SIMILE Timeline with Google Maps. A couple of the examples, in particular, are very impressive. One creates a Temporal Heatmap from a Google Spreadsheet and the other has some great Polygon Tweening.

Temporal Heatmap from a Google Spreadsheet

In this example the map markers increase in size to show the cumulative deaths from asbestosis and silicosis in Texas over time. As you move the timeline forward the circular map markers grow to reflect the cumulative number of deaths.

This is a great way to show any cumulative increase in data on a map. I'd really like to see an example that shows the growth in population by country over a number of centuries.

Polygon Tweening

This example uses a custom filter to smoothly tween a polygon between a beginning set of vertices and an ending set. The example doesn't seem to be a demonstration of any particular dataset but I can think of some great ways that this could be used.

This could be used to great effect to show the growth of an urban area over time. I'd love to see this used to illustrate the urban sprawl of London as it has crept out over the centuries to swallow up the surrounding countryside.

________________

A Sailing Calendar on Google Maps

Where Are We Going to Sail?

This Google Maps mashup displays a calendar of upcoming sailing events around the world and shows the location of each event on a map.

You can use the calendar to navigate the map by date. It is possible to quickly navigate to any month, week or year. If you click on an event in the calendar the map will pan to show its location.

You can also browse the events by location. If you click on any of the mapped sailing events the calendar will display the date and time that it is scheduled for.

________________

The Victorian Bushfires on Google Maps

Black Saturday

The bushfires of 7 February 2009 were the worst in Australia's history. The Australian Broadcasting Corporation has created an amazing Google Map to tell the stories of the Victorian bushfires by those that actually experienced it.

ABC has collected hundreds of accounts of the day and the fire's aftermath from residents of the fire-affected communities, volunteer fire fighters, journalists, politicians, tourists and others. This Google Map allows users to browse these stories, videos and photographs by location and by time.

The timeline allows you to browse the submitted stories on the map by time. The initial view allows you to select any range of time from the 7th and 8th Feb 2009. If you select the next button you can also select a time range from the days, weeks and months after the fires.

All the multi-media content can be viewed directly from selecting the markers shown on the map.

________________

Flickr Time-Line Google Map

Flickr Time Photolayer

This is an interesting mashup of Google Maps and Flickr using the SIMILE Widgets Timeline component.

The map allows the user to view Flickr images for any location in the world. If you don't like the latest photographs for your location then you can use the time-line above the map to view Flickr photographs uploaded on different dates.

This addition of the time-line means that you can search for photographs for particular locations on specific dates, such as Washington on the day of President Obama's inauguration or Greenwich Park on the day of the London Marathon.

________________

Protovis Visualisation Tool & Google Maps

The Stanford Visualisation Group's 'Protovis' is an open source graphical tool for visualising data. The Protovis website includes a couple examples of the tool using Google Maps.

Minard's Napolean

Charkes Minard was a pioneer of the use of graphics in engineering and statistics. Probably his most famous creation was a flow map showing Napoleon's disastrous Russian campaign of 1812. His map displays:

• the army's location and direction, showing where units split off and rejoined
• the declining size of the army
• the freezing temperatures during the retreat

The Protovis map of Minard's visualisation of the Russian Campaign adds interactivity using Google Maps.

The timeline below the map shows the date and the temperature as Napolean travelled east towards Moscow. The brown line shows the dwindling size of his army and the black lines show where units split off and rejoined the main army.

Oakland Crimespotting

This Google Maps mashup shows crime in Oakland. The coloured circles correspond to crimes. The different colours represent different categories of crime.

Both the Minard Map and the Oakland Crime map have the source code and the data source displayed under the maps.

________________