Using Yahoo! Maps in a Flex project

The following example shows how you can embed a Yahoo! map into a Flex/ActionScript 3.0 project.

Full code after the jump.

Before getting started, you need to first get an API key from Yahoo! and then download the mapping component and put it in your /libs/ folder in your Flex Builder 3 project:

• Click here to get Yahoo! Maps API key.
• Click here to download the Yahoo! Maps ActionScript 3.0 component.
• Copy the YahooMap.swc file from the .ZIP file’s /YahooMap/Build/Flex/ directory and copy it into your Flex Project’s /libs/ directory.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/03/using-yahoo-maps-in-a-flex-project/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.events.ResizeEvent;
            import mx.controls.Alert;

            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 init():void {
                yahooMap = new YahooMap();
                yahooMap.init(APP_ID, mapContainer.width, mapContainer.height);
                yahooMap.addPanControl();
                yahooMap.addZoomWidget();
                yahooMap.addTypeWidget();
                mapContainer.addChild(yahooMap);

                geocodeAddress(textInput.text);
            }

            private function geocodeAddress(value:String):void {
                address = new Address(value);
                address.addEventListener(GeocoderEvent.GEOCODER_SUCCESS, address_geocoderSuccess);
                address.addEventListener(GeocoderEvent.GEOCODER_FAILURE, address_geocoderFailure);
                address.geocode();
            }

            private function address_geocoderSuccess(evt:GeocoderEvent):void {
                var result:GeocoderResult = Address(evt.target).geocoderResultSet.firstResult;
                yahooMap.centerLatLon = result.latlon;
                yahooMap.zoomLevel = result.zoomLevel;
            }

            private function address_geocoderFailure(evt:GeocoderEvent):void {
                Alert.show("Unable to geocode address: " + address.address);
            }

            private function mapContainer_resize(evt:ResizeEvent):void {
                if (yahooMap) {
                    yahooMap.setSize(mapContainer.width, mapContainer.height);
                }
            }

            private function button_click(evt:MouseEvent):void {
                geocodeAddress(textInput.text);
            }
        ]]>
    </mx:Script>

    <mx:String id="APP_ID" source="appid.txt" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="Address:"
                    direction="horizontal">
                <mx:TextInput id="textInput"
                        text="601 Townsend St, San Francisco, CA 94103" />
                <mx:Button id="button"
                        label="Submit"
                        click="button_click(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:UIComponent id="mapContainer"
            width="100%"
            height="100%"
            resize="mapContainer_resize(event);"/>

</mx:Application>

View source is enabled in the following example.

For more information and examples, see the “Yahoo! Maps ActionScript 3.0 Component homepage”.