As promised, here is the first of a few blog posts to discuss the creation of Eva for mobile phones from our App in a Week series.  If you missed any of the great sessions from the team you can watch them on-demand here.

One of the requirements for the EVA application was to produce a radar that would enable us to know where our team mates are.  This feature would be presented as a widget in the EVA application, and you can see it running here.  You can login as a guest as your username and then press “Radar”, and the result looks like this..

As you can see from the “powered by Google” logo, I chose to use the Google Maps API for Flash.  In fact I went all out and created a widget that displays the map in 3D and plots our locations using custom markers around the world.  It goes without saying that the Google Map product is amazing and made possible in Flash by a special API created especially for Flash.

Now, when I was creating this I didn’t know that Google planned to open up their Latitude API.  Latitude, in case you don’t know, is part of the Google Maps product on mobile phones that allows you to share your location with your friends and vice versa.  It has a number of great features that help you to create applications that can share sensitive location information – and keep the data under the control of the user.

Google Maps API for Flash

For a few years now Google have provided an API for Flash developers, so that we might integrate Google Maps into our applications in the browser with Flash/Flex or using the AIR runtime.  To get setup all you need to do is to download the SDK and place it within the components panel of Flash and drag the component onto the stage.

Once you have your FLA setup then you can begin coding, and my personal choice is to use Flash Builder 4 as it has much better support for complex applications.

I have an application class called RadarWidget that defines the Google API key, constructs the Map in 3D.  For obvious reasons, drawing the Map in 3D is quite intensive, and to be honest I did feel that I was stretching my idea of “recommended” approaches.  In the end however I decided that the construction and optimization of the Widget was key to this post.  So to be clear, I still do recommend a static image and this is also supported by the API.

When the application starts up I initialize the Map and get it ready to roll, and while that’s happening a request is sent to our PHP backend to retrieve the current locations of the team using the UserService class.  The PHP function pulls this information from the MySQL database and sends back an array containing all of the team.

getAllUsers = new UsersService(handleGetUsersRequest);
getAllUsers.call(UsersService.GET_ALL_USERS,null);

Each of these array items becomes a User object and they handle the loading of their avatar images, before calling back into the RadarWidget class to add this avatar to the map.  The CustomMarker class extends the com.google.maps.overlays.Marker provided by the API.  Markers provide an extensibility mechanism for the Google Maps API, one where an Overlay can be anything from a user image, to your local Starbucks, weather and even a completely new terrain map.

var marker:CustomMarker = new CustomMarker(user,
new MarkerOptions({
icon: user.image,
hasShadow: true,
distanceScaling: true,
clickable:true,
iconOffset: new Point(-user.image.width / 2, -user.image.height)
}));

In this same class, when a user taps on an Evangelist avatar you’ll notice that a pop-up appears to indicate their current location.  To achieve this I have used the Google ClientGeocoder, which is an API than provides an array of Placemarks close to the Latitude and Longitude provided.

popup = new Popup(currentMarker.user.user_realname, placemarks[0].address);
popup.cacheAsBitmap=true;//The popup is a vector, so let's cache it while it's up

var opts:InfoWindowOptions = new InfoWindowOptions();
opts.pointOffset= new Point(-45, -110);
opts.hasShadow=true;
opts.customContent = popup;
currentMarker.openInfoWindow(opts);

The precision is limited to their street and city, although ultimately this component could easily be extended to include live Tweets etc.

Optimization Challenge!!

After a series of optimizations I managed to get this API to work pretty well on the Nexus One running in AIR and Flash Player 10.1.  The framerate achieved could be considerably improved and that’s my challenge to you!

My optimized version for Eva is here and my challenge to you is to get used to the API such that you can achieve between 13-15FPS from this component running on the Nexus One.

I have deliberately switched on various problematic rendering features and made it a little tricky.  The goal here is for you to practice at bringing desktop code into the mobile environment – and making it ship quality.

All you need is Flash Professional CS5, Flash Builder 4 and a Google Maps API Key.

Download