This post is a part 43 of Intel XDK Complete Tutorial post series.
In this tutorial I will show you how to find user’s current location using JavaScript in Intel XDK app. Applications like Facebook messenger, Google Maps APP etc use some sort of Geolocation APIs to detect user location and display it on embedded Google Maps.
Including Cordova Geolocation Plugin
We will be using Cordova geolocation plugin to implement geolocation functionality in our app.
This plugin is supported in Cordova hybrid and legacy hybrid apps.
Find User’s Current Position
Here is the code to find user’s current latitude and longitude position
document.addEventListener("deviceready", function(){
navigator.geolocation.getCurrentPosition(function(position){
alert('Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude + '\n' +
'Altitude: ' + position.coords.altitude + '\n' +
'Accuracy: ' + position.coords.accuracy + '\n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' +
'Heading: ' + position.coords.heading + '\n' +
'Speed: ' + position.coords.speed + '\n' +
'Timestamp: ' + position.timestamp + '\n');
}, function(error){
if(error.code == PositionError.PERMISSION_DENIED)
{
alert("App doesn't have permission to use GPS");
}
else if(error.code == PositionError.POSITION_UNAVAILABLE)
{
alert("No GPS device found");
}
else if(error.code == PositionError.TIMEOUT)
{
alert("Its taking too long find user location");
}
else
{
alert("An unknown error occured");
}
}, { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true });
}, false);
navigator.geolocation.getCurrentPosition(function(position){
alert('Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude + '\n' +
'Altitude: ' + position.coords.altitude + '\n' +
'Accuracy: ' + position.coords.accuracy + '\n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' +
'Heading: ' + position.coords.heading + '\n' +
'Speed: ' + position.coords.speed + '\n' +
'Timestamp: ' + position.timestamp + '\n');
}, function(error){
if(error.code == PositionError.PERMISSION_DENIED)
{
alert("App doesn't have permission to use GPS");
}
else if(error.code == PositionError.POSITION_UNAVAILABLE)
{
alert("No GPS device found");
}
else if(error.code == PositionError.TIMEOUT)
{
alert("Its taking too long find user location");
}
else
{
alert("An unknown error occured");
}
}, { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true });
}, false);
getCurrentPosition is a asynchronous function and takes three parameters: success callback, error callback and options.
- Inside success callback you can find latitude, longitude, altitude, accuracy, altitude accuracy, heading, speed and timestamp of the device.
altitude represents the height of the position in meters above the ellipsoid.
accuracy represents the accuracy level of the latitude and longitude coordinates in meters.
altitudeAccuracy represents Accuracy level of the altitude coordinate in meters.
heading represents the direction of travel, specified in degrees counting clockwise relative to the true north.
speed represents the current ground speed of the device, specified in meters per second.
- Inside error callback you find the reason why an error occurred while finding the position of the device.
- timeout represents the number of milliseconds to wait for the device to find the location, if the time crosses an error callback is fired.
maximumAge represents the number of milliseconds the last retrieved position should be cached for.
If enableHighAccuracy is set to true then this api uses GPS device to find the position otherwise it uses Internet. GPS provides more accurate position than Internet.
Now you can use Google Maps JavaScript API to display a map and mark the user on the map.
Displaying Google Map and Marking User Position
Here is the complete source code to display google maps and mark user position.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<script src="https://cdn.rawgit.com/ftlabs/fastclick/master/lib/fastclick.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div id="googleMap" style="width:300px;height:300px;"></div>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
document.addEventListener("deviceready", function(){
navigator.geolocation.getCurrentPosition(function(position){
var mapProp = {center:new google.maps.LatLng(position.coords.latitude,position.coords.longitude), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP};
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker=new google.maps.Marker({position:new google.maps.LatLng(position.coords.latitude,position.coords.longitude)});
marker.setMap(map);
}, function(error){
if(error.code == PositionError.PERMISSION_DENIED)
{
alert("App doesn't have permission to use GPS");
}
else if(error.code == PositionError.POSITION_UNAVAILABLE)
{
alert("No GPS device found");
}
else if(error.code == PositionError.TIMEOUT)
{
alert("Its taking too long find user location");
}
else
{
alert("An unknown error occured");
}
}, { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true });
}, false);
</script>
</body>
</html>
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<script src="https://cdn.rawgit.com/ftlabs/fastclick/master/lib/fastclick.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div id="googleMap" style="width:300px;height:300px;"></div>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
document.addEventListener("deviceready", function(){
navigator.geolocation.getCurrentPosition(function(position){
var mapProp = {center:new google.maps.LatLng(position.coords.latitude,position.coords.longitude), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP};
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker=new google.maps.Marker({position:new google.maps.LatLng(position.coords.latitude,position.coords.longitude)});
marker.setMap(map);
}, function(error){
if(error.code == PositionError.PERMISSION_DENIED)
{
alert("App doesn't have permission to use GPS");
}
else if(error.code == PositionError.POSITION_UNAVAILABLE)
{
alert("No GPS device found");
}
else if(error.code == PositionError.TIMEOUT)
{
alert("Its taking too long find user location");
}
else
{
alert("An unknown error occured");
}
}, { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true });
}, false);
</script>
</body>
</html>
Watching User’s Position Continuously
Sometimes its necessary to watch user’s current position continuously. This can be useful if you are creating a Cab app, distance traveled measuring app etc.
Here is the code to watch the user’s position continuously
var watchID = null;
document.addEventListener("deviceready", function(){
watchID = navigator.geolocation.watchPosition(function(position){
console.log('Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude + '\n' +
'Altitude: ' + position.coords.altitude + '\n' +
'Accuracy: ' + position.coords.accuracy + '\n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' +
'Heading: ' + position.coords.heading + '\n' +
'Speed: ' + position.coords.speed + '\n' +
'Timestamp: ' + position.timestamp + '\n');
}, function(error){
if(error.code == PositionError.PERMISSION_DENIED)
{
alert("App doesn't have permission to use GPS");
}
else if(error.code == PositionError.POSITION_UNAVAILABLE)
{
alert("No GPS device found");
}
else if(error.code == PositionError.TIMEOUT)
{
alert("Its taking to find user location");
}
else
{
alert("An unknown error occured");
}
}, { maximumAge: 3000, timeout: 30000, enableHighAccuracy: true });
}, false);
document.addEventListener("deviceready", function(){
watchID = navigator.geolocation.watchPosition(function(position){
console.log('Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude + '\n' +
'Altitude: ' + position.coords.altitude + '\n' +
'Accuracy: ' + position.coords.accuracy + '\n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' +
'Heading: ' + position.coords.heading + '\n' +
'Speed: ' + position.coords.speed + '\n' +
'Timestamp: ' + position.timestamp + '\n');
}, function(error){
if(error.code == PositionError.PERMISSION_DENIED)
{
alert("App doesn't have permission to use GPS");
}
else if(error.code == PositionError.POSITION_UNAVAILABLE)
{
alert("No GPS device found");
}
else if(error.code == PositionError.TIMEOUT)
{
alert("Its taking to find user location");
}
else
{
alert("An unknown error occured");
}
}, { maximumAge: 3000, timeout: 30000, enableHighAccuracy: true });
}, false);
Here we used watchPosition instead of getCurrentPosition. watchPosition executes success callback whenever a change in position is detected. watchPosition is also a asynchronous function.
You can stop watching the position anytime using the below code
navigator.geolocation.clearWatch(watchID);
This is all about integrating Geolocation in an Intel XDK app. Thanks for reading.
@narayanprusty
