The topic around dynamically resizing Yahoo! Maps in Flex came up in the Yahoo! Flash Developer Group last week. At the same time, I had also been trying to solve this problem for a project I’m working on. At first this problem seemed quite mysterious. I could resize the map, but it was always resizing to a 3×2 aspect ratio. If I had a container was not 3×2, the map would pin itself to the top of the container and have white borders to the right and bottom. I tried all possible combinations of properties (height, width, percentHeight, percentWidth, scaleContent) with no luck.
Yahoo! provides an AS3 API for Flex 2.0 developers that includes a SWF (built in AS2.0) and a SWC. The AS3 AstraWebAPI libraries are a set of wrapper tools that facilitate access to Yahoo!’s Web APIs from Flex 2.0 and Flash. This library works quite well, but it only exposes a subset of the API calls that are allowed by the Yahoo! API’s - so as a Flex developer you only have access to the most common calls. Unfortunately the AstraWebAPI swc does not include the setMapSize method that is defined in the as2map.swf file. So how do we access this method?
A little background. as2map.swf is an ActionScript 2 swf that you load into your Flex application when you instantiate a Yahoo Map. The AstraWebAPIs.swc file then provides a set of wrapper classes that uses ExternalInterface to communicate between your Flex application and the as2map.swf. It sounds kind of ugly - and is - but until Yahoo! releases an AS3 version of their mapping tool, this method will have to do.
So how do we make API calls to methods not exposed by AstraWebAPIs.swc file? My solution is to call the ExternalInterfaceBuffer directly from within your Flex application. It’s pretty easy to do…
import com.yahoo.webapis.maps.utils.ExternalInterfaceBuffer;
private function resizeMap(someWidth:int, someHeight:int) : void {
// SWFDOMID and UNIQUEID are constants set in your existing map code
var apiCall:String = SWFDOMID + ".setMapSize" + UNIQUEID;
var EIBuffer:ExternalInterfaceBuffer = ExternalInterfaceBuffer.getInstance();
EIBuffer.addCall({method:apiCall, data:{w:someWidth, h:someHeight})
}
I have provided an example (with source available here) that you can look at.
