FlexAbility

I recently started playing with the Yahoo! Maps AS3 Communication Kit and immediately ran into bizarre sizing behavior. Specifically, I was creating a map within a Canvas within a TabNavigator. I wanted the map to simply fill the Canvas.

Depending on how I set the map’s width and height, and depending on what size and shape the Canvas container was at the moment, the map would either be much too small, or be much too large and extend beyond the Canvas’s right and bottom border.

Here’s what I did to fix it:

private function loadMap():void{
_map = new YahooMapService();
_map.UUID = UNIQUEID;
_map.swfDomId = SWFDOMID;
_map.apiId = YAHOOAPIKEY;
_map.mapURL = MAPSWF;
_map.scaleContent = false;
_map.explicitHeight = computeMapHeight();
_map.explicitWidth = computeMapWidth();
this.addChild( _map );
}

If you’ve played with Yahoo! maps at all, the first four _map… lines will be familiar. It’s the next three that fix my problem.

computeMapHeight() and computeMapWidth() simply subtract the Canvas’s border thickness (x2) from its height and width respectively.

I haven’t tested this fix in other containers but suspect that it would help all cases.