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

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 – 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


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

  Share Post


Comment by Paul Huxley

Hi Clive,
Thank you so much for posting up the details of this. We've recently purchased and installed Firefly so having this neat little feature is a great way to engage the Geography department.
I pasted in the code (above) as text into the code editor on a test page. It has the title and the frame but nothing within it. Would you have any idea what I might have done wrong?

Kind regards,


Comment by Simon Hay

Hi Paul,

If you get in touch with our support team and point us at your test page, we should be able to help you out!



Comment by Jan

Clive works very nice on html.
Slight problem with https
Changing first script link from http to https sorts the blank page loading problem. But there is no https feed coming from so we
we would have to load unsafe scripts (on https).
Unless there is a https feed?


Comment by Clive

Hi Jan

Firstly, I must sincerely apologise for such a delay in coming back - in truth, I have only just spotted the comments on the page; notification system failed me :(

I completely agree with your concern over mixed content on the page, and personally, I wouldn't accept this as a viable option, primarily because it could lead to a potential insecure leak in your https connection.

I suppose until start serving the data up over https, you are a bit stuck with regards to a client side solution. The only option as I see it, would be to proxy the request on the server, and then serve it up locally.

All good fun!

Many thanks


Comment by Clive

Hi Paul

As with Jan, I must apologise for not coming back any sooner!

I hope the chaps and chapesses at Firefly were able to help you out?

All the best.