Results 1 to 2 of 2

Thread: Geotweets sample app

  1. #1
    Sencha User
    Join Date
    Oct 2011

    Default Geotweets sample app

    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

  2. #2
    Sencha User
    Join Date
    Oct 2011

    Default 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
    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>
    <meta charset="utf-8">

    <!-- 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=""></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>


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

    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">',

    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;

    url: '',
    callbackKey: 'callback',
    params: {
    geocode: coords.latitude + ',' + coords.longitude + ',' + '5mi',
    rpp: 30
    callback: function(data) {
    data = data.results;

    // Update the tweets in timeline

    // 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({
    position: position

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

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



Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts