How to use Yahoo! Maps in Flex
Searching for a city To search for a location we have to use the Address class of Yahoo! Maps. We do search for “Bucharest” in the last line of init function. geocodeAddress function do make use of Address class of Yahoo! Maps, we create a new Address object and add two event listeners: GeocoderEvent.GEOCODER_ SUCCESS and GeocoderEvent.GEOCODER_ FAILURE . If the search for the address is a success the GeocoderEvent.GEOCODER_SUCCESS will be triggered and we can retrieve the needed latitude and longitude as a LatLon object and the zoom level. If the search is successful the _address object can be used to get other needed data. To get the result use Address(evt.target).geo coderResultSet.firstResult .
Once you have those three requirements satisfied we can go on. Take YahooMap.swc file from the downloaded archive and copy it into your / libs/ folder of your Flex application (the file is in / YahooMap/Build/Flex / folder in your archive). The file is automatically added to build path. Building a simple application with Yahoo! Maps Now we will start coding. We will create a 600 by 600 pixels application that will contain two things: an UIComponent and Script . Yahoo! Maps for Flex library needs an UIComponent to display the graphics on it and that is why we user UIComponent . The main application has a creationComplete event set that will initialize our Yahoo! Maps.
The application contains three important variables: _ yahooMap , _address and _apiId . I’ll explain each of them… • _apiI d is, as its name says the Yahoo! Maps API Id • _ yahooMap will be the object that will display the map • _address our searched address address_geocoderSuccess and address_geocoderFailure . As you already know in init we initialize our _yahooMap object that will be added to the mapHolder UIComponent. We need to set the following things to the map: API Id, Pan control, Zoom Control and the type of the Map. Then we have four functions: init, geocodeAddress,
Listing 1. Code behind the simple Yahoo! Maps application
// 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); width="600" height="600" creationComplete="init()"> 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.GeocoderRe sult; import com.yahoo.maps.webservices.geocoder.events.Geoc oderEvent; 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_"; // 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); } // 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"); ]]>
}
03/2009 (5)
47
Made with FlippingBook HTML5