Flex Mobile : GPS location with Mapquest Mobile Flash API

Posted: August 31, 2011 in Flex Mobile

Want to grab your current GPS location, display it on a map and update the location as the device moves?
I took the basic example off of TourDeFlex and applied it to the new MapQuest Mobile Flash API.
I went with MapQuest Mobile because of the performance issues of Google Maps Flash API and Adobe Air.
Mapquest is working great for me and their developers are very responsive!
Works on Motorola Xoom, Acer Iconia, Blackberry Playbook, and iPad.
Here is my source code that in live on my Tablet apps.

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:tilemap="com.mapquest.tilemap.*"  creationComplete="initApp()" 
		 xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"	width="100%" height="100%">
	<fx:Declarations>
		
	</fx:Declarations>
	
		<fx:Script>
			<![CDATA[
				import com.mapquest.Config;
				import com.mapquest.LatLng;
				import com.mapquest.mobile.GPS;
				import com.mapquest.tilemap.*;
				import com.mapquest.tilemap.controls.DefaultControlSet;
				import com.mapquest.tilemap.controls.shadymeadow.SMViewControl;
				import com.mapquest.tilemap.controls.shadymeadow.SMZoomControl;
				import com.mapquest.tilemap.pois.Poi;
				
				import flash.sensors.Geolocation;
				
				import mx.effects.easing.Circular;
				import mx.effects.easing.Elastic;
				
				import spark.components.View;
				import spark.events.ViewNavigatorEvent;
				
				
				private var isPinching:Boolean;
				private var currentCenter:LatLng;
				private var zoomControl:SMZoomControl;
				private var viewControl:SMViewControl = new SMViewControl();
				
				private var zs:ZoomSettings;
				
				import com.mapquest.*;
				import com.mapquest.mobile.GPS;
				import com.mapquest.mobile.TextUtil;
				import com.mapquest.tilemap.*;
				import com.mapquest.tilemap.pois.*;
				
				import mx.events.ResizeEvent;
				
				
				
				include "Config.as";
				
				
				[Bindable]
				public var map:TileMap;
				protected var g:Geolocation = new Geolocation();   
				public var gps:GPS;
				
				public var gpsSupported:Boolean;
				
				public var currentLatLng:LatLng = new LatLng(38.134557, -98.4375);
				//public var currentLatLng:LatLng;
				
				public var textUtil:TextUtil;
				
				private var gpsPoi:Poi;
				private var counter:Number = 0;
				
				private function initApp():void {
					makeMap();
					
					if (Geolocation.isSupported)
					{
						
						latitude.text = "Finding Location...";
						g.addEventListener(GeolocationEvent.UPDATE, onUpdate);
						addEventListener(ViewNavigatorEvent.REMOVING,onRemove);
					}
					else
					{
						
						latitude.text = "Geolocation is not supported on this device.";
					}    
					
					
					gps = new GPS();
					textUtil = new TextUtil();
					
					if (gps.isSupported) {
						gpsSupported = true;
						
					}
					else {
						this.gps = null;
					}
					
					
					
					
					this.addEventListener(ResizeEvent.RESIZE,this.onResize);
					
				}
			
				protected function onUpdate(event:GeolocationEvent):void
				{
					trace("Update event called");
					
					
					if(event.latitude){
						
						var ll:LatLng = new LatLng(event.latitude,event.longitude);
						currentLatLng = ll;
						latitude.text = event.latitude.toString();
						longitude.text = event.longitude.toString();
						counter = counter+1;
						
						gps.getCurrentLocation();
						
						if(gps.currentLatLng){
							currentLatLng = gps.currentLatLng;
						}
						else {
							currentLatLng = ll;
						}
						
						
						if(counter == 1){
							setPoi();
						}
						else {
							
							gpsPoi.latLng = currentLatLng;
						}
						
						
					}
					
				
					
				}
				
				private function setPoi():void {
					
					gpsPoi = new Poi(currentLatLng)
					gpsPoi.infoWindowTitleText = "Current Location";
					gpsPoi.infoContent = "LatLng: " + this.gpsPoi.latLng.toString();
					
					map.setCenter(currentLatLng,mapStartZoomLevel);	
					map.addShape(gpsPoi);
				}
				
				protected function onRemove(event:ViewNavigatorEvent):void
				{
					g.removeEventListener(GeolocationEvent.UPDATE, onUpdate);                
				}
				
				private function onResize(e:ResizeEvent):void {
					this.map.size = new Size(this.width,this.height);
				}
				
				
				private function makeMap():void {
					
					map = new TileMap(key,mapStartZoomLevel,currentLatLng,mapStartType);
					
					map.size = new Size(uic.width,this.uic.height);
					uic.addChild(map);
					map.mapFriction = mapFriction;
					
				}
					
				
			]]>
		</fx:Script>
	
	
	
	
	
	
	<mx:UIComponent id="uic" width="100%" height="100%" x="0" y="0"/>
	
	<s:HGroup top= "60" left="60">
		<s:Label text="Latitude:" color="0xffffff"/>
		<s:Spacer width="5" />
		<s:Label id="latitude" color="0xffffff"/>
		<s:Spacer width="50"/>
		<s:Label text="Longitude:" color="0xffffff"/>
		<s:Spacer width="5"/>
		<s:Label id="longitude" color="0xffffff"/>
		
	</s:HGroup>
	
</s:Group>
Advertisements
Comments
  1. Raghu says:

    Hi, the latest library does not include mobile GPS class.

    http://developer.mapquest.com/content/as/v/osmm/documentation/devref/index.html

    Could you please send me the library which has mobile GPS?

    Thanks,
    Raghu.

  2. Leo says:

    can i also have the sdk? it seems that there is no easy way to get the location with the gps

  3. Sean says:

    Hi, could you please send me the gps-library as well.

  4. Leo says:

    do we have to import the files as a folder? no need for an swc?

  5. flextex says:

    You can use the latest MapQuest swc. The GPS class is not part of the swc, so you have to import it. See line 12 in the code above. add the import com.mapquest.gps , which points to the GPS class I sent you separately.

  6. Humberto Sanchez II says:

    Hmm wondering about this. I am deploying to a Android Bionic. I never seem to get a location event to fire even though I set the interval to 5000 (5 secs?)

    • Humberto Sanchez II says:

      Ok, nix the above. I forget to update the xxx-app.xml flle. Specifically, the android section with

      <![CDATA[
      ]]>

  7. Jesus Aguilera says:

    I’m working on a mobile where i need to track the current location (end presicion) to be able to give directions to the user and i’m using the map quest mobile open library.

    The code on this page was a starting point for me, but i didn’t need the GPS class since flex have the Geolocation class, and that can give you the gps location and the accuracy too (if it’s calculated via cell tower triangulation or wifi)

    Below is the relevant code to achieve this


    // Relevant Imports ..
    // But don't copy&paste, just write code and let flex handle imports for you
    import flash.events.GeolocationEvent;
    import flash.events.StatusEvent;
    import flash.sensors.Geolocation;
    import flash.system.Capabilities;

    import com.mapquest.LatLng;

    // Vars
    protected var g:Geolocation;
    protected var error:Number;
    protected var currentLocation:LatLng = new LatLng();

    // Init method..
    ..
    // Checks if geolocation is supported on this device..
    if(Geolocation.isSupported) {
    g = new Geolocation();
    g.addEventListener(GeolocationEvent.UPDATE, geolocation_update);
    g.addEventListener(StatusEvent.STATUS, geolocation_statusChanged);
    ....
    }

    /**
    * Geolocation events handlers
    **/
    // Fires on every gps data available
    protected function geolocation_update(e:GeolocationEvent):void{

    currentLocation.lat = e.latitude;
    currentLocation.lng = e.longitude;

    directionsEnabled = true;

    error = e.horizontalAccuracy;
    if(error statusChanged()");
    trace(" is GPS disabled? -> " + g.muted);
    }

    So far this is working for me, i’m even using the “error” for displaying a circle overlay like google maps does.

    I hope this helps someone!

  8. Sven Braeutigam says:

    Hey, thanks for the little tutorial :)!
    Actually I’m working with the geolocation, but the update-rate
    of it is pretty slow.
    May you email me the gps-sdk as well?I would like to try it, thanks!

    • DoubleTake says:

      link to GPS class is in comments above. Glad to help!
      Don

    • Jesus Aguilera says:

      For improving the update-rate you can call

      g.setRequestedUpdateInterval( interval );

      with a low interval (in millisecs) .. This requests the system to read gps data at specified interval (just a request, the system then decides the real update interval)

      This is also useful for not draining the battery when the app is on the background, you could call this with a higher interval when the app (or view) is deactivated and call it again when activated

  9. Sven Braeutigam says:

    oh thanks – didn’t see it 😀

  10. devdipanwita says:

    can you send me com.mapquest?plz!!actually i am new in development and cant understand how to implement GPS.can u help me?plz

  11. getting error in followings:

    mapStartType

    mapStartZoomLevel

    mapFriction

    frankly speeking i have jsut copied ur code and getting errors in these terms.what to do?i am not getting any declaration for these in ur code.Confused..plz help me

    • DoubleTake says:

      Looks like include Config.as is missing. Just set the values you want using these vars

      public var mapStartZoomLevel:int = 17;

      public var mapStartType:String = “map”;

      public var mapFriction:Number = 1.45;

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s