Tuesday 7 February 2012

Displaying users current location on map

The Appcelerator mapview can be used to display any location on a map. But you can also use the mapview in ascosiation with the devices location systems to display the users current location.

What we will do is create a simple application that will detect the users location using network location or GPS if the user has GPS enabled on the device. GPS is a lot more accurate and will show the users exact location. Network location doesn't work nearly as well, and will generaly show the users location to within a mile or so.

First of all we need to create our window...

var mywindow = Titanium.UI.createWindow({
    title:'My Location',
    backgroundColor:'white'
})

This defines our window and sets some basic window properties. We can how reference this window and add other items to it from within our code.

We will now add some code to allow us to gain information about the devices current location.

Titanium.Geolocation.purpose = "To display user location on a map";
Titanium.Geolocation.accuracy = Titanium.Geolocation.ACCURACY_BEST;
Titanium.Geolocation.distanceFilter = 10;

The first line is used to describe why we want to obtain the users location information. This is more importaint when you are developing an app for iOS because Apple want to know why you want access to this information on one of their users devices.

We also need to specify what level of acuracy is required. For most applications  ACCURACY_BEST is the preferred option to use.

Distance filter is used to determine when to update the user location. Distance filter is basedon meisurements of a meter. So  distanceFilter=10 will trigger a location update if the device detects it has moved 10 meters or more.

Distance filter is a lot more accurate when used in conjunction with GPS because the measurements are a lot more accurate. Very often you will discover your device location will update a lot of you are using network location.

What we now need to do is add a mapview to our project. As you can see from the code below I have added a default location of "0".

var mymap = Titanium.Map.createView({
    mapType: Titanium.Map.STANDARD_TYPE,
    region: {latitude:0,
    longitude:0,
    latitudeDelta:0.01,
    longitudeDelta:0.01},
    userLocation:true,
    visible:true
})

First of all we declare mymap as our mapview object. We then specify that the type of map we want to use is a standard type map. We have then specified our default location. I simply placed a 0 for latitude and longitude.

We have also gave values for longitudeDelta and latitudeDelta. We have provided each with a value of 0.5 . These values are used to determine the scale of the map being shown. It can be fairly tricky when working out these values but the value you provide is the number of degrees on the map that you want to be visible from north to south and east to west.

In many cases getting the right value for  longitudeDelta and latitudeDelta requires testing and trying until you get the map scaled as required.

We also need a function to determine when the location has changed and obtain and resend the correct (current) location to our mapview...

function getLocation(){
Titanium.Geolocation.getCurrentPosition(function(e){
       
var region = 
{
latitude:e.coords.latitude,
longitude:e.coords.longitude,
animate:true,
latitudeDelta:0.01,
longitudeDelta:0.01
};

The function gets the updated coordinates for the "region" section of our mapview as defined earlier. By default we set these values to "0" this function will populate the latitude and longitude properties with accurate and meaningful data.

The code above obtains the values, but we need to add some more code to overwrite our predetermined defaults with the current location information...

mymap.setLocation(region);

This line of code will set the latitude and longitude properties to the current values as determined within the location function.

What this simple app does is create a window and display a mapview within it. It also probes the phones location systems to get accurate information about the phones location coordinates. Once it has this information it will display the users current location within a map, If the device moves it will update the map to show the amended current location.

Here is the full cource code for this simple sample project that you can copy paste right into your Appcelerator project...

var mywindow = Ti.UI.createWindow({
    title:'My Location',
    backgroundColor:'white'
})

Titanium.Geolocation.purpose = "Recieve User Location";
Titanium.Geolocation.accuracy = Titanium.Geolocation.ACCURACY_BEST;
Titanium.Geolocation.distanceFilter = 10;

var mymap = Titanium.Map.createView({
    mapType: Titanium.Map.STANDARD_TYPE,
    region: {latitude:0,
    longitude:0,
    latitudeDelta:0.01,
    longitudeDelta:0.01},
    userLocation:true,
})

function getLocation(){
Titanium.Geolocation.getCurrentPosition(function(e){
       
var region={
latitude:e.coords.latitude,
longitude:e.coords.longitude,
animate:true,
latitudeDelta:0.01,
longitudeDelta:0.01
};

mymap.setLocation(region);
})
}

mywindow.add(mymap);

Titanium.Geolocation.addEventListener('location',function(){
getLocation();
})

mywindow.open();

Have fun!

Mack.

1 comment: