The Disaster Mapper - An interactive Resource for Schools is a project for the Attorney-General's Department, Australian Emergency Management Institute. The aim of the project was to provide an educational resource aimed at school students for investigating Australian natural disasters throughout history.

It was developed in 2009 but has just been released to the public.

This project made use of the latest Flash technologies with the Google Maps API to provide an interactive map where users could navigate and search disaster information by time, location, disaster types and keywords.

The application uses a very simple series of navigational elements. A series of large buttons allows the user to select the disaster categories of interest and a timeline allows the user to limit the time period displayed. The disasters matching these two filters are then displayed on the map along with overview information of the selected disaster categories in the information panels on the left.

Media associated with each disaster (including images, flv, youtube, viemo, mp3 and other media types) can be viewed either in quick view in the information panels or in the detail overlay.

The system also supported and included additional data such as population, temperature, rainfall and specific high-risk disaster areas which could be overlaid on the map.

The result is a very easy-to-use, interesting website and something suitable for the target audience of school students.

Making use of some extra available time, distriqt also developed an additional component for the CMS which allowed an administrator to directly edit overlay data on top of a Google Map, using a standard data format (KML). This allowed the client to create more meaningful and suitable overlay information for the website such as risk areas, temperature, population and rainfall data.

The project was delivered on-time and on-budget, and has been well-received by the client, schools, and educators - all feedback has been very positive.

See the site here.

So as many people know, I've been promising an update to the KML Loader for a while now, and even to the point where I've had some local revisions and haven't had the time to check them in (I know, I know, bad practice!)

The major update has been to enable the ability to load linked assets. Initially this just extends to ground overlays and custom icons, but now that I have the structure setup to do this I'll be able to add in linked files and styles easily.

Other updates include a series of bug fixes, features with multiple geometries now load in correctly and I've updated the utility library to correctly parse the newer OGC KML namespace.

Some things to note:

• I've added a trunk directory to keep the main head revision separate from the tag tree
• I've removed the included version of the google maps utility library. I've committed in some changes to this library so I didn't want to have to maintain it in two places, so you'll now have to go to the google maps utility library on google code here (I'll package it all up at the end of this post as well).
• I've tagged the previous version of the library if you wish to keep using it, you'll find it at: http://svn.distriqt.com/public/trunk/gmaps/tags/R20101004_gmaps_utils_v1.0
• I've used the BulkLoader by Arthur Debert and have included it in the repository. This is used to load all the linked assets.

The functionality should be exactly the same as the previous version, so you can still refer to the post on interactions, about the SimpleKMLLoader and the initial post about the KmlLoader.

The major change is that you now need to grab the gmaps utility library separately and put both libraries in your source tree.

svn co http://svn.distriqt.com/public/trunk/gmaps/trunk/ distriqt-gmaps
svn co http://gmaps-utility-library-flash.googlecode.com/svn/trunk/ gmaps-utility-library-flash-read-only

You'll end up with a src directory in both of these checkouts that you need to add to your source path for your projects.

Here are the current packages (v1.2) distriqt-gmaps-kmlloader-v1.2 and google-utility-library-flash.

Let me know if you find it useful!

I've had a few requests asking about how to interact with the KML once you've loaded it onto the map. It's really quite an easy step once you've got the KML on there but I'll show you how in this simple example.

Firstly if you haven't read the Simple KML Loader post then head over there first. It explains how to get that KML file loaded and displayed on your map.

The objective of this simple example is to show an info window popup when we rollover one of the objects in the kml, showing the name of the kml object in the window.

The code for this example is in our svn:

svn co http://svn.distriqt.com/public/trunk/gmaps/examples/kmlloader/

Make sure you have our SimpleKmlLoader library in your project.

To create the loader, load the kml and have it added to your map:

var _loader:SimpleKmlLoader = new SimpleKmlLoader( _map, true );
_loader.addEventListener( Event.COMPLETE, loader_completeHandler );
_loader.load( _file );
 

Now on the complete handler you can add the interactions:

function loader_completeHandler( _event:Event ):void
{
	// At this point generally this objects array
	//   will simply be the base object of the KML
	addInteraction( _loader.objects );
}
 
/**
 * Add interaction to every object in the array
 */
function addInteraction( _objects:Array ):void
{
	for each (var _object:KmlDisplayObject in _objects)
	{
		_object.interactive = true;
		_object.addEventListener(MapMouseEvent.ROLL_OVER, object_rollOverHandler, false, 0, true );
		_object.addEventListener(MapMouseEvent.ROLL_OUT, object_rollOutHandler, false, 0, true );
 
		// Process any children
		addInteraction( _object.children );
	}
}
 
function object_rollOverHandler( _event:MapMouseEvent ):void
{
	// show an info panel...
	var _object:KmlDisplayObject = KmlDisplayObject(_event.currentTarget);
	_map.openInfoWindow( _object.latLng, new InfoWindowOptions({content:_object.name}) );
}
 
function object_rollOutHandler( _event:MapMouseEvent ):void
{
	_map.closeInfoWindow();
}

Now when you run with this code you should see the name of the kml object appear in the info window when you rollover the object. This is of course a very simple example, and much more can be done with this, but it is a good point to introduce the concept of interactions.

Recently we've been using some of our own tools in other projects and found some room for improvement on the KML Loader we developed. In particular we wanted a simple class that could handle all the processing from the loader, adding the resulting overlays to the google map. Also we needed it to load in some of the styles, such as colours and line types.

So we've expanded our KmlLoader class and provided a few additional utility classes.

Before we get into it, to get the latest version, just checkout from our public svn:

svn co http://svn.distriqt.com/public/trunk/gmaps

The most useful is the SimpleKmlLoader class. This simplifies the loading and display of a kml file to a single line of code.

 new SimpleKmlLoader( _map, true ).load( _file );

Generally you'll probably want to do something more with the kml than just display it, but this is handy for those quick display situations. You'll probably more want to do something like this, adding an event listener for when the file is loaded:

var _loader:SimpleKmlLoader = new SimpleKmlLoader( _map, true );
_loader.addEventListener( Event.COMPLETE, loader_completeHandler );
_loader.load( _file );

The second parameter provided to the constructor is an option to automatically add the objects to the map when the load is complete, so you no longer have to worry about adding the features to the map.

Once the loader has completed you'll have access to all the objects loaded from within the file. Each of the Kml Objects is represented by the KmlDisplayObject class, which has automatically created the appropriate type of map feature to add when required.

The important properties are SimpleKmlLoader.objects which is an array of KmlDisplayObject and then KmlDisplayObject.children contains all the children of that object (again an array of KmlDisplayObject).

import com.distriqt.gmaps.kml.utils.*;
/**
 * Iterates over the objects and traces out the name of
 *   each and recurses into the children of each object
 * @param _objects	An array of KmlDisplayObjects
 * @param _prefix	A string to prefix to the output trace
 */
function traceObjects(
    _objects:Array /* of KmlDisplayObject */,
    _prefix:String = "" ):void
{
	for each (var _object:KmlDisplayObject in _objects)
	{
		trace( _prefix+" "+_object.name );
		traceObjects( _object.children, _prefix + "\t" );
	}
}
 
function loader_completeHandler( _event:Event ):void
{
	traceObjects( _loader.objects );
}
 

The trace output from the function above would look something like the below:

 districts for BSI
	 kangaroo ground
	 kinglake west
	 kinglake
	 ...

There is an example usage of the class in the svn, gmaps/examples/kmlloader/. It will load the kml file shown in the image above.

We've also added some Kml editing and saving tools into the svn which we'll leave those for the subject of another post but feel free to check out the code.

Lately we have been playing around a fair bit with some google flash maps and have been amazed by the power and simplicity of the API. We used it heavily in the ABC Black Saturday site using custom markers with images and even a scrolling grid.

We were faced with another challenge of being able to mark out areas (districts) within Victoria that represented the most affected regions. These regions were sometimes complex and we needed to be able to update them simply and quickly as the need arose. The regions weren't to be displayed directly but used for two major items. Firstly to focus the map on a particular region, by moving the view to the region contained by these districts, and secondly, to assign events/markers to a district by calculating if they were contained within the bounds of the district lines.

The solution ended up being ridiculously simple. We created a shared map on google maps, with shapes defining the districts. We then could export from this online map to kml by grabbing the view in Google Earth link and changing the output parameter from nl to kml. This gave us the map of the districts in a nice kml format.

Once we had the map in kml we needed to load in the objects and create overlays for google maps. Surprisingly there wasn't a simple "load kml" function in google maps, but there are some nice kml parsing utilities in the google map extras library. So we created a kml loader class that loads the kml file, extracts the objects and creates overlays for placement on a google map. Hopefully it can be helpful to others, check it out from the following:

svn co http://svn.distriqt.com/public/trunk/gmaps


Usage:

Firstly create the loader and start the load of your kml file. You'll need to add a listener to the COMPLETE event to process the code on completion.

import com.distriqt.gmaps.kml.utils.*;
 
var kmlLoader:KmlLoader = new KmlLoader();
kmlLoader.addEventListener( Event.COMPLETE, kmlLoader_completeHandler );
kmlLoader.load(  "your-kml-file-location.kml" );

Once the loading is complete you'll have to re-curse through the object list in the loader, adding the objects to your map. Note the "map" variable in the below should be your google map instance.

function kmlLoader_completeHandler( _event:Event ):void
{
	for each (var _object:KmlDisplayObject in KmlLoader(_event.currentTarget).objects)
		addObject( _object );
}
function addObject( _object:KmlDisplayObject ):void
{
	// It may just be a container with child elements
	//    so check if there is an overlay
	if (_object.overlay != null)
	{
		// Here you can add the kml object to your map
		map.addOverlay( _object.overlay );
	}
	// Add the children
	for each (var _child:KmlDisplayObject in _object.children)
		addObject( _child );
}

Let us know if you find it useful.

Our first major project, ABC Black Saturday Interactive, went live yesterday!

"It pulls together hundreds of pieces of media – professionally produced media, official documents and records and the best user generated content – to provide a stunning insight into the fires and the people who lived through them. An interactive map and timeline allow you to explore the events through time and location, and a series of dramatic video portraits provide a moving insight into the personal experiences of some survivors."

This project has been a great experience, and we're really happy with the end product. The site pulls together a heap of media data such as video, audio, imagery and news content from a multitude of sources and combines it into a great interactive experience. The Google Maps API also provided us with a really interesting way of exploring the data visually based on the time and location of every media item and story.

Huge thanks go to the ABC Innovation Department, the producer Priscilla Davies, designers Bec Smith and Sarah Fawcett, and everyone else who contributed to the project - it was a great team to work with.

We're really proud to see this online so please go and check it out and explore the site!

Black Saturday Interactive