Nearby Tweet (Makeover)

After spending my weekend reading Sencha Touch, I decided to do a bit of makeover for my “Nearby Tweet”. Sencha Touch kind of save me the time from learning the native mobile SDK like iOS or Andoid. It is using standards such as JavaScript, HTML 5 and CSS3, all I need to learn is the framework.

The previous version has a very important limitation which no geolocation, it is hardcoded to Singapore. Using the Geolocation feature in HTML 5, the application is now able to locate the user and mark the nearby tweets into the map. Another improvement is the use of “Tab Panel” to show both map and the tweets. Here is the screenshots:

So , how is it done?

Step 1: Include Sencha Touch CSS & JavaScript, Google Map API and own CSS & JavaScript.

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Nearby Tweets Mobile</title>
 <link rel="stylesheet" href="css/ext-touch.css" type="text/css">
 <link rel="stylesheet" href="css/NearByTweetsMobile.css" type="text/css">
 <script type="text/javascript" src="<a href="http://maps.google.com/maps/api/js?sensor=true">http://maps.google.com/maps/api/js?sensor=true</a>"> </script>
 <script type="text/javascript" src="js/ext-touch.js"> </script>
 <script type="text/javascript" src="js/NearByTweetsMobile.js"> </script>
</head>
<body> </body>
</html>

Step 2: Implement the JavaScript for loading the UI, getting the Tweets and marking it on the map. There no change to the code that add marker and get location from previous implmentation.

Ext.setup({
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {
      // nbTweets - tweet list. Using Template to generate the html.
        var nbTweets= new Ext.Component({
            title: 'Nearby Tweets',
            scroll: 'vertical',
            tpl: [
                '<tpl for=".">',
                    '<div>',
                            '<div><img src="{profile_image_url}" /></div>',
                            '<div>',
                                '<h2>{from_user}</h2>',
                                '<p>{text}</p>',
                                '<p>{location}</p>',
                            '</div>',
                    '</div>',
                '</tpl>'
            ]
        });

        var map = new Ext.Map({
            title: 'Map',
            getLocation: true,
            mapOptions: {
                zoom: 12,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
        });
       
    var geocoder = new google.maps.Geocoder();

    // Create tab panel for the map and tweet list timeline
        var panel = new Ext.TabPanel({
            fullscreen: true,
            animation: 'slide',
        ui: 'light',
            items: [map, nbTweets]
        });

    // handler for refresh button    
        var refresh = function() {
            var coords = map.geo.coords; // get user geolocation

            Ext.util.JSONP.request({
                url: 'http://search.twitter.com/search.json',
                callbackKey: 'callback',
                params: {
                    geocode: coords.latitude + ',' + coords.longitude + ',' + '10km',
                    rpp: 30
                },
                callback: function(data) {
                    data = data.results;

                    // Update the tweets in nbTweets
                    nbTweets.update(data);
                    // Add points to the map
                    for (var i = 0, ln = data.length; i < ln; i++) {
                        var tweet = data[i];
                        getTweetLocation(map, geocoder, tweet);
                    }
                }
            });
        };

        map.geo.on('update', refresh);

        var tabBar = panel.getTabBar();
        tabBar.addDocked({
            xtype: 'button',
            ui: 'mask',
            iconCls: 'refresh',
            dock: 'right',
            stretch: false,
            align: 'center',
            handler: refresh
        });

    }
});

// These are all Google Maps APIs
function getTweetLocation(map, geocoder, tweet) {
 // insert the code to get tweet location either from the geotag or tweet.location
    if (tweet.geo && tweet.geo.coordinates) {
        var position = new google.maps.LatLng(tweet.geo.coordinates[0], tweet.geo.coordinates[1]);
    addMarker(map, position, tweet);
    } else {
    var geocode = tweet.location.split(": ",2);
    var addr = geocode[1];
    if (addr == undefined) addr = tweet.location;
      if (geocoder) {
        geocoder.geocode( { 'address': addr }, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
           addMarker(map, results[0].geometry.location, tweet);
          } else {
            //alert("Geocode was not successful for the following reason: " + status);
          }
        });
      }
    } // end if tweet.geo
} // end addMarker
       
function addMarker(map, position, tweet) {
 // insert the code to add marker to map.
} // end addMarker

So far, I have tested in iPhone Safari (on iOS4) and it works fine. Not sure how it performs in Android yet. One thing to note is the mobile browser must support HTML 5. 🙂 If you try the links below on Android, drop me a comment whether or not it works and what Android version you are using.

Nearby Tweets Mobile: http://www.wswijaya.com/prototype/NearByTweetsMobile.php

Sencha Touch Version: 0.91 (public beta)

Advertisements

17 thoughts on “Nearby Tweet (Makeover)”

    1. yeah, turn out it cannot get the geolocation. i tried map.google.com and click “show my location” button and i encountered error “Your location could not be determined”. hmm is it safari defect? may be i will do some digging around first.

  1. Have you ever thought about including a little bit more than just your articles?
    I mean, what you say is valuable and everything. However imagine if you added some great visuals or videos to give your posts more, “pop”!
    Your content is excellent but with pics and clips, this blog could undeniably be one of the greatest in
    its field. Fantastic blog!

  2. Don’t leave the group to go home or out alone with your date. If you site do not do check the criminal records out then you may have to personally check that out yourself so as to know criminal status of your new date. If you want to form a loving, trusting relationship with someone, you must be completely honest.

  3. This brings us to the fundamental question: what is SEO.
    So, there continues to be no use in releasing a website that is not
    considered by the most targeted visitors. So many people
    set up their shop and then sit back and wait for
    people to find them.

  4. Hmm is anyone else experiencing problems with the pictures on this blog loading?
    I’m trying to determine if its a problem on my end or if it’s the blog.
    Any responses would be greatly appreciated.

  5. Nice blog here! Also your web site loads up fast!
    What host are you

    using? Can I get your

    associate link in your

    host? I want my site loaded up as fast as yours lol

  6. Do you mind if I quote a couple of your posts as long as I provide credit and sources back to your webpage?
    My blog site is in the very same niche as yours and my users would certainly benefit from a lot of the information you provide here.
    Please let me know if this okay with you. Thanks a lot!

  7. When I initially commented I clicked the “Notify me when new comments are added”
    checkbox and now each time a comment is added I get several
    emails with the same comment. Is there any way
    you can remove people from that service? Thank you!

  8. I have loaded your website in 3 totally different browsers and I must say this website
    loads a lot quicker then most. Would you mind contacting me the company name of your web hosting company?
    My personal email is: deloris.desjardins@gmail.com. I’ll even sign up through your affiliate link if you’d like.
    Thanks

  9. Write more, thats all I have to say. Literally, it seems as though you relied on
    the video to make your point. You definitely know what youre
    talking about, why waste your intelligence on just posting videos
    to your blog when you could be giving us something informative to read?

  10. Hello! I know this is kinda off topic however I’d figured I’d ask.
    Would you be interested in exchanging links or maybe guest authoring a blog article or vice-versa?

    My site goes over a lot of the same subjects as yours and I believe we could
    greatly benefit from each other. If you happen to be interested feel free
    to shoot me an email. I look forward to hearing from you!
    Awesome blog by the way!

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