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

Mashup with Yahoo Pipes

Following my previous post on Mashup, I will be documenting the steps to create a mashup using Yahoo Pipes. For those who never heard about Pipes, it is “a powerful composition tool to aggregate, manipulate, and mashup content from around the web.”

Yahoo provides the platform for anyone to create own pipes, all you need is Yahoo account and you can start piping. In this tutorial I will combine data from USGS and Yahoo Map to show recent earthquake around the world.

Step 1: Login to Yahoo Pipes

Step 2: On the top navigation bar. Click on the “Create a pipe” button/link

Yahoo Pipes Navigation
Yahoo Pipes Navigation

Step 3: Now you will see the pipes workspace. It looks like any IDE. On the left hand side, you will all the modules available and on the right hand side it is the canvas for development. All you need to do is drag -n-drop the require component and wire them together.

Yahoo Pipes IDE
Yahoo Pipes IDE

Step 4: Drag-n-drop the “Fecth Feed” module and enter the following URL: http://earthquake.usgs.gov/earthquakes/catalogs/shakerss.xml. Ignore the output pipe for now.

Add Fetch Feed Module
Add Fetch Feed Module

Step 5: If you look into the RSS content, you will find the geo-location for each of the earthquake data. In this step, I will use “Location Extractor” module to extract the geo-location. It is located in the “Operators” group.

Add Location Extractor
Add Location Extractor

Step 6: In Yahoo Pipes, once location extracted you can out the information for the pipes to automatically link it with Yahoo Map. Feature or limitation? up to you to decide :).  With all the necessary modules in place, all you have to do is wire then together.

Wire all modules
Wire all modules

Step 7: You must save the newly created pipes before you are allowed to run it. Let’s name it “Earthquake Map by USGS”

Save & Run Pipe
Save & Run Pipe

Step 8: You will see the output from your pipe in a new screen. Yeah!! you’ve done it.

Output from Yahoo Pipes
Output from Yahoo Pipes

Anyway, this is just a simple pipe. You can see what other has created, some are simple, some are complex… some are very complex. It is really up to you and your creativity to combine various module and create new service.

So, you may ask “what can I do with the pipe?”

  1. You can publish it. It will be publicly available within the pipes communities.
  2. You can include it in your own site, by generating the badge. (see the script below below).
  3. You can add it to your “My Yahoo” or Google

Add this to your site/page to try it out.

<script src=”http://l.yimg.com/a/i/us/pps/mapbadge_1.1.js”&gt;{“pipe_id”:”48a0ce7eeece808ea6cece6bd70abc64″,”_btype”:”map”}</script>

Reference:

  • Yahoo Pipes
  • USGS – Earthquake Data

So, happy piping…. if you have created something in Yahoo Pipes, share with me via the comments box 🙂