Categories: Flash Lite | How To | Code Examples | Location Based Services

From Forum Nokia Wiki

Featured Article   

This article shows how to display current phone GPS position using Flash Lite, KuneriLite, and Google Static Maps.

Prerequisites

Get your own Google Maps API key

To use Google Maps services, you need a Google Maps API key. If you do not have one, you can sign up for a key here: http://code.google.com/apis/maps/signup.html

Download and install KuneriLite

KuneriLite is a toolkit that extends Flash Lite capabilites, allowing applications to access native Symbian OS functionalities, such as file writing or reading GPS data.
To proceed in this tutorial, download and install KuneriLite from the KuneriLite download page.

Create the Flash Lite application

Create your Flash Lite movie

In this example, Flash Lite 2.1 is used. However, porting it to other (older or newer) Flash Lite versions is quite straightforward. So, after you have created an empty Flash Lite movie, do as follows:

• Create a button by going to Insert > New Symbol... and entering these properties:
  • Enter GpsButton as the name.
  • Mark the Export for ActionScript and Export in first frame check boxes.

• Design the button. You can, for example, place a big "Find me!" label on it.
• After you have designed the button, place it in the movie root, in the lower part of the stage as in the attached screenshot, and give startButton as the Instance Name.

Enter ActionScript code

In the movie root, create a new layer called Actions, and open its ActionScript editor. First define the properties:

// Enter your api key here
var apiKey = 'API_KEY';
 
//If you use the non-commercial version of KuneriLite, you do not need to change this
var kuneriPath = 'http://127.0.0.1:1001/Basic/';

Next, define some useful functions to be used in the code:

//This function is called when some KuneriLite-related errors occur
function kuneriError(error:String)
{
	trace("KuneriLite error: " + error);
}
 
//This function will do all calls to KuneriLite servers
//and call the given handler passing response values as the argument
function kuneriLoad(url, handler)
{
	var loader:LoadVars = new LoadVars();
	
	loader.onLoad = function()
	{
		handler(this);
	}
	trace("LOADING: " + url);
	
	loader.load(url);
}

Next, code the button-related logic. When the user presses startButton, the application should:

• Start the GPS.
• Retrieve the current GPS position.
• Display a map centered in the retrieved GPS position.

To get full information about the KuneriLite GPS plug-in, check the related Wiki page:http://wiki.kunerilite.net/index.php?title=GPS_plugin The GPS is started when the gpsButton is pressed, using the start klCommand:

startButton.onPress = function()
{
	kuneriLoad(kuneriPath + 'GPS?klCommand=start', gpsStarted);
}
function gpsStarted(res:LoadVars)
{
	if(res.klError == 0 || res.klError == -11)
	{
		trace("GPS started");
		
		kuneriLoad(kuneriPath + 'GPS?klCommand=read', gpsDataRead);
	}
	else
	{
		kuneriError("Error starting GPS!");
	}
}

The gpsStarted() handler will:

• Check that there are no errors (klError = 0) or if the GPS is already started (klError = -11). For a full list of errors associated with the GPS plug-in, check the KuneriLite Wiki page:

http://wiki.kunerilite.net/index.php?title=GPS_plugin

• If there is an error in starting the GPS, call the kuneriError() function defined above.
• If the GPS is started correctly, it will make a second call to KuneriLite, this time to retrieve the current GPS position (klCommand=read)

The second call to KuneriLite will call the gpsDataRead() handler defined below:

function gpsDataRead(res:LoadVars)
{
	if(res.klError == 0)
	{
		var lat = res.klPosLatitude;
		var lng = res.klPosLongitude;
		
		trace("POSITION: " + lat + ", " + lng);
		
		loadMap(lat, lng);
	}
	else
	{
		kuneriError("Error starting GPS!");
	}
}

This handler, as above, checks if there are any errors raised by KuneriLite and if not, extracts latitute and longidute coordinates from the response's klPosLatitude and klPosLongitude properties. After this, it calls the loadMap() function that actually loads the static map image.

function loadMap(lat:Number, lng:Number)
{
	var mapClip:MovieClip = _root.createEmptyMovieClip('mapClip', _root.getNextHighestDepth());
	
	mapClip._x = 0;
	mapClip._y = 0;
	
	var mapWidth = 240;
	var mapHeight = 280;
	
	var loader:MovieClipLoader = new MovieClipLoader();
	
	var mapUrl:String = 'http://maps.google.com/staticmap?center=' + 
		lat + ',' + lng + '&format=jpg&zoom=8&size=' + 
		mapWidth + 'x' + mapHeight + '&key=' + apiKey;
	
	loader.loadClip(mapUrl, mapClip);
}

The above function:

• Attaches a new empty movie clip to the movie root.
• Places it to coordinates (0,0).
• Uses a MovieClipLoader to load a 240x280 pixel map image in JPEG format in the empty clip.

After this, you can actually test your Flash Lite movie.

Test your Flash Lite application

Test on PC

To test your application without deploying it on a real device:

• Start the KuneriLite emulator with the default settings (port: 1001, key: Basic).
• Start your FlashLite movie.
• Press Find Me! and wait for your image to load (the GPS position is, of course not real when testing on the emulator :))

For more information about the KuneriLite emulator, see KuneriLite Emulator

Test on a real device

To test your application on a real device, package your SIS application using the KuneriLite Wizard:

• Export your FlashLite movie.
• Create a new KuneriLite project.
• Enter the application name and other data. Select GPS from the available plug-ins.
• Select the "Use external player" option if you are developing for a development player (2.x or 3.x) and would like to launch the application using one of those players.
• It is also recommended to always select the "Use stub" option.
• Select the exported SWF as project Main SWF.

For more information about KuneriLite Wizard, see the KuneriLite Wizard Beginner's Guide.

Resources

• The FLA source of this tutorial is available for download here: Media:KuneriGpsMap.zip
• For further information about using Google Maps in mobile applications, read this article: How to use Google Maps data in mobile applications