FLEX{er}

How To Use Yahoo! Maps in Flex
How To Add a Custom Marker On Yahoo! Maps

This article will explain how to integrate the Yahoo! Maps into your Flex application. Is important to know that in this we are using Flex Builder 3 and that the example and the code won’t work in Flex Builder 2 (it seems that in Flex Builder 2 there are some compiling problems with the SWC file).

What you need? Just three things:

Now that you got both copy the YahooMap.swc file from the downloaded archive and copy it into your /libs/ folder of you Flex application (the file is in /YahooMap/Build/Flex/ folder in your archive).

Now the code… is simple and commented that you may easy understand how to use Yahoo! Maps.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute"
    width="600"
    height="600"
    creationComplete="init()">
    <mx:UIComponent id="mapHolder"
        width="100%"
        height="100%"/>
    <mx:Script>
        <![CDATA[
            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;
 
            import mx.controls.Alert;
 
            private var _yahooMap:YahooMap;
            private var _address:Address;
 
            // Yahoo API Id - take it from Yahoo!
            private var _appId:String = "_REPLACE_THIS_WITH_YOUR_KEY_";
 
            // initialization
            private function init():void 
            {
                // new yahoo map
                _yahooMap = new YahooMap();
                // setting its apiId, width and height 
                _yahooMap.init(_appId, mapHolder.width, mapHolder.height);
                // adding controls
                _yahooMap.addPanControl();
                _yahooMap.addZoomWidget();
                _yahooMap.addTypeWidget();
                // adding map object
                mapHolder.addChild(_yahooMap);
                // searching for "Bucharest"
                geocodeAddress("Bucharest");
            }
 
            // geocoding address
            // from "Bucharest" to geocode coords
            private function geocodeAddress(value:String):void 
            {
                // new Address object
                _address = new Address(value);
                // aading success and failure events
                _address.addEventListener(GeocoderEvent.GEOCODER_SUCCESS, 
                    address_geocoderSuccess);
                _address.addEventListener(GeocoderEvent.GEOCODER_FAILURE, 
                    address_geocoderFailure);
                // trying to geocode
                _address.geocode();
            }
 
            // handle event for successful geocoding
            private function address_geocoderSuccess(evt:GeocoderEvent):void 
            {
                // getting the result after geocoding
                var result:GeocoderResult = 
                    Address(evt.target).geocoderResultSet.firstResult;
                // setting the map to the found location
                _yahooMap.centerLatLon = result.latlon;
                // setting zoom
                _yahooMap.zoomLevel = result.zoomLevel;
            }
 
            // handle event for unsuccessful geocoding
            private function address_geocoderFailure(evt:GeocoderEvent):void 
            {
                // just display an alert
                Alert.show("Unable to get to the address: " + _address.address);
            }
 
        ]]>
    </mx:Script>
</mx:Application>