Titanium Geolocation Not Working in Android Emulator - javascript

I get this error:
[ERROR][GeolocationModule( 278)] (KrollRuntimeThread) [633,2564] Unable to get current position, location is null
and I have followed other people's advice without any luck.
Could someone lead me in the right direction? I would be so grateful. Thank you!
var win1 = Titanium.UI.createWindow({
title : 'map_landing',
backgroundColor : '#fff'
});
var win2 = Titanium.UI.createWindow({
title : 'hails_window',
backgroundColor : '#fff'
});
var win3 = Titanium.UI.createWindow({
title : 'cabs_window',
backgroundColor : '#fff'
});
User = {
location : {}
};
var hail_button = Titanium.UI.createButton({
title : 'Hail Cab',
top : 10,
width : 200,
height : 50
});
var find_button = Titanium.UI.createButton({
title : 'Find People',
bottom : 10,
width : 200,
height : 50
});
var options = {
accessKeyId : '',
secretAccessKey : ''
}
Ti.Geolocation.purpose = "Receive user location";
Titanium.Geolocation.getCurrentPosition(function(e) {
if (e.error) {
alert('HFL cannot get your current location');
return;
}
User.location.longitude = e.coords.longitude;
User.location.latitude = e.coords.latitude;
User.location.accuracy = e.coords.accuracy;
User.location.speed = e.coords.speed;
User.location.timestamp = e.coords.timestamp;
var mapview = Titanium.Map.createView({
mapType : Titanium.Map.STANDARD_TYPE,
region : {
latitude : User.location.latitude,
longitude : User.location.longitude,
latitudeDelta : 0.01,
longitudeDelta : 0.01
},
animate : true,
regionFit : true,
userLocation : true
});
win1.add(mapview);
win1.add(hail_button);
win1.add(find_button);
hail_button.addEventListener('click', function(e) {
alert('hello');
$.ajax('http://hail.pagodabox.com/add_hail', {
type : 'POST',
lat : User.location.latitude,
lang : User.location.longitude,
success : function(response) {
alert(response)
}
})
});
find_button.addEventListener('click', function(e) {
});
win1.open();
});

It took me some time to track this down, but I think I've found the steps needed to "fix" the lack of a location in the Android emulator (from this answer):
First, open ddms (Dalvik Debug Monitor). On Windows, navigate to the
android-sdk\tools directory and run ddms.bat. The first line in the
top-left pane will read something like "emulator-####" such as
emulator-5560.
Open a command prompt window. Enter 'telnet localhost ####'
substituting the number you found above. This will open a telnet
window to your android emulator.
Enter the following command (substitute your own longitude & latitude,
in that order, if you'd like):
geo fix -82.411629 28.054553
(I'm pretty sure you can add elevation as a third number.) The GPS
icon will appear in the emulator's notification bar. Geolocation is
now available. At this point, I could get location data in my app and
in other apps, such as Maps.

Related

How to add a icon to cesium map instead of point

I want to add icon to a cesium map intead drawing a point.
Currently I doing the below code, but want to replace the point below with an actual icon. I have been looking through the cesium documentation and cannot find anything that will do this. Thanks for any suggestions
var points = scene.primitives.add(new Cesium.PointPrimitiveCollection());
points.add({
position : new Cesium.Cartesian3.fromDegrees(longitude, latitude),
color : colorDot,
outlineColor : Cesium.Color.WHITE,
outlineWidth : width
});
In Cesium, this is called a billboard. They are created in basically the same way as a point, except the image is generally loaded from a URL.
https://cesiumjs.org/Cesium/Build/Documentation/BillboardCollection.html
// Create a billboard collection with two billboards
var billboards = scene.primitives.add(new Cesium.BillboardCollection());
billboards.add({
position : new Cesium.Cartesian3(1.0, 2.0, 3.0),
image : 'url/to/image'
});
billboards.add({
position : new Cesium.Cartesian3(4.0, 5.0, 6.0),
image : 'url/to/another/image'
});
Adding to #paraquat's correct answer about Billboards: Cesium includes a "Pin Builder" that can be used to make typical map icons as billboards. Here's a demo.
var viewer = new Cesium.Viewer('cesiumContainer');
var pinBuilder = new Cesium.PinBuilder();
var url = Cesium.buildModuleUrl('Assets/Textures/maki/grocery.png');
var groceryPin = Cesium.when(pinBuilder.fromUrl(url, Cesium.Color.GREEN, 48), function(canvas) {
return viewer.entities.add({
name : 'Grocery store',
position : Cesium.Cartesian3.fromDegrees(-75.1705217, 39.921786),
billboard : {
image : canvas.toDataURL(),
verticalOrigin : Cesium.VerticalOrigin.BOTTOM
}
});
});

Toast implementation in Sencha Touch

I am working in a Sencha Touch app with different Toasts to show messages like "successful" or "info" etc.. but I am having random behavior, for example:
1º if you navigate for the application tapping in a one action with Toast and you navigate to other screen while Toast is up, toast has a random behavior getting the last color instead of change..( in the test case with the same color but with different message, please you can read the code)
2º Sometimes Toast is not appearing and I do not have explanation.
Any suggestion about the code? currently it is a singleton class, and it is called from other parts/controllers of the app depending the action.
On the other hand, any other approach with a similar behavior? maybe it is needed to change the strategy and no use Toasts..
It is happening in Windows 8 and iOS and I am using 2.4.1 version, reading the release notes of 2.4.2 has not news about this element of the framework, and I guess is not relevant to update to the latest framework version.
Here my Toast Manager class:
/**
* Loading popup as a static-functions class
*
* Different toast-messages colors:
* 0 --> green
* 1 --> orange
* 2 --> red
*
* We create a config object and depending of the status we show a Toast
*/
Ext.define('xx.view.components.ToastManager', {
singleton : true,
requires : [
'Ext.Toast'
],
config : {
toastOptions: {
message : '',
centered : false,
width : 200,
height : 100,
bottom : '10%',
modal : false,
right : 10,
style : '',
type : 'slide', duration: 850, easing: 'ease-out',
hideAnimation: {type: 'fadeOut', duration: 650, easing: 'ease-out'},
timeout : 3000
},
toastComponent : null,
t : null
},
constructor : function () {
this.initConfig();
},
changeVisibility: function() {
if(this.getT()) {
clearTimeout(this.getT());
}
var toastes = Ext.query('.x-toast');
for(var i = 0; i < toastes.length; i++) {
Ext.get(toastes[i]).setStyle('visibility', 'visible');
}
var t = setTimeout(function() {
var toastes = Ext.query('.x-toast');
for(var i = 0; i < toastes.length; i++) {
Ext.get(toastes[i]).setStyle('visibility', 'hidden');
}
}, 4000);
this.setT(t);
},
/**
* Shows a successful message
* #param label
* #param status
*/
showToastMessage : function (label, status) {
var options = this.getToastOptions();
options.message = label;
switch (status) {
case 0:
options.style = 'background-color: #30B420';
break;
case 1:
options.style = 'background-color: #FFA500';
break;
case 2:
options.style = 'background-color: #ff0000';
break;
default:
options.message = "?"
}
this.changeVisibility();
this.setToastComponent(Ext.toast(this.getToastOptions()));
}
});
I'm using this function for my toast messages (in ExtJS though):
showToastMessage: function(message, alignTo){
Ext.toast({
cls: 'toast-window',
header: false,
html : '<div class="toast">' + message + '</div>',
animate: true,
slideInAnimation: 'ease',
slideInDuration: 300,
slideOutDuration: 200,
autoCloseDelay: 1500,
align: alignTo ? alignTo : 't'
});
}
You can apply some css to toast-window and toast classes to make you message look nice.
You just pass your message to this function and it should show a nice toast!

Leaflet single picture

I am currently doing an internship and they asked me to use a Parking map picture (.jpg) on Kibana bettermap. Bettermap is using Leaflet, and I found where I could change the picture link:
function e() {
b.css({
height : a.panel.height || a.row.height
}),
a.require(["./leaflet/plugins"], function () {
a.panelMeta.loading = !1,
d.Icon.Default.imagePath = "app/panels/bettermap/leaflet/images",
c.isUndefined(f) ? (f = d.map(a.$id, {
scrollWheelZoom : !1,
center : [40, -86],
zoom : 10
}), d.tileLayer("**http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpg**", {
attribution : "Data, imagery and map information provided by MapQuest, OpenStreetMap <http://www.openstreetmap.org/copyright> and contributors, ODbL",
maxZoom : 18,
minZoom : 2
}).addTo(f), g = new d.MarkerClusterGroup({
maxClusterRadius : 30
})) : g.clearLayers();
var b = [];
c.each(a.data, function (a) {
b.push(c.isUndefined(a.tooltip) || "" === a.tooltip ? d.marker(a.coordinates) : d.marker(a.coordinates).bindLabel(c.isArray(a.tooltip) ? a.tooltip[0] : a.tooltip))
}),
g.addLayers(b),
g.addTo(f),
f.fitBounds(c.pluck(a.data, "coordinates"))
})
}
The problem is that Leaflet is made so you have a lot of pictures making a Tile. What I would like to do is to simply use one picture, and when I change the path to my picture I am obviously getting a Tile of my only one picture.
Anyone got an idea on how I could simply use one local picture on Leaftlet ?
Thanks a lot in advance.
Use a L.ImageOverlay. You can check some of the Leaflet code examples to see how it works.

Google Maps v3 sync and update markers

I spent this morning searching something simple but same time flexible to use for courier delivery like small companies or groups / to organize them selves and order/destinations in a map. While I gave up for searching after few hours going through trillion posts :) and reviewing many commercial software's. I spent last hour making my own and got my self working application however many questions raised in my mind so I was thinking to start opensource project of it and with this short intro and following code to share it with you guys, hoping that perhaps I find some good answers or great ideas. How to make it efficient to use on any browser, any device including over Mobile Internet . :).
I'm stuck with finding proper way how to keep map up to date basically in real-time.
setInterval!? Anyhow all my browsers freeze and stop updating after some period of time while I expect it to run 24/7/365 if needed. I would really appreciated if somebody can lead me at least right direction to make this sync more stable.
thanks advance!
Clobal Gonfig
/***********************************
* Config
************************************/
/* Master Server */ var master_server = {
url : 'https://0.0.0.0/',
status : false,
connectionFail : "Connection to Master Server Failed"
}
/* Slave Server */ var slave_server = {
url : 'https://0.0.0.0/',
status : false,
connectionFail : "Connection to Slave Server Failed"
}
/* Sync controller */ var sync_controller = '/datasync/';
/* Sync actions */
var sync_action = {
updateLatLng : 'updatewithgeo/'
}
/***********************************/
var car = false;
var order = false;
var order_icon = "static_icon.png";
var customMsg = {
PositionFail : "Because Default lat lng and getCurrentPosition are not set app will not try to sync! It will try again shotwhile"
}
// Can define default lat lng
var lat = false;
var lng = false;
/***********************************/
App
function syncData()
{
//Temporarly clearing markers to avoid marker[$i] to be duplicated if position is changed
if(markers){$('#map_canvas').gmap('clear', 'markers');}
// Exhange data with server
$('#map_canvas').gmap('getCurrentPosition', function(position, status) {
if ( status === 'OK' ) {
lat = position.coords.latitude;
lng = position.coords.longitude;
}
if (!lat){
console.log(customMsg.PositionFail);
setTimeout('syncData()', 10000);
throw new Error(customMsg.PositionFail);
return;
}
$.post(master_server.url+sync_controller+sync_action.updateLatLng, {latlng : lat+"#"+lng}, function(data, Server_1_Status) {
if(Server_1_Status != 'OK')
{
// If request to master server then here would be place to connect to slave server(s)
console.log(master_server.connectionFail);
setTimeout('syncData()', 10000);
throw new Error(master_server.connectionFail);
return;
}
// If there is no errors
$.each( data.couriers, function(i, courier) {
// If markers are identified correctly when they are returned from server
// then addMarker should only add new markers and
// existing markers shuld be updated (setPosition)
$('#map_canvas').gmap('addMarker', {
'position': new google.maps.LatLng(courier.latitude, courier.longitude),
'bounds': true,
'icon' : courier.icon,
'title' : courier.name
}).click(function() {
$('#map_canvas').gmap('openInfoWindow', { 'content': courier.content }, this);
});
});
$.each( data.orders, function(i, order) {
$('#map_canvas').gmap('addMarker', {
'position': new google.maps.LatLng(order.latitude, order.longitude),
'bounds': true,
'title' : order.address,
'icon' : ""
}).click(function() {
// Populating order view and forms to take / confirm delivery and send digital signature
$('#OrderViewTitle').html('<h1>'+order.orderID+order.address+'</h1>');
$('#OrderData').html('<p><b>'+order.customerID+'</b><br><b>Order:</b>'+order.salesorder+'</p>');
document.getElementById('TakeDelivery').value = order.orderID;
document.getElementById('DeliveryComplete').value = order.orderID;
$('#OrderView').popup("open");
});
});
}, "json");
$('#map_canvas').gmap('refresh');
setTimeout('syncData()', 10000);
});
}
$(document).ready(function() {
courierApp.add(function() {
$('#map_canvas').gmap().bind('init', function() {
syncData();
});
}).load();
});

TinyMce imagemanager won't generate image path when used with an iframe

I have successfully setup tinymce to work on a page within an iframe. Everything works perfectly.
However, when you use imagemanager to pick an image to be inserted or replaced in the editor it will not copy the path(and filename) of the image to the "Image URL" input in the "Insert/edit image" box. The box will either remain empty or keep the address of the previous image.
The behaviour is the same with the filemanager plugin.
tinyMCE.init(
{
mode : "none",
editor_selector : "mceEditor",
theme : "advanced",
plugins : "filemanager,imagemanager,autoresize,safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,spellchecker",
theme_advanced_buttons1 : "insertfile,insertimage,advimage,imagemanager,bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,nonbreaking,cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist",
theme_advanced_buttons2 : "blockquote,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,|,forecolor,backcolor,|,charmap,iespell,media,advhr",
theme_advanced_layout_manager : "SimpleLayout",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,strikethrough",
theme_advanced_buttons4 : "styleselect,formatselect,fontselect,fontsizeselect,|,undo,redo,|,spellchecker",
theme_advanced_toolbar_location : "external",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
relative_urls : true,
document_base_url : "http://xxxxxxxxxxx.com/",
auto_resize : true,
content_css : "/custom/css/style.css",
extended_valid_elements : "iframe[height|width|src|frameborder|scrolling]",
});
/*
The following code comes from- http://tinymce.moxiecode.com/punbb/viewtopic.php?id=12966
Without it the editor only loads 10% of the time. With it, it's pretty much 100% consistent.
The other changes mentioned in the post have also been implemented.
*/
var setupTiny = function()
{
var ifrObj = document.getElementById('pageEditIFrame');
var win = ifrObj;
if (win.contentWindow)
{
win = win.contentWindow;
}
var d;
if(ifrObj.contentDocument)
{
d = ifrObj.contentDocument;
}
else if (ifrObj.contentWindow)
{
d = ifrObj.contentWindow.document;
}
else if (ifrObj.document)
{
d = ifrObj.document;
}
textAreas.each(function(txtEl)
{
tinyMCE.execCommand('mceAddFrameControl', false,
{
element_id : txtEl,
window : win,
doc : d
});
});
};
//Waiting 1 second seems to make the editor load more reliably.
setTimeout("setupTiny();",1000);
I ran across a similar issue that only shows up in more recent versions of Firefox - Chrome and IE work fine for me. Not sure if it is exactly the same problem (I'm not using iframes) but it presents in the same way.
Here's where I found my solution:
http://tinymce.moxiecode.com/punbb/viewtopic.php?id=23302
As you can read there, one of the coders for TinyMCE thinks its a bug in FF, though the fixes look more like it's tiny_mce assuming a bug still exists in Firefox that was fixed at some point in 3.5. Here's the solution that worked for me (quoted from the post):
1)
Go to tiny_mce.js
2)
Find this line: this.isGecko = ua.indexOf('Gecko') != -1;
under it add:
this.isGecko369 = (this.isGecko && ua.indexOf('irefox/3.6.')!= -1 && parseInt(ua.substr(ua.indexOf('irefox/3.6.')+11,2)) >= 9);
this.isGecko369 = (this.isGecko369 || (this.isGecko && ua.indexOf('irefox/3.5.')!= -1 && parseInt(ua.substr(ua.indexOf('irefox/3.5.')+11,2)) >= 9 ) );
3)
Find this line: fixGeckoBaseHREFBug : function(m, e, h) {
below that there is this line: if (tinyMCE.isGecko) {
alter it with: if (tinyMCE.isGecko && !tinyMCE.isGecko369) {

Categories

Resources