Like many technically minded people, I subscribe to a variety of IT focussed information sources (RSS Feeds, Newsletters etc); one such newsletter being “Powertip of the day” from Powershell.com.

A recent “Powertip of the day” demonstrated how it was possible to query an online earthquake activity data resource, using PowerShell.  In truth, I didn’t have too much success with this particular example (the data wasn’t up-to-date), but crucially, it set me thinking that this could be an excellent resource for a Geography department, especially when using Firefly.

I love the way the modern web enables, and encourages integration of information from various web services and resources – in my opinion, this is one of the more exciting areas of web technology.

I eventually found a more reliable service for supplying earthquake data, namely earthquake.usgs.gov – better still, they have an api!  There is also no shortage of examples on how to query the USGS data, so it wasn’t too difficult to beg, borrow and manipulate code, to fit the purpose.


This is what I created

Map


And this is how I did it

It will come as no surprise, that Google Maps is involved Smile

So firstly, we need to import/link to the Maps API – this is as simple as adding the below script tag.

We then have a small JavaScript function designed to initialize the map and setup some configuration options (map style, zoom level etc).  This is also where we connect to the USGS data, by injecting an appropriate script tag into the head.

Arguably, the bulk of the work is then carried out here.  In short, it enumerates through the data, plotting as required onto the Google Map.  There is also a “most recent” list which sits just below the map – this list, is set to only display the most recent 10 events, whilst the map will plot ALL events (in the past 24 hours).

We then add a couple of further functions, primarily designed to “paint” the pretty circles and provide a neater “time” display –  all polished off with a window load event (which basically fires the “initialize” function above, on page load).

Add some styling to the map (nice drop shadow and rounded corners etc).

…and of course the actual html!

There you go – earthquakes on a Firefly VLE page – a New Year’s gift for any Geography department Open-mouthed smile


Complete code to paste into a Firefly component