Yahoo! Developer Network - Flash Developer Center - Yahoo! Maps AS3 Component Examples

Yahoo! Maps AS3 Component

The all-new Yahoo! Maps component for Flex 3 enables you to add a map to a wide-range of web and desktop applications. Included in the API is support for other Yahoo! APIs including the geocoder, local search and traffic APIs along with an advanced marker and overlay manager to allow you to easily represent data on the map.

Using the YahooMap component in your Flash, Flex, Ajax or AIR projects gives you the ability to develop anything from a simple map mash-up to full application utilizing Yahoo! Maps.

Using the YahooMap AS3 Component in ActionScript and Flex 3 applications

This sample ActionScript application creates a YahooMap object that demonstrates how to render the map and center on a location.

package {
	import com.adobe.viewsource.ViewSource;
	import com.yahoo.maps.api.YahooMap;
	import com.yahoo.maps.api.YahooMapEvent;
	import com.yahoo.maps.api.core.location.LatLon;
	
	import flash.display.Sprite;

public class YahooMap_SimpleExample extends Sprite
	{
		private var _yahooMap:YahooMap;
		
		public function YahooMap_SimpleExample()
		{
			ViewSource.addMenuItem(this, "srcview/index.html", true);
			
			this.stage.align = "topLeft";
			this.stage.scaleMode = "noScale";
			
			// this examples uses an application id passed into the app via FlashVars.
			// Get your own from the Yahoo! Developer Network @ http://developer.yahoo.com/wsregapp/
			var appid:String = this.loaderInfo.parameters.appid;	
			
			// creating a new yahoomap object
			_yahooMap = new YahooMap();
			
			// listening for the MAP_INITIALIZE event, when it fires off, we're able to start interacting with the map.
			_yahooMap.addEventListener(YahooMapEvent.MAP_INITIALIZE, handleMapInitialize, false, 0, true);
			
			// passing our application id, width and height as parameters to initialize the map
			_yahooMap.init(appid, stage.stageWidth, stage.stageHeight);
			
			_yahooMap.addPanControl(); // adds ability to pan and click on the map.
			_yahooMap.addZoomWidget(); // adds a zoom control widget to the map.
			_yahooMap.addTypeWidget(); // adds a map type control widget to the map.
			
			this.addChild(_yahooMap); // adds the yahoomap object to the display list.
		}
		
		private function handleMapInitialize(event:YahooMapEvent):void {
			_yahooMap.zoomLevel = 7; // sets the zoom level to a high-level city view.
			_yahooMap.centerLatLon = new LatLon(37.779160,-122.420049); // setting the center latlon over san francisco,ca
		}
	}
}

Screen capture of YahooMap ActionScript Example

To see a live example, please install Adobe Flash Player version 9 or higher.

Initializing a YahooMap with MXML

The approach to adding a YahooMap to your Flex application is similar, but requires that you add the YahooMap object as a child of a UIComponent. This example demonstrates how to create a map in MXML and how to geocode a location.

<?xml version="1.0" encoding="utf-8"?>  

<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" 
	creationComplete="handleCreationComplete();" 
	viewSourceURL="srcview/index.html">
	  
	<mx:Panel title="Yahoo! Maps - Simple Flex Example" top="5" left="5" bottom="5" right="5">
		
		<mx:UIComponent id="mapContainer" width="100%" height="100%"/>
	</mx:Panel>
    
    <mx:Script>  
        <![CDATA[
            import mx.events.ResizeEvent; 
			
			// import maps classes.
            import com.yahoo.maps.api.YahooMap; 
            import com.yahoo.maps.api.YahooMapEvent; 
            import com.yahoo.maps.api.core.location.Address; 
            import com.yahoo.maps.webservices.geocoder.GeocoderResult; 
            import com.yahoo.maps.webservices.geocoder.events.GeocoderEvent; 
            
			private var _yahooMap:YahooMap; 
			private var _address:Address; 
			 
			private function handleCreationComplete():void  
			{ 
				// this examples uses an application id passed into the app via FlashVars.
				// Get your own from the Yahoo! Developer Network @ http://developer.yahoo.com/wsregapp/
				var appid:String = Application.application.parameters.appid;
				
				// create a new YahooMap object.
				_yahooMap = new YahooMap(); 
				
				// list for the MAP_INITIALIZE event from YahooMap
				_yahooMap.addEventListener(YahooMapEvent.MAP_INITIALIZE, handleMapInitialize);
				
				// initialize the map, passing the app-id, width and height.
				_yahooMap.init(appid,mapContainer.width,mapContainer.height);
				 
				mapContainer.addChild(_yahooMap); 
				mapContainer.addEventListener(ResizeEvent.RESIZE, handleContainerResize); 
				 
				_yahooMap.addPanControl(); 
				_yahooMap.addZoomWidget(); 
				_yahooMap.addTypeWidget();  
			} 
			 
			private function handleMapInitialize(event:YahooMapEvent):void  
			{ 
				// creating a new address object, passing our address string as the single parameter. 
				_address = new Address("141 pike st. seattle,wa"); 
				 
				// listen for the GEOCODER_SUCCESS event dispatched when the data comes back from the webservice.
				_address.addEventListener(GeocoderEvent.GEOCODER_SUCCESS, handleGeocodeSuccess);
				
				// send the geocode request.
				_address.geocode(); 
			} 
			 
			private function handleGeocodeSuccess(event:GeocoderEvent):void  
			{ 
			    // retrieve the first result returned by the geocoder. 
			    var result:GeocoderResult = _address.geocoderResultSet.firstResult; 
			    
			    // then we'll get the zoom level and center latlon to position the map on. 
			    _yahooMap.zoomLevel = result.zoomLevel; 
			    _yahooMap.centerLatLon = result.latlon; 
			    
			} 
			 
			private function handleContainerResize(event:ResizeEvent):void {
				// set the size of the map based on its containers size.
			    _yahooMap.setSize(mapContainer.width,mapContainer.height); 
			}
        ]]>  
    </mx:Script>  
</mx:Application>

View the Flex example.

To get further in-depth with the API and download sample application, head over to the examples page. Also, be sure to check out the class reference documentation.