appcelerator titanium map error - android

I've been tasked with adding a map to my appcelerator project. I have tried the alloy way (since I'm using alloy in the project). That apparently doesn't work and its been suggested that I create the map in the controller. I have done that below and the call to the map is triggered by an onclick function attached to an icon on the primary window. This seems to work on iOS but causes the app to crash on Android (using a samsung note)
function openMap(){
alert(alertString);
//var map = Alloy.createController('map');
//$.map.show();
//add alert location here -- get the data from the push message that comes in
var payload = Ti.App.Properties.getString("latest_buddy_alert","empty");
if (payload != "empty"){
var messageDetails = parsePushMessage(payload);
}
opera = mapview.createAnnotation({
latitude: messageDetails['lat'], // 43.7000,
longitude: messageDetails['lng'], // 79.4000,
title: alert,
pincolor:Map.ANNOTATION_RED,
});
var winMap = Titanium.UI.createWindow({
title:'Buddy Location',
BackgroundColor:'#fff'
});
var mapview = Titanium.Map.createView({
mapType: Titanium.Map.STANDARD_TYPE,
region: {latitude:lat, longitude:lon, latitudeDelta:0.01, longitudeDelta:0.01},
animate:true,
regionFit:true,
userLocation:true
,annotations: [opera]
});
winMap.add(mapview);
winMap.open();
Titanium.Geolocation.getCurrentPosition(function(e) {
if (e.error) {
Ti.API.log('error: ' + JSON.stringify(e.error) );
return;
}
var region = {
latitude:e.coords.latitude,
longitude:e.coords.longitude,
animate:true,
latitudeDelta:0.04,
longitudeDelta:0.04
};
mapview.setLocation(region);
});
}
As mentioned above, this creates an error which crashes the app:
Location[1,1] undefined
uncaught syntaxerror: unexpected token u
source: undefined
This is totally unhelpful, since I don't use a token 'u' or variable 'u' anywhere in my code. I have used several variations on the code above, all giving the same error.
I have had some small success moving to a webview, which shows the map on apple, but not on android.
Any ideas?

Related

Ionic 2 / Ionic 3 : How to get current location of a device

None of the answers on stackoverflow worked for me. A lot of them are for Ionic 1 or those answers are deprecated or they are not working for android device.
I have seen a lot of solutions on stackoverflow about getting current location of device but non of them seems to be working for Android .
what i have tried:-
using geolocation.getCurrentPosition() , which is working for IOS and browser but not for Android.
using this.geolocation.watchPosition() , which is working for IOS and browser but not for Android.
using navigator.geolocation.getCurrentPosition(),which is working for IOS and browser but not for Android.
using fiddle solution provided by this question getCurrentPosition() and watchPosition() are deprecated on insecure origins
Anyway , all of these are deprecated by google due to :-
getCurrentPosition() and watchPosition() are deprecated on insecure
origins, and support will be removed in the future. You should
consider switching your application to a secure origin, such as HTTPS.
See goo.gl/rStTGz for more details.
what worked for me is (https://ionicframework.com/docs/native/background-geolocation/ ) & (https://www.joshmorony.com/adding-background-geolocation-to-an-ionic-2-application/ ) both of these are based on background-geolocation plugin but,it's taking almost 50-55 sec on Android device, again it's working fine for ios
The problem with joshmorony(https://www.joshmorony.com/adding-background-geolocation-to-an-ionic-2-application/ ) solution is foreground is not working for Android physical devices but working fine for browser and ios. Background tracking is working fine , which is taking almost 50 sec to give lat & lng for the first time.
Please help me with this. I want a way to get current location in minimum time. For your info, I am using google javascript map sdk / api .
I tried every solution provided by all of you and others also on internet. Finally i found a solution.You can try this plugin cordova-plugin-advanced-geolocation (https://github.com/Esri/cordova-plugin-advanced-geolocation ) from ESRI . But this plugin will work for Android not IOS. For ios you can go with same old approach . i.e - using this.geolocation.getCurrentPosition(...) or this.geolocation.watchPosition(..).
Add cordova-plugin-advanced-geolocation Plugin Like this :-
cordova plugin add https://github.com/esri/cordova-plugin-advanced-geolocation.git
then Add below line at the top of Class / Component
declare var AdvancedGeolocation:any; //at the top of class
Now add these lines inside relevant function of component ( P.S. - I have included code for both Android & IOS)
//**For Android**
if (this.platform.is('android')) {
this.platform.ready().then(() => {
AdvancedGeolocation.start((success) => {
//loading.dismiss();
// this.refreshCurrentUserLocation();
try {
var jsonObject = JSON.parse(success);
console.log("Provider " + JSON.stringify(jsonObject));
switch (jsonObject.provider) {
case "gps":
console.log("setting gps ====<<>>" + jsonObject.latitude);
this.currentLat = jsonObject.latitude;
this.currentLng = jsonObject.longitude;
break;
case "network":
console.log("setting network ====<<>>" + jsonObject.latitude);
this.currentLat = jsonObject.latitude;
this.currentLng = jsonObject.longitude;
break;
case "satellite":
//TODO
break;
case "cell_info":
//TODO
break;
case "cell_location":
//TODO
break;
case "signal_strength":
//TODO
break;
}
}
catch (exc) {
console.log("Invalid JSON: " + exc);
}
},
function (error) {
console.log("ERROR! " + JSON.stringify(error));
},
{
"minTime": 500, // Min time interval between updates (ms)
"minDistance": 1, // Min distance between updates (meters)
"noWarn": true, // Native location provider warnings
"providers": "all", // Return GPS, NETWORK and CELL locations
"useCache": true, // Return GPS and NETWORK cached locations
"satelliteData": false, // Return of GPS satellite info
"buffer": false, // Buffer location data
"bufferSize": 0, // Max elements in buffer
"signalStrength": false // Return cell signal strength data
});
});
} else {
// **For IOS**
let options = {
frequency: 1000,
enableHighAccuracy: false
};
this.watch = this.geolocation.watchPosition(options).filter((p: any) => p.code === undefined).subscribe((position: Geoposition) => {
// loading.dismiss();
console.log("current location at login" + JSON.stringify(position));
// Run update inside of Angular's zone
this.zone.run(() => {
this.currentLat = position.coords.latitude;
this.currentLng = position.coords.longitude;
});
});
}
EDIT : First installation is always going fine. But Sometimes you might get errors for no reason in subsequent installations. To make this error (any error with this plugin ) go away.Follow these steps :
1. Remove this plugin from your project (including config.xml and package.json).
2. Delete/Remove android platform.
3. Delete plugins folder.
4. Now reinstall this plugin again, following the steps above.
I have gone through the problem and find the solution.
the best way to get geolocation of the user is to use this plugin https://ionicframework.com/docs/native/geolocation/
do not forget to add this is app.moudle.ts as its a provider.
by simply adding this code in app component i was able to get location( do not forget to import and add in constructor)
this.geolocation.getCurrentPosition({ enableHighAccuracy: true }).then((resp) => {
console.log(resp);
}, Error => {
console.log(Error);
}).catch(Error => {
console.log(Error);
})
i only have the same error while i was using ionic cordova run
android --livereload that is insecure origin
but when i use ionic serve i can see the response in browser and also after
using ionic cordova run android
just to confirm response in android i check the chrome debugger.
It works for me
import { Geolocation } from '#ionic-native/geolocation/ngx';
import { NativeGeocoder, NativeGeocoderOptions, NativeGeocoderResult } from '#ionic-native/native-geocoder/ngx';
geoencoderOptions: NativeGeocoderOptions = {
useLocale: true,
maxResults: 5
};
constructor(
private geolocation: Geolocation,
private nativeGeocoder: NativeGeocoder
) {
getCurrentLocation() {
this.geolocation.getCurrentPosition()
.then((resp) => {
this.getGeoencoder(resp.coords.latitude, resp.coords.longitude);
}).catch((error) => {
console.log('Error getting location', error);
});
}
//geocoder method to fetch address from coordinates passed as arguments
getGeoencoder(latitude, longitude) {
this.nativeGeocoder.reverseGeocode(latitude, longitude, this.geoencoderOptions)
.then((result: NativeGeocoderResult[]) => {
const address = this.generateAddress(result[0]);
})
.catch((error: any) => {
// alert('Error getting location' + JSON.stringify(error));
});
}
//Return Comma saperated address
generateAddress(addressObj) {
let obj = [];
let address = "";
for (let key in addressObj) {
obj.push(addressObj[key]);
}
obj.reverse();
for (let val in obj) {
if (obj[val].length)
address += obj[val] + ', ';
}
return address.slice(0, -2);
}
you need to provide the permission for Android app as follows:
<feature name="Geolocation">
<param name="android-package" value="org.apache.cordova.GeoBroker" />
</feature>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
I ran into a similar problem. When I build from the terminal with the --prod flag, I no longer see this error since it is now requesting position over https.
Built without --prod flag
Built using the --prod flag
Edit: Sorry for the format, I hope that this makes a little more sense. I used the following function in a service that I could call from anywhere to get the latitude, longitude, accuracy, and timestamp. The key though is using the --prod flag in the terminal when building the app.
this.geolocation.getCurrentPosition().then(position => {
let locationObj = {
lat: position.coords.latitude,
lon: position.coords.longitude,
timestamp: position.timestamp,
accuracy: position.coords.accuracy
};
resolve(locationObj);
})
this method is working for bot android and browser
watchLocation() {
this.watchLocationUpdates = this.geolocation.watchPosition({ maximumAge: 60000, timeout: 25000, enableHighAccuracy: true })
.subscribe(resp => {
this.latitude = resp.coords.latitude;
this.longitude = resp.coords.longitude;
this.altitude = resp.coords.altitude;
this.accuracy = resp.coords.accuracy;
this.altAccuracy = resp.coords.altitudeAccuracy;
this.heading = resp.coords.heading;
this.speed = resp.coords.speed;
this.timestamp = new Date(resp.timestamp);
});
}
I found solution for me: use google api https://www.googleapis.com/geolocation/v1/geolocate?key={API_KEY}
If platform Android I use google api.

Map doesn't work on device

I spent a lot of time trying to figure this out.
I have a map on my application and this map loads the actual location once it is loaded.
For some reason on my viewer (using Ionic Viewer) it works on my local device and on my localhost, but When I test it on my iPhone directly from Xcode, the map don't load.
If I compile an .apk and test it on android, the map don't load either.
.controller('mapaCtrl', function($scope, $compile, $location) {
$scope.goPayment = function() {
$location.path('side-menu/history');
};
var myLatlng = new google.maps.LatLng(34.603711, -58.381585);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
navigator.geolocation.getCurrentPosition(function(pos) {
map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
var myLocation = new google.maps.Marker({
position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
map: map,
title: "My Location"
});
google.maps.event.addListener(myLocation, 'click', function() {
infowindow.open(map,myLocation);
});
});
var contentString = "<div><a ng-click='clickTest()'>Pagar Aqui!</a></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
$scope.map = map;
$scope.clickTest = function() {
$location.path('side-menu/pay');
};
})
Any clue?
There may be several things affecting the proper functionality of your app, consider the following:
There could be an issue where the requests to google maps are blocked. Check out the whitelist plugin: https://stackoverflow.com/a/29896923/1956540
Try adding geoLocation permissions, here is an article I found that walks you through the whole thing: http://www.gajotres.net/using-cordova-geoloacation-api-with-google-maps-in-ionic-framework/
It is also important to wrap geolocation code into Ionic deviceready
event, execution will timeout without it:
ionic.Platform.ready(function() {
// Code goes here
}
I'm not sure it's necessary to have these anymore but I know for Android you could verify the permissions needed to exist in AndroidManifest.xml:
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
There is probably some iOS equivalent that you can search for but I think installing the plugin should work on its own.
--

Android InAppBrowser virtual keyboard closes on executeScript(). [phonegap]

I copied my code from the following link. It's a workaround for Passing Data From an InAppBrowser back to the app.
blogs.telerik.com/appbuilder/posts/13-12-23/cross-window-communication-with-cordova's-inappbrowser
The problem is that after each executescript() the Keyboard disappears.
This issue status here is "won't fix". So I'm wondering if there is an alternative solution. I only see a reference to KitKat users, but that would only represent a limited amount.
https://issues.apache.org/jira/browse/CB-5449
Suggestions?
setName: function() {
var win = window.open( "http://jsfiddle.net/tj_vantoll/K2yqc/show", "_blank",
"EnableViewPortScale=yes" );
win.addEventListener( "loadstop", function() {
win.executeScript({ code: "localStorage.setItem( 'name', '' );" });
var loop = setInterval(function() {
win.executeScript(
{
code: "localStorage.getItem( 'name' )"
},
function( values ) {
var name = values[ 0 ];
if ( name ) {
clearInterval( loop );
win.close();
$( "h1" ).html( "Welcome " + name + "!" );
}
}
);
});
});
}
Depending on your use case, it might be a feasible workaround to check if the keyboard is currently visible and avoid calling executeScript in that case.
Try using the com.ionic.keyboard plugin to get cordova.plugins.Keyboard.isVisible and use that in your setInterval function.

phonegap WFS proxy issue

I encountered a problem when I try to package my sencha-touch app using phonegap. Everything works fine except accessing WFS in phonegap. (And the app has no problem running in browser, WFS access is OK)
My phonegap version is 2.9; openlayer version is 2.13
Here I present my simple code. You can also check the example codes in the following site: http://openlayers.org/dev/examples/wfs-filter.html
var rootUrl = window.location.protocol + "//" + window.location.host + '/';
var map;
function init() {
map = new OpenLayers.Map({
div: "map",
layers: [
new OpenLayers.Layer.WMS(
"Natural Earth",
"http://demo.opengeo.org/geoserver/wms",
{ layers: "topp:naturalearth" }
),
new OpenLayers.Layer.Vector("WFS", {
strategies: [new OpenLayers.Strategy.BBOX()],
protocol: new OpenLayers.Protocol.WFS({
url: rootUrl + 'proxy.py?url=http://demo.opengeo.org/geoserver/wfs',
featureType: "tasmania_roads",
featureNS: "http://www.openplans.org/topp"
}),
styleMap: new OpenLayers.StyleMap({
strokeWidth: 3,
strokeColor: "#333333"
}),
})
],
center: new OpenLayers.LonLat(146.7, -41.8),
zoom: 6
});
}
In phonegap there's no problem accessing WMS, but when I try WFS, it never work.
Comparing to the link I showed you before, there's a road displayed in the map, and it is obtained through WFS. In my phonegap app, the road will not be displayed.
I'm wondering whether it is a WFS issue, or phonegap issue. Something is blocking my access to WFS in my phonegap app.
Please give me some suggestions and hints, guys! I will really appreciate it.
function getLayerList() {
$.ajax({ url: rootUrl + 'proxy.py?url=http://192.168.0.23/LBEService/Service1.svc/GetEventList',
//async: false,
data: JSON.stringify({}),
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
console.log(result);
$("#demo").html(result[0].event_NAME);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
}).done(function () {
});
}
Have you added the domain that is hosting the WFS to the white list?
http://docs.phonegap.com/en/1.9.0/guide_whitelist_index.md.html
On android PhoneGap window.location.protocol is 'file:' and window.location.hostname is "", so your app will probably be looking for file://proxy.py? which doesn't exist on your device.
To solve this issue I test the protocol, and set up OpenLayers.Proxy accordingly, thus:
if( location.protocol == 'file:' ) {
OpenLayers.ProxyHost = "";
} else {
OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
}
So in your case, if protocol is 'file:', I think you need to drop 'proxy.py?'
Tip: debug your android app using Chrome on your PC (chrome://inspect/#devices) and you'll see the request that android is making.

How to save the Instance State in Android applications developed with Titanium?

I'm working with Titanium 3.1 and developing for Android 3.0 and greater.
My app has a view that when clicked asks you if you want to take a picture or select an image from gallery. When I choose to take a picture from the camera, the camera shows with no problem and I can take the picture, the problem is that after I take the picture and choose to use it, my app resume from the beginning, not returning to the previous state it was showing before choosing to take a picture.
When I checked logcat I saw this line:
I/TiRootActivity(24120): (main) [0,0] checkpoint, on root activity create, savedInstanceState: null
It seems the state of my app is not being saved, but I don't know why. I'll be honest, this is my first time working on an app that goes to the camera app, takes a picture and returns to the app. Previously I've worked with Intents in Titanium and I've been able to return to the correct state of my app after exiting the application that was opened with the Intent using the back button.
This is the code I use to open the camera:
var globalBabyPicture = Titanium.UI.createImageView({
image:imagesPath + "kinedu_0027_ic_camara.png",
width:75,
});
var photoOptionsViewFromCamera = Ti.UI.createView({
width:Ti.Platform.displayCaps.platformWidth,
height:44,
left:0,
top:1*44,
backgroundColor:"transparent"
});
var photoOptionsViewFromCameraLabel = Ti.UI.createLabel({
text:"from camera",
font:{fontSize:14, fontFamily:"Arial Rounded MT Bold"},
color:"#368cd6"
});
photoOptionsViewFromCamera.add(photoOptionsViewFromCameraLabel);
photoOptionsViewFromCamera.addEventListener("touchstart", function(e){
var animateTouchStart = Ti.UI.createAnimation({backgroundColor:"#AFD1DE", duration:150});
photoOptionsViewFromCamera.animate(animateTouchStart);
});
//********* this is the code that triggers the camera to take the picture
photoOptionsViewFromCamera.addEventListener("touchend", function(e){
var animateTouchEnd = Ti.UI.createAnimation({backgroundColor:"transparent", duration:150});
photoOptionsViewFromCamera.animate(animateTouchEnd);
animateTouchEnd.addEventListener("complete", function(e){
Ti.Media.showCamera({
success : function(event) {
var tmp = Ti.Filesystem.getFile(Ti.Filesystem.tempDirectory, ('baby_temp.png'));
tmp.write(event.media);
var blob = tmp.read();
Ti.App.fireEvent("changePicture");
},
cancel : function() {
},
error : function(error) {
var message;
if (error.code == Ti.Media.NO_CAMERA) {
message = 'Device does not have camera capabilities';
} else {
message = 'Unexpected error: ' + error.code;
}
Ti.UI.createAlertDialog({
title : 'Camera',
message : message
}).show();
},
saveToPhotoGallery : false,
allowEditing : true,
mediaTypes : [Ti.Media.MEDIA_TYPE_PHOTO]
});
});
});
Ti.App.addEventListener("changePicture", function(e){
var tmp = Ti.Filesystem.getFile(Ti.Filesystem.tempDirectory, ('baby_temp.png'));
var blob = tmp.read();
var animationChange = Ti.UI.createAnimation({opacity:0, duration:200});
babyImage.animate(animationChange);
var animationChangeCompleted = Ti.UI.createAnimation({opacity:1, duration:200});
animationChange.addEventListener("complete", function(e){
babyImage.setWidth(100);
var image = blob.imageAsThumbnail(150);
babyImage.setImage(image);
babyImage.animate(animationChangeCompleted);
});
});
I've checked and the success callback is never made, I think it's because the application resumes from the beginning, showing the application splash screen.
How can I ensure that after taking the picture, the application returns to the previous view without resuming the application from the beginning?
I think allowEditing should be allowImageEditing

Categories

Resources