View Full Version : Geotweets sample app

21 Oct 2011, 12:17 PM
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

22 Oct 2011, 2:24 AM
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="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>


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: '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

// 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();
xtype: 'button',
ui: 'mask',
iconCls: 'refresh',
dock: 'right',
stretch: false,
align: 'center',
handler: refresh