1. 21 Oct 2011 12:17 PM #1
    speyyety
    speyyety is offline
    Sencha User
    Join Date
    Oct 2011
    Posts
    5
    Vote Rating
    0
    speyyety is on a distinguished road
      0  

    Default Geotweets sample app

    Geotweets sample app


    Hi,
    I did what exactly was recommended in html and javascript.
    however it did not work.
    even a simple application sample application for showing a message when the app started
    did not work. i must be doing something wrong
    i copied the touch library
    i have index.html,
    app.js in the root directory
    i adjusted html file to reflect the scenario.
    what does '.' in the mean, i would think it is the root directory of app.
    i know that i am definitely missing some thing.can anyone help with this
    Reply With Quote Reply With Quote
  2. 22 Oct 2011 2:24 AM #2
    speyyety
    speyyety is offline
    Sencha User
    Join Date
    Oct 2011
    Posts
    5
    Vote Rating
    0
    speyyety is on a distinguished road
      0  

    Default Geotweets app code

    Geotweets app code


    i thought that i might get help by specifying the config and code that i used to figure out what i have been doing wrong. i do see blank screen when i access this application
    can you pl let me know what i am doing wrong
    thanks
    in the root folder i have a folder 'touch' which contains the touch library.

    the html in root directory contains 2 files
    1) index.html
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>GeoTweets</title>


    <!-- Sencha Touch CSS -->
    <link rel="stylesheet" href="C:/xampp/htdocs/Geotweets/touch/resources/css/sencha-touch.css" type="text/css">


    <!-- Custom CSS -->
    <link rel="stylesheet" href="C:/xampp/htdocs/Geotweets/touch/css/guide.css" type="text/css">


    <!-- Google Maps JS -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>


    <!-- Sencha Touch JS -->
    <script type="text/javascript" src="C:/xampp/htdocs/Geotweets/touch/sencha-touch-debug.js"></script>


    <!-- Application JS -->
    <script type="text/javascript" src="C:/xampp/htdocs/Geotweets/index.js"></script>




    </head>
    <body></body>
    </html>

    2. script file
    <script type="text/javascript">


    Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {
    var timeline = new Ext.Component({
    title: 'Timeline',
    cls: 'timeline',
    scroll: 'vertical',
    tpl: [
    '<tpl for=".">',
    '<div class="tweet">',
    '<div class="avatar"><img src="{profile_image_url}" /></div>',
    '<div class="tweet-content">',
    '<h2>{from_user}</h2>',
    '<p>{text}</p>',
    '</div>',
    '</div>',
    '</tpl>'
    ]
    });


    var map = new Ext.Map({
    title: 'Map',
    getLocation: true,
    mapOptions: {
    zoom: 12
    }
    });


    var panel = new Ext.TabPanel({
    fullscreen: true,
    cardSwitchAnimation: 'slide',
    items: [map, timeline]
    });


    var refresh = function() {
    var coords = map.geo.coords;


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


    // Update the tweets in timeline
    timeline.update(data);


    // Add points to the map
    for (var i = 0, ln = data.length; i < ln; i++) {
    var tweet = data[i];


    // If the tweet is geo-tagged, use that to display marker
    if (tweet.geo && tweet.geo.coordinates) {
    var position = new google.maps.LatLng(tweet.geo.coordinates[0], tweet.geo.coordinates[1]);
    addMarker(tweet, position);
    }
    }
    }
    });
    };


    // These are all Google Maps APIs
    var addMarker = function(tweet, position) {
    var marker = new google.maps.Marker({
    map: map.map,
    position: position
    });
    };


    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
    });


    }
    });


    </script>
    2.index.js
    Reply With Quote Reply With Quote