This whole geotagging concept has me thinking quite a bit.  One of the things that I’ve been concerned about is usability.  This is one of the major factors that comes into play when building any sort of website or webapp.  If you check out the geotagging concept you’ll notice that making a selection in the list centers the map and shows the appropriate info window.  It would be cool to allow users to use their up/down arrow keys to scroll through the list and center the map on the selected tag.  I consider this expected behavior when viewing any sort of information in list format.  The problem is that this isn’t always the easy thing to achieve.

Frameworks such as Adobe Flex and standard HTML select lists ship with this functionality.  When you roll your own (which I’ve done here) then you’re out of luck.  You have to come up with some fairly extensive code to accomplish this task.  With that being said I’m currently looking into a few different options that will prevent me from reinventing the wheel.  I’m not interested in a Flex solution for this app, although Adobe’s UI components do rock.  We use them extensively at work.  Adobe’s Spry framework looks promising although it’s currently in its infancy.  I’ll definitely be keeping an eye on it and many other Ajax components that could do the job.

The benefit of rolling your own code is that you understand it, therefore easier debugging.  Not only that, it’s generally pretty lightweight since you’re writing code to perform a certain task and not serve the masses of developers who may use it.

In regards to List/Map interaction I also think it’s expected behavior for a selection on the map to trigger a selection in the list.  Once again, with frameworks this is easy because someone else has already solved the problem.  Trying to accomplish this through standard HTML, JavaScript, and CSS can get tricky fast.  This obviously means I’ll spend some time looking into it

As more and more apps utilize mapping I think this will become a common UI pattern.  Users like to be given a context of where they are and provided with some level of feedback.  If you access my geotagging concept and select something in the list you’ll see the map recenter.  Now select a different marker on the map, nothing happens in the list.  The previous selection is highlighted, which is very misleading.  I’ll be working to get that fixed soon.
This may seem like common sense, but I see this type of stuff overlooked all the time.  Although the solution seems pretty straightforward, it can be a mammoth to code.  At any rate, I’ll be digging around for possible solutions and will continue to post my progress.

I recently posted about the ExternalInterface class in Flash 8, which allows for tight integration of Flash and JavaScript. Adobe (formerly Macromedia) announced today the Flex/Ajax bridge. This will provide even tighter integration of the two environments. I call them environments from the simple fact that they didn’t use to play so well together.

Developers can now access any ActionScript functionality directly from JavaScript…this is HUGE. I can only imagine using Flex to layout the application and letting JavaScript handle all the client-side logic. Actually, forget that, JavaScript could be used to dynamically instantiate Flex objects so technically all you would need is a Flex shell. The instantiation of a Flex chart from JavaScript looks like:

var chart = FABridge.swf.create(“mx.charts.ColumnChart”);

You can see a demonstration of the FABridge in action by clicking here and be sure you have the Flash 8.5 player.  There’s been insane buzz around Ajax over the last year and it’s exciting to see Adobe step up to the plate. I believe enabling developers to leverage both Flex and Ajax will lead to more compelling applications. Nonetheless, it will be interesting to see the adoption rate since there are die-hard advocates of each technology.

Recently I was faced with the challenge of embedding fonts in Flex. This enables you to set the alpha and rotation of text, which doesn’t work with standard device fonts. If you’re familiar with Flash you can set which fonts to embed by editing a text field’s properties. To achieve the same effect in Flex is a little different. First you need create a style and link to the font in your file system. Next you need to specify a fontFamily name and reference this name in any styles that you want to apply to your application. In the example below you can see that I’ve created a family called “arial” and associated it with all instances of mx.controls.Text.

The text field is created dynamically because I wanted to test embedding fonts on the fly. This still works for static fields that are created through mxml.  Click here for more information on embedding fonts in Flex.

I’ve been spending a decent amount of time lately with Flex skins (aka themes). While this is a great step forward from Flash this comes nowhere near the capabilities of raw HTML/CSS. My task was simple: create a custom background image for the Flex application. I’m working on a “Brushed Metal” theme and wanted to specify a bitmap for the background.

This process documents more of a “styling” element than skinning. I’ll cover skinning in a future post when I get everything in place. If you’ve ever used CSS to specify a background image in a standard Web page then this process should seem very familiar. The difference with Flex is that the image is applied to the “Application” tag and not the “Body” tag. It looks something like this:

[mx:Style]
Application
{
background-image: “backgrounds/brushed_metal.jpg”;
}
[/mx:Style]

Which yields the following output:

You can see that something doesn’t look completely right as the image doesn’t fill to the edges. The original is 500×500 pixels and that’s what is being displayed as the background. If you’re familiar with CSS you’re aware of setting the background repeat so that the image will tile. Unfortunately we don’t have this facility in Flex…at least not that I’m aware of. So we have to specify a background-size attribute:

[mx:Style]
Application
{
background-image: “backgrounds/brushed_metal.jpg”;
background-size: “100%;
}
[/mx:Style]

Which yields the following output:

You’ll notice that the background image actually stretches when the browser is resized. I wouldn’t say that this is the most desired result, but if you choose your image wisely then everything should work out fairly well.

As a stepping stone to porting Google Maps to Flex I’ve taken the approach of placing the maps on top of Flex. This is done through the use of a transparent background approach where the background of the Flash movie is made to let anything underneath it show through. This is done by setting a parameter called wmode to transparent. You can see the results in the image below.

What’s happening here is that the map div layer is actually getting rendered on top of the Flash movie. Therefore, it gives the appearance that the map is actually inside of Flex. From an end user standpoint you can’t really tell the difference. From a development standpoint you can make JavaScript calls to communicate between Flash and the map object. This is a little extra work, but serves the purpose of what I’m trying to do initially.

I’m confident that the port of Google Maps to Flex will happen whether it’s by me, somebody else, or Google themselves. I know the last option sounds crazy, but Google did recently switch all their on-line video content to Flash. Flash video is tough to beat. I can envision a truly rich mapping application with video and push technology where data arrives and is displayed automatically on the map without polling or refreshing. Map sharing could even be implemented.

With all this being said, let me get back to the point. Taking the div approach provides a seamless experience for the user. Events in Flex are broadcasted to the map div and vice versa. If you look at the following example

http://www.db75.com/dev/gmaps/flex_gmaps4.htm

You’ll notice that clicking on a point in the map selects a record in the table beneath it. These are two completely different environments, one DHTML and one Flash. They communicate with each other through JavaScript calls. When a record is selected in the table the appropriate location on the map is centered in the view. One very cool thing about this is that you can use your up/down arrow keys to move through the table and watch the different points pan into view. All this functionality comes standard with the Flex DataGrid control and a simple change event is responsible for calling the JavaScript that centers the map.

You can even drag the horizontal divider and the map will resize appropriately. This is done again by broadcasting an event from Flex to the map div. This functionality is a bit quirky and needs some work since the map doesn’t resize until the mouse is released. There is no feedback given to the user when they’re dragging and if you drag upwards the map actually covers the divider.

The other key point I’d like to mention is to make sure that your div layer is placed after your Flash object/embed code. The browser renders this code from the top down so you want the map to be rendered on top of the Flash movie. I experienced some crazy results when placing the map div before the Flash code. View the source of the link above if you need an example.

With all this being said I think there’s enormous potential with integrating Google Maps and Flex. Although this isn’t “true” integration it does provide a tightly integrated experience for the end user. Please feel free to contact me if you have any questions about this implementation. It’s very straight-forward and appears to be a viable solution (unless you’re in Safari and that’s a different story).

I’m currently involved with a project where Google Maps needs to be integrated with Flex. While this souds like a trivial task if you’re familiar with both technologies you’ll know that they don’t play nicely with each other.

What we recently concluded is that we should port Google’s API to Flex so that the functionality could live entirely in Flex. After doing a good amount of research and reverse engineering this weekend I’ve come to the conclusion that this is a rather complicated task. It’s not necessarily the code that’s the problem, but getting an understanding of how Google handles converting lat/lons and linking them to tiles. Google’s maps are tiled and some sort of algorithm is used to get the default tile based on location and build the map around it. There are all sorts of blog posts discussing how this was accomplished with older versions of the API. The problem is that several versions later Google has taken a different approach.

While I’m not completing giving up I’m going to research a different approach that consists of using a transparent background in Flash. This will allow the map div layer to show through as though it were actually inside the Flash content. The layer can be hidden and shown as necessary. You can see an example of it here:

http://www.db75.com/dev/gmaps/flex_gmaps.htm

This hasn’t been thoroughly tested and I’m currently going through the cycles of testing a few things. Yet if this does work without any major issues this means we can leverage the Google API and not have to spend a lot of time rewriting in Flex. I’ll continue to post any future findings here.