While building Adobe Air mobile projects, there are times when you need to show HTML content inside your app, this HTML content can cover the whole stage or just part of your Air app. if you are reading this, it means you already know that and it also means that you are completely familiar with StageWebView originally provided by Adobe.
What we are going to talk about here is how to enable GPS in WebView so you will be able to use navigator.geolocation in your HTML. something like below.
var gpsOptions = {
enableHighAccuracy: false,
timeout: 5000,
maximumAge: 0
};
function onGpsSuccess(pos) {
var crd = pos.coords;
alert('Your current position is:\nLatitude : ' +
crd.latitude + '\nLongitude: ' +
crd.longitude + '\naccuracy: ' +
crd.accuracy + 'meters');
};
function onGpsError(err) {
alert('ERROR(' + err.code + '): \n' + err.message);
};
function getUserLocation()
{
navigator.geolocation.getCurrentPosition(onGpsSuccess, onGpsError, gpsOptions);
}
The first thing to do is to use RichWebView ANE instead of the classic StageWebView. but you don’t have to buy it just right now. for the sake of this tutorial, you can grab the fully functional free version from github here.
RichWebView is an Air native extension which you can implement in your Air project just like any other ANE but to enable GPS for your webView content, you need to add the following entities into your Manifest .xml file
<!-- for Android -->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<!-- for iOS -->
<key>NSLocationUsageDescription</key>
<string>I need location, reason 1</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>I need location, reason 2</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>I need location, reason 3</string>
Working with RichWebView is very easy and straight and I strongly suggest you to read the AS3 usage sample here. The only thing to remember is to set the GPS parameter to true to make sure your webview will have access to GPS hardware correctly.
// when initializing RichWebView, set the fourth parameter to true
var _ex = new RichWebView(this.stage, true, true, true, true);
That’s all there is to it! if you have set GPS parameter to true and you have the permissions correctly in your manifest, you should be able to get users latitude and longitude right inside your webview content using the above JS codes.
Adobe air + stageWebView + GPS
While building Adobe Air mobile projects, there are times when you need to show HTML content inside your app, this HTML content can cover the whole stage or just part of your Air app. if you are reading this, it means you already know that and it also means that you are completely familiar with StageWebView originally provided by Adobe.
What we are going to talk about here is how to enable GPS in WebView so you will be able to use navigator.geolocation in your HTML. something like below.
learn more about js navigator.geolocation
var gpsOptions = { enableHighAccuracy: false, timeout: 5000, maximumAge: 0 }; function onGpsSuccess(pos) { var crd = pos.coords; alert('Your current position is:\nLatitude : ' + crd.latitude + '\nLongitude: ' + crd.longitude + '\naccuracy: ' + crd.accuracy + 'meters'); }; function onGpsError(err) { alert('ERROR(' + err.code + '): \n' + err.message); }; function getUserLocation() { navigator.geolocation.getCurrentPosition(onGpsSuccess, onGpsError, gpsOptions); }The first thing to do is to use RichWebView ANE instead of the classic StageWebView. but you don’t have to buy it just right now. for the sake of this tutorial, you can grab the fully functional free version from github here.
RichWebView is an Air native extension which you can implement in your Air project just like any other ANE but to enable GPS for your webView content, you need to add the following entities into your Manifest .xml file
Working with RichWebView is very easy and straight and I strongly suggest you to read the AS3 usage sample here. The only thing to remember is to set the GPS parameter to true to make sure your webview will have access to GPS hardware correctly.
That’s all there is to it! if you have set GPS parameter to true and you have the permissions correctly in your manifest, you should be able to get users latitude and longitude right inside your webview content using the above JS codes.
Enjoy building awesome Air apps.
MyFlashLabs Team
Share this:
Related