Article
About the Author
Jack Herrington
Jack Herrington is an engineer, author, and presenter who lives and works in San Francisco, USA. He writes regularly on the topics of Flex, Ajax, Silverlight, PHP, and Ruby on Rails at http://jackherrington.com.
Map Your OpenSocial Data Using Flex
Star Trek has long been a surprisingly accurate predictor of future technology. For example, the communicator was a precursor to the cell phone. Similarly, in Star Trek: The Next Generation, the crew aboard the Starship Enterprise wore badges that contained an intelligent location-aware system—the characters could ask the badge questions about their location, and discover information about what was around them.
Today, the ability to perform this kind of location sensing and mapping is bringing about a new wave of applications that answer useful questions, such as: “Where am I?”, “Who is nearby?”, and “What are they doing?”
In this article, I’ll show you how to combine Flex/Flash, Google Maps, Flickr, and OpenSocial to create some cool example applications that you could use as the basis for your own development. You can download the code archive for this article if you'd like to play along at home.
Pay attention—there will be a quiz at the end! The first 100 people to complete the quiz will win a copy of my book, Getting Started With Flex 3, delivered to their front door for FREE, thanks to Adobe. You can also download the book in PDF format for free for a limited time.
Getting Started
If you haven’t played with Flex before, it’s a platform for building Rich Internet Applications in Flash using MXML (an XML-based markup language) and ActionScript. The compiler and framework are open source, and you can download those directly from Adobe. You can also download the Flex Builder 3 IDE on a trial basis from Adobe. Flex Builder is definitely the easiest way to develop Flex applications because it supports syntax highlighting, code lookups, and all of the modern features one expects from a professional programming editor. I recommend reading this beginner Flex tutorial if you’re just getting started.
Google Maps is a site with which you’re probably already familiar, but you may not be aware that there’s also a Flash version of Google Maps which supports the same API as the JavaScript version. This is the version we’ll be using in these examples.
Before we begin, you’ll need to obtain API keys for both Flickr and Google Maps, if you don’t have them already. The Google Maps API application process requires that you enter the URL of the site from which you’ll be requesting the maps. We’ll be running this application on our local machine—at least initially, anyway—so I recommend using a URL of http://localhost/.
Displaying a Map
First, let’s create a small Flex application that simply embeds a Google Map. The code for this app looks like this:
Listing 1. Flickrmap.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="onStartup()">
<mx:Script>
<![CDATA[
import com.google.maps.services.GeocodingEvent;
import com.google.maps.services.ClientGeocoder;
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.MapEvent;
import com.google.maps.LatLng;
import com.google.maps.Map;
import mx.core.UIComponent;
private var map:Map = new Map();
private function onStartup() : void {
var uic:UIComponent = new UIComponent();
uic.setStyle( 'top', 0 );
uic.setStyle( 'left', 0 );
uic.width = width;
uic.height = height;
addChildAt( uic, 0 );
map.key = 'Your Google Maps Key';
map.width = width;
map.height = height;
map.addEventListener( MapEvent.MAP_READY, onMapReady );
uic.addChild( map );
locPanel.setStyle( 'top', height - locPanel.height - 20 );
}
private function onMapReady( event:MapEvent ) : void {
map.setCenter( new LatLng( 34.101509, -118.32691 ) );
map.setZoom( 12 );
map.addControl( new MapTypeControl() );
map.addControl( new ZoomControl() );
}
private function onGeocodeSuccess( event:GeocodingEvent ) : void {
map.setCenter( event.response.placemarks[0].point );
}
private function onKeyDown( event:KeyboardEvent ) : void {
if ( event.keyCode == Keyboard.ENTER ) {
var cg:ClientGeocoder = new ClientGeocoder( "USA" );
cg.addEventListener( GeocodingEvent.GEOCODING_SUCCESS, onGeocodeSuccess );
cg.geocode( loc.text );
}
}
]]>
</mx:Script>
<mx:Panel id="locPanel" title="Location" top="500" left="20" borderAlpha="0.95">
<mx:TextInput id="loc" keyDown="onKeyDown( event )" width="300" text="fremont, ca" />
</mx:Panel>
</mx:Application>
In the onStartup method, we create the map and register an event handler to listen for a MAP_READY message. As soon as that message is detected, we call the onMapReady method, which adds some controls to the map.
The user interface consists of a text input field, into which the user enters a street address. Our application monitors changes to this field via the keyDown attribute; when the user presses the Enter key (Return on a Mac) we perform a geocode lookup on the address that was entered. Performing a geocode lookup (commonly known simply as geocoding) takes an address and returns a latitude and longitude. The onGeocodeSuccess method is called when this process was successful, and Google has provided us with a valid latitude and longitude pair. We then center the map based on this geographical coordinate.
Let’s see if our application works. Launch the code from Flex Builder, and you should see something similar to the image in Figure 1.
Hold up—why are the words “debug mode” plastered all over our map? Who said anything about debug mode?
Well, it turns out the Google Maps key is associated with a URL, and the URL we gave it was http://localhost/. However, the URL that our application is currently running from is a file URL pointing to somewhere on the disk.