ActionScript Development
Having those details (latitude, longitude and zoom level) we set the Yahoo! Maps Object ( _ yahooMap ) to the retrieved location. On the case of failure ( GeocoderEvent. GEOCODER_FAILURE is triggered) search we alert the user. The code, see (Listing 1) is the whole code needed for this simple application and Figure 1 shows you how it should look like. More complex use Next… we will implement a more complex task: creating a custom marker. If you will look for documentation you can find it on Yahoo! Developer Network http://developer.yahoo.com/ maps/ but is insufficient for complex tasks. So we hope that Yahoo! will make a better help for the API. First we need to extend the normal marker class http://developer.yahoo.com/flash/ maps/classreference/com/yahoo/maps/api/ markers/Marker.html which is a hassle with this lack of documentation. Secondly you need
to add this custom mark to your map which is very simple. So we will have two pieces of code: CustomMarker.as (our custom marker) and YahooMapsSimple.mxml (our main application). Explaining the main application This is what happens when the application starts. init function is called and inside the Yahoo! map is created ( _yahooMap object). The _yahooMap object has an event listener and when the map is initialized we start the procedure of adding the custom marker. The function that does that is handleMapInit . We cannot start the adding procedure before knowing that the _yahooMap object exists because that will rise errors saying that _ yahooMap is null and because of that we use the YahooMapEvent.MAP_INITIALIZE event to tell us that the map is no more null. First add the controls then we position the map to the needed location and set the desired zoom.
In order to display a marker we need to use the LocalSearchItem class of the Yahoo! Maps API. We won’t do a real search but instead we will create a search item that is already found. We will do that using an XML that will contain some predefined nodes . To see the all possible nodes see the LocalSearchItem class description here: http://developer.yahoo.com/ flash/maps/classreference/com/yahoo/maps/ webservices/local/LocalSearchItem.html The nodes in the xmlItem variable will be used to display text about the marked point on the map. A normal marker needs lat and lon nodes to be set to show the marker at the desired geo-point but because we are building our own custom marker we will not use those and instead we will set the position in the constructor of our custom mark. After setting the XML we create the SearchItem and the CutsomMarker object and add it to the yahoo map using the markerManager and its addMarker method.
Listing 2. Main application of the complex use of Yahoo! Maps
} private function handleMapInit(e:YahooMapEvent):void { // adding controls _yahooMap.addPanControl(); _yahooMap.addZoomWidget(); _yahooMap.addTypeWidget(); // centering map var latlon:LatLon = new LatLon(44.401314,26.073638); _yahooMap.centerLatLon = latlon;
width="600" height="600" creationComplete="init()"> // setting zoom level // smaller means closer _yahooMap.zoomLevel = 1; // setting data for custom marker var xmlItem:XML = import com.yahoo.maps.api.markers.events.MarkerEvent; import com.yahoo.maps.webservices.local.LocalSearchI tem; import com.yahoo.maps.api.core.location.LatLon; import com.yahoo.maps.api.YahooMap; import com.yahoo.maps.api.YahooMapEvent; import com.flexer.CustomMarker; // our map private var _yahooMap:YahooMap; // our custom marker private var _yahooMarker:CustomMarker; // Yahoo API Id – take it from Yahoo! private var _appId:String = "__YOUR_YAHOO_MAP_API_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); _yahooMap.addEventListener( YahooMapEvent.MAP_INITIALIZE, handleMapInit); // adding map object mapHolder.addChild(_yahooMap);
; // creating a new local search item var myLocalSearchItem:LocalSearchItem = new LocalSearchItem(xmlItem); // creating our custom marker based on local search item
_yahooMarker = new CustomMarker(0x26333b, latlon, myLocalSearchItem, "http://www.designit.ro"); // aading it to the map _yahooMap.markerManager.addMarker(_yahooMarker); } ]]>
03/2009 (5)
48
Made with FlippingBook HTML5