Occasionally Connected Yahoo! Maps
The first day of the onAIR Bus Tour was nothing short of an amazing experience. There’s nothing quite like spending the better part of twenty hours with some of the best developers I know, while cruising the West Coast on a bus fit for a rock star. I spent a good portion of that time working on my geocoding application, and found some interesting challenges with Yahoo! Maps in an occasionally connected environment (OCC).
First off I should say that the Yahoo! Maps API is really just amazing. It is so easy to use just a few simple lines of code to have a very robust map on the screen. The problem however is that the API expects you to be online and in a browser. In the case of AIR you can’t really depend on connectivity, but you do have the ability to check for it.
I set out today to add connectivity intelligence to the geocoding application. Determining network presence, and being notified of changes was easy - but what about those API’s that expect me to be online? That turned out to be pretty difficult.
To be clear here, I’m not talking about using the maps when offline. I simply wanted the application to start without errors even if it couldn’t reach the Yahoo! servers (where the API resides). The mapping API’s are loaded by means of a script tag in the HTML. This is normally processed as part of the page loading operations. If there’s no network however, then the page load will never complete successfully.
I figured I would check for network status and then inject the script tag into the DOM if the application is connected.
The first problem I ran across here was that I didn’t have notification of when the script was finished loading. I needed to wait for that before I can instantiate the map objects. A simple “onload” event handler would take care of that, right? Not really, because the main API JavaScript file is just references to more JavaScript files.
The second problem then became waiting for all those other files to be loaded. Since the main file loads all the other files dynamically, there was no direct means for me to add in some additional “onload” handlers. I got around this by loading the first JavaScript file as text, parsing out the URL’s of the files yet to be loaded, and then building the script tags myself - with my own listeners of course.
This sounds really easy, but I couldn’t get regex to work in ActionScript (from JavaScript) or in JavaScript itself. Not impossible then, just more work.
Overview of the process:
- Application starts, loads main resources, and paints the UI
- Network presence check
- If there’s a network, then read the main Yahoo! Maps JavaScript file as text
- Parse the text for the URL’s of the additional API files
- Incrementally inject a script tag for each JavaScript file
- Once the files are all loaded, instantiate the map object
My favorite thing about this is that the application actually assumes no connectivity, and paints the UI accordingly. If connectivity is established at some point, then the Yahoo! Maps API is loaded as described above, and the UI is adjusted accordingly. If the network drops, the UI will again change to reflect that status.
Now that I can work both online and offline, my next task is to build the ability to import JPEG files. I didn’t have many samples until today, as the bus tour has been a great resource for photography. I’m going to start with native dialog file selectors, but I’d like to add in drag and drop from the operating system as well.
The first onAIR venue in Seattle is going great! I’ve given my two presentations for the day, and aside from helping a few folks out, I’m eager to get back to this geocoding project. If you can make it to any of the venues and want to see the hoops I’ve jumped through, head to the web site, register, and track me down at an event. We’re all looking forward to meeting as many developers as we can!