USGS Earthquakes Map for Mobile

Another good example of how fast and easy it is to develop a mobile application using Sencha Touch. I spent 2 nights and finally get it up and running. It is a very simple application that read feed from USGS feed and plot the earthquake location into Google Maps. For this application, I used the “kitchen sink” example as the base. It is a really good example to start with. The UI implementation allows the apps to run both on desktop (on HTML5 ready browser) and mobile without compromising the look and feel. See the screenshot below. The mobile version has the iPhone UI touch 🙂

I did encounter one problem during the implementation. The USGS data is in XML format, so I tried using the XMLReader provided in Ext. Somehow, I keep getting error from the XMLReader saying I am accessing property (totalProperty) on undefined object. Not sure whether or not it is a bug. Thanks to YQL, I converted the XML feed to JSON. The SQL like syntax looks friendly, see below

var makeAjaxRequest = function() {
var params = {
rssUrl: 'http://earthquake.usgs.gov/earthquakes/catalogs/shakerss.xml'
};
var usgsRssQuery = new Ext.Template('select * from rss where url="{rssUrl}"');
var query = usgsRssQuery.applyTemplate(params);

Ext.util.JSONP.request({
url: 'http://query.yahooapis.com/v1/public/yql',
callbackKey: 'callback',
params: {q: 'select * from rss where url="<a href="http://earthquake.usgs.gov/earthquakes/catalogs/shakerss.xml&quot;'">http://earthquake.usgs.gov/earthquakes/catalogs/shakerss.xml"'</a>, format: 'json'},
callback: function(data) {
// Process feed data.
}
});
}

The apps UI comprise of 2 part, first is the list that display the feed data and second is the panel that display the map. The main UI is based on the nested lists components and using onListChange event to handle touch or click on the data item. Here is the setup

this.navigationPanel = new Ext.NestedList({
items: this.navigationItems || [],
dock: 'left',
width: 250,
height: 456,
hidden: !Ext.platform.isPhone && Ext.orientation == 'portrait',
toolbar: Ext.platform.isPhone ? this.navigationBar : null,
listeners: {
listchange: this.onListChange
,scope: this
}
});
var pos=new google.maps.LatLng(feedArray[i].lat, feedArray[i].long);
var desc = feedArray[i].description;
var map = new Ext.Map({
title: i,
markerDesc: desc,
markerPos: pos,
mapOptions: {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
,center: pos
},
listeners: {
delay: 500,
afterrender: function(){
addMarker(this.map, this.markerPos, this.markerDesc);
}
}
});
var panel = new Ext.Panel({
items: [map]
});

Similar to the Nearby Tweet, I couldn’t test it on Android. If you do try it on android, drop a comment and share whether or not it works. To try the apps visit http://bit.ly/a7KJj4

Note: For desktop, try on HTML5 ready browser. I used Chrome to test it out.

Update: See the updated version implemented using MVC here.

Advertisements

5 thoughts on “USGS Earthquakes Map for Mobile”

  1. I rarely leave a response, however after reading a few of the
    remarks on this page USGS Earthquakes Map for Mobile | XaaB – Anything as a Blog.
    I do have 2 questions for you if it’s allright. Is it only me or does it seem like some of these comments appear as if they are coming from brain dead people? 😛 And, if you are writing at other online sites, I’d like to keep up with you.
    Could you make a list of the complete urls of all your shared pages like
    your Facebook page, twitter feed, or linkedin profile?

  2. I’m extremely impressed with your writing skills as well as with the layout on your weblog. Is this a paid theme or did you customize it yourself? Either way keep up the nice quality writing, it is rare to see a nice blog like this one these days.

  3. Yesterday, while I was at work, my sister
    stole my iPad and tested to see if it can survive a 40 foot drop, just so
    she can be a youtube sensation. My apple ipad is now broken and she has
    83 views. I know this is completely off topic but I had to share it with someone!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s