Flex 2.0 and Yahoo Maps

Flex 2.0 and Yahoo Maps

If you are programming in Flex, it looks like the only native maps solution is Yahoo Maps. However Yahoo so far has been very slow to update their Flex 1.5 (Actionscript 2.0) based API to Flex 2.0 (Actionscript 3.0). Instead they created a wrapper on top of the existing Flex 1.5 based ones.

I downloaded these wrappers, followed the installation instructions. However the first problem, I ran into was the fact that there was really no easy way to make the map 100% in size and make it resizable as you resize the browser window. All the samples were given for a fixed sized map and simply making the size 100% instead did not work. A quick search on Google revealed the same problem experienced by others as well, and the solution provided there was not really robust.

The problem is that the map itself needs to be explicitly resized and there appears to be no method exposed in AS3 to do that, whereas the AS2 version does have method called Map.setSize. This is also exposed as a method called setMapSize as an ExternalInterface and it is distributed in the “as2map.fla” file. However it looks like they forgot to expose it in the wrappers. To fix this, I added the following to the “YahooMapService.as” file as a method of the YahooMapService class as shown below:
public function setMapSize(width:Number, height:Number): void {
EIBuffer.addCall({method:swfDomId + ".setMapSize" + UUID, data:{w:width,h:height}});
}
The next step is to handle the resizing related events in the Flex application to call this method whenever a resize happens. Note that this solution does not allow live resizing, as you will have to explicitly call this method whenever a resize event completes.

For the overall application I handle the creationComplete and updateComplete events. Note that onResize event is not the correct event to handle as the sizes of all components are not computed yet and you would get incorrect results. Here is the code for the test application that I created for this.

This entry was posted on Saturday, June 2nd, 2007 at 2:58 pm and is filed under Flex, Programming. 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.