Kevin Hoyt

Among the early AIR (then Apollo) applications was MapSnap, which is developed and maintained by Christian Cantrell. MapSnap eventually became MapCache with the launch of Adobe AIR. MapCache is developed using Flex, and demonstrates local file IO, clipboard access and native drag and drop using PNG-encoded map images. Given that Yahoo! Maps offers a great API for the JavaScript developer, I decided to port this application over to HTML/CSS/JavaScript.

Getting a map from Yahoo! Maps and putting it into an HTML page couldn’t have been easier. The Yahoo! API documentation is very thorough offering numerous examples right “out of the box.”

Being that the maps are from Yahoo! however, I wanted to maintain that look and feel, which I found to be one of the hardest tasks. Flex offers highly extensible buttons as part of the core API. To make the equivalent in HTML however, I had to start slicing and dicing in a graphic editor. I then also had to tie up the events for the different button states myself. This is of course easy enough, but it’s also very tedious.

The ability to include and reference public classes from a Flash SWF file was one of the neat AIR tricks I got to use on this project. Specifically I used the PNGEncoder class from the ActionScript 3 Core Library project off Google Code. This provided me with blazing fast encoding of the image tiles into a single file for saving to disk. All I had to do was use the SCRIPT tag and point at the SWF file. I think this opens a great door of possibilities to the JavaScript developer.

For what it’s worth, I also ported the PNGEncoder over to pure JavaScript. It turned out that bouncing between interpreted JavaScript and JIT ActionScript was just not as fast as pure ActionScript JIT code. Not having to worry about the user having the Flash Player plug-in, it was an easy decision then to choose to inject the dependency.

I also had a lot of fun using the Matrix class to specify cropping and scaling. In fact, one of the improvements I made to Christian’s version is to actually include a full version of the map, but scaled down to a thumbnail size for drag-and-drop operations. The Matrix class goes hand in hand with the BitmapData class, which are both available to the JavaScript developer using AIR. I’ll be talking about these specific classes more in the future.

I referenced none of Christian’s original code, and built this entirely on my own from the ground up. It took me somewhere around twelve man-hours to finish. Not bad given no previous experience with Yahoo! Maps, and considering the features of saving to disk, native clipboard support and native drag-and-drop that AIR offers. If you want the application or the source, I have made them both available for download.

This entry was posted on Monday, June 18th, 2007 at 1:16 pm and is filed under AIR, Ajax, HTML, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.