Google Maps

Farewell Google Maps API for Flash

Well, the Google Maps API for Flash has been officially deprecated as of September 2, 2011. Bummer. I had hoped for an update to deal with better touch support and start up times. Although there are some alternatives out there (ESRI and Mapquest), so you still have solutions. FYI: Yahoo also recently discontinued their mapping solution for ActionScript as well.

I guess for desktop solutions, I will be mixing in HTML elements into my apps. For mobile, I will still use the StageWebView solution(until we get a Native Extension that will access the device’s native map solution). Update: Lee Brimelow from Adobe just posted a video demonstrating a Mapping Native Extension.

Integrating maps into your mobile application

For many mobile applications, having some form a location-based capability is a requirement. This article will show how you can add a mapping solution to your mobile app. Most of the major map providers (Google, Yahoo, MapQuest, and Microsoft) provide ActionScript solutions that you can easily incorporate into project. Unfortunately, none of the currently available are designed for touch.

Recently, I developed the attendee guide for the recent 360|Flex East conference, and needed to add a map of the conference location, along with nearby restaurants. The application was being developed using Flash Professional CS5 (with AIR for Android extension), as the Flex 4.5 mobile framework was not yet available. My first attempt was to use the existing swc from Google. I had used their APIs before, and was familiar with the setup.

It took almost no effort to integrate the latest swc and have a working Google Map in my AIR for Android application. But there were issues to deal with…

The SWC version

 

One of the first issues I encountered was the default map controls were not optimized for touch. I had a feeling that this would be the case. Also the initialization time for the component was extremely long (30 seconds or more). I decided to address the load time first, since if I couldn’t bring up the map quickly, I would need to find a different solution. Looking at the code revealed no clues as to where I might be able to streamline the initialization. One of the issues of the long load time was there was no feedback given to the user while the component performed its initialization. Once the component was added to the stage, it assumed the top most layer and you could not overlay any elements (like a loading spinner). The screen would just show a grey rectangle where the map would be. Not the best user experience.

Since there was nothing I could do while the map did it’s thing, I decided to see if adding something before the map was actually loaded might give enough feedback to the user to make the experience acceptable. I knew from my years of prototyping that this type of solution just might do the trick. So I added a standard spinner and some loading text to the frame before the map, and a simple 5-second timer. I demonstrated each version around the office, and confirmed that folks thought the map did load faster on the version with the loading screen. In Apple’s Interface Guidelines, it refers to this illusion when talking about the splash screen.

Loading Animation

So, with the loading distraction in place, I could now address the touch-ability of the default map controls. Typically there are both pan controls and zoom controls to interact with. Since users could directly pan the map by dragging, I did not need to create a touch-friendly version of that control. I did still need to address the ability to change the scale of the map.

Unfortunately, here is where I ran into an actual hardware issue. At the time I was developing the application on the Google Nexus One (one of the few devices running FroYo, a requirement for AIR for Android), but there is a known issue with Multitouch on that device. This meant that a pinch and zoom gesture would be problematic. I needed to find a different solution to allow the user to change the scale of the map.

I created touch-friendly zoom in and zoom out controls and added them to the screen once the map finally loaded. Now I had a basic functioning map in my AIR for Android application and had it running on a device.

Google Map - Completed swc version

Now I needed to add the markers for the restaurants and the conference venue to the map. Creating markers is a fairly straightforward process of converting my graphics into MovieClips, enabling them for Export for ActionScript, then adding a bit of code to properly place them on the map. I manually geocoded (Update: Thanks to Randy Troppmann for spotting I had the term reversed) the venues into their latitudes and longitudes, so I did not need to look up that static information every time the map was accessed. The next test was to see how the info-windows would function. What good is seeing the marker for a bar if you can’t see the address?

This is where I hit the proverbial brick wall. The info window would appear, but the controls were far from usable on a touch device. Despite my best efforts, I could not modify the info window enough to make the controls usable on a mobile device.

So now what?

I decided to investigate using a new feature in AIR for Android called StageWebView. A little background on StageWebView; this is a new API that allows AIR developers to embed HTML content into their mobile applications and render it using the platform’s native rendering engine.

I removed the Google Map SWC from my project and added the following code:

var webView:StageWebView = new StageWebStage();
webView.stage = this.stage;
webView.viewPort = new Rectangle(0, 100, stage.stageWidth, stage.stageHeight);
webView.loadURL(http://map.google.com);
addChild(webView);

I recompiled the project and loaded it onto my mobile device, and a touch-friendly Google Map was displayed.

The load times were acceptable (I still kept my fake pre-loader, as there was a bit of load time ). I had touch-friendly zoom controls and scrolling. With this technical proof of concept validated, I quickly wrote a custom web page to house my map and markers.

Completed HTML version

I was still unsure how the info-windows would appear. To my pleasant surprise, the info-windows were quite touch-friendly . They were not as nice as the native elements, but certainly more usable that the ones in the SWC’s.

Info Window

So, now I have a mobile friendly map solution in my AIR for Android application. Hopefully this solution will work for you when you need to add a map to your mobile application.

Sample HTML map.

FITC: AIR for Android Schedule App Available

Application Home Screen

FITC Application Home Screen

In the process of preparing the conference applications for 360|Flex DC, I decided to take the framework I was developing using the prerelease for AIR for Android and try to crank out a conference application for FITC’s upcoming conference. I knew I was going to be doing some manual data entry, but thought it would be a fun challenge.

Taking the lead from the visual design of the existing website, I began to skin my application to reflect their style. Once their iPhone app was released, I modified a few elements to stay in visual sync.

The app is driven from an internal SQLite database, and was built using Flash CS5 Professional.

Wish I was attending FITC, and hear all the great talks, but not this year.

You can download the APK, but you will need to have the latest AIR for Android installed on a device (running Froyo) in order for it to run.

I have to give a big thank you to Renaun Erickson for helping me track down a nasty bug.

Features

Schedule

The app features all three days, plus the workshops.

I did not get to add any physics (shameful since my degree is in physics) to any of the lists, so don’t expect a flick gesture to do anything. You never know, there might be an update during the show, and since I don’t have to wait days or weeks for some other company’s approval, I can just send out a tweet to a new apk file.

I was really impressed at the overall performance I was able to achieve with the app. I know it is not a game, but the list scrolling seems smooth, and for the most part the development process is very smooth.

Session Details

The session details

I was able to add the favorite functionality to the application, simply touch the star icon in the upper left, to mark the session as a favorite. Now, you can access your favorite sessions right from the home screen. I feature I did not get to was being able to view the presenter’s biography from within the session details. Like I said before, there might be an update…

Speaker List

Speaker List

One thing I like on the iPhone is their user interface for contacts. I was not able to create an index feature for the speaker list, so Doug Winnie is just going to have to scroll to find himself. I hope in future builds of this framework I will have a search function. I also debated which is ‘best’ order to display a list like this? Love to hear your thoughts on it.

Voodoo Lounge Sessions

I also included the schedule of the Voodoo Lounge. I plan on having it up on my screen next week, but I doubt I will be enjoying a beer (Coke Zero will have to do).

I hope you find this application useful and welcome any feedback you have.

Google Maps API for Flash + AIR

When I gave my talk about mapping solutions in Flash/Flex/AIR, one point I made was due to the TOS with Google Maps, you would be unable to use it in an AIR application. Well as of Tuesday, that is no longer true. The Google Maps team just released version 1.8, and this version can be used in AIR apps!

For more information (and screenshots!), read through their snazzy new tutorial on developing AIR apps in Flex Builder.

Mapping Talk from August San Diego Flash User Group Meeting

At the August San Diego Flash User’s Group meeting, I gave a presentation on mapping solutions that are available for use in the Flash Platform. I want to say thanks to Zach Graves at Yahoo! who helped with some of the finer points of the Yahoo! solution. The slides are very visual, but there is some sample code tucked away in the deck. The main take away, was there are several great solutions available to Flash developers.

Some of the key points are: what is the map coverage of the interested area. This is an area of concern of an app I am developing. Adobe AIR support is also something to be aware of in picking your map solution.

One nice surprise was learning about the globe feature in the Mapquest 5.3 api.

Google Map Project update

Been thinking about the various issues that I had with the first release of the Google Map API for Flash. In the latest release, 1.4, the team fixed one of my issues. Mucho Thanks!. That was the issue of not being able to center a marker in both the vertical and horizontal. I folded the update into the code (I still need to merge back some mods from the Yahoo! version), and the overlays appeared exactly as I wanted them too. So good bye all that fun math I had been using!

So, I started thinking of solutions to the issue that markers pop to the top of the z-order when you rollover them. I understand the behaviour for this, I just wish it was a setting you could easily change. My first thought was to use the BitmapData class to create a composite graphic from the PNGs I was currently using. I played with this solution for a while. Then I had an AHA moment. 

While I was changing the application to use RSL to keep the file size down, I started thinking about linking in the PNGs for the overlay. Then something hit me and said, “They are fraking circles, just draw them in code” So I wrote a quick test and it worked great. Here a preview of the app.

Overlay Sample

So now I need to rebuild the engine that calculates the blast distances to create the single image. 

Google Map Update

The folks over at Google have released an update to their API for Flash. The most notable thing for me is that they addressed not being able to center in both the vertical and horizontal. The code is simply:

iconAlignment: MarkerOptions.ALIGN_VERTICAL_CENTER + MarkerOptions.ALIGN_HORIZONTAL_CENTER;

Yeah!

Now to cook up a solution to the marker z order issue. Can you say BitmapData class. I thought you could.

So long, Google Maps

Well, I spent most of the morning trying various things to get custom markers/overlays to work in the Google Maps API. The first real issue the fact that you cannot center the marker image in BOTH horizontally and vertically at the same time. Can someone explain why this is not an option??!? I have every other alignment as an option, but not this one?

So I reworked the code a bit to try to solve this. Since the overlays are circles that stack one on top of another, I need them to properly align. My solution was to use the one of the built in alignment settings to take care of one axis, then recalculated the Latitude based on the size of the overlay, so I could align it in the other direction. The visual outcome was ok, but not what you want to see in code.

Then came the straw that broke the camel’s back. It seems if you rollover the marker, it pops to the top of the z-order. Well, I’m stacking a series of concentric circles around a center point, and popping the outermost circle to the top and blocking the inner circles, well that is not going to work. I could not seem to locate a method to disable this.

So I’ve pulled the code from the site, and am now recoding it using the Yahoo! AS3 Map. If that fails, I might shelve the project, or use the HTML/JS wrapper solution that folks were using before.

Ugh! (Plus it is freaking raining in San Diego on Memorial Day weekend!)

Google Map: Part Duex

So, someone asked about getting at the Bitmap Data needed for a custom marker in the new Google Map API. Here’s what I did, I added the following MXML to my Flex project:

       <mx:Image source=”@Embed(‘images/radii.png’)” visible=”false” id=”blastOverlayImage/>

You’ll note that I set the visible property to false, so it is not shown. There was no real reason to include the image this way, I could have just loaded it via a loader. Somehow one line of MXML seemed easier than the lines of code needed for loader.

So to prepare image for the MarkerOptions function, I created a new DisplayObject and set it to the image’s content. Once it is assigned to the DisplayObject, you can do various functions on it before you pass it to MarkerOptions. The primary ones I can see are resizing and adjusting the alpha before attaching it your marker. I didn’t see any methods to do this once the marker has been created.

Here’s a snippet of code that does that:

     var dataB:DisplayObject = blastOverlayImage.content; 

    dataB.width = 300;

    dataB.height = 300;

Enjoy!