How to use the Yahoo! AS3 Maps API in Flash CS3

by Josh Tynjala

Important: As of version 0.9.3, the Yahoo! Maps API for ActionScript 3 includes a component that may be used with Flash CS3. It’s a simple MXP installer like many other Flash CS3 components. The following tutorial is obsolete.

The official release of the ActionScript 3 API for Yahoo! Maps appeared on the Yahoo! Developer Network yesterday to much fanfare. Believe me, I’m excited as you are! We on the Yahoo! Flash Platform team have been working hard to ensure Maps got into the hands of AS3 developers. You may have noticed that this first version specifically targets Flex Builder and the free Flex SDK. I assure you, Flash CS3 support is definitely on the way, but due to technical reasons and time constraints, it’s not available just yet. That said, there’s nothing wrong with a little hacking if you’re too excited to wait until we have an official component.

We’d love to let you use the same SWC file with Flex and Flash. Unfortunately, the compiler in Flash CS3 treats SWC files a little strangely. Basically, the compiler sees the classes available in your SWC file, and it will compile your code that uses those definitions, but the classes themselves aren’t included in your output SWF. When you try to view the output SWF, you’ll see one or more VerifyErrors because the classes cannot be found. Since we cannot compile directly from the SWC, another interesting possibility is to load the classes at runtime to instantiate them.

If you didn’t know, SWC files are actually special ZIP files. If you open YahooMap.swc in your favorite archive manager, you’ll discover two files. First, you’ll see catalog.xml, which specifies the available classes and some other information that may be used by compilers. Additionally, there’s a file named library.swf, and that’s the one we’re most interested in using. This SWF file contains the compiled ActionScript code for the Yahoo! Maps AS3 API. Extract that file from the SWC to your filesystem (preferrably right next to the FLA file you’ll be using).

Yahoo! Maps SWC Extraction

What we’re going to do next is load the library.swf into our Flash application. Using the ApplicationDomain class, we’ll access the classes from the SWF to instantiate a YahooMap instance in our main SWF. It’s a little cumbersome if you need many of the available classes, but it doesn’t take too much code to set up the basics.

I’m just going to put this code on the timeline for simplicity’s sake, but you may set up a class, if you prefer. First, we have the variable that will store the com.yahoo.maps.api.YahooMap instance. I typed it as Object because we don’t have a compile-time reference to the required class and Object is most flexible being dynamic. Additionally, we have our Yahoo! API Key, sometimes called an application ID, placed in a constant because it won’t change. Finally, we have variables to store the references to classes we will be retrieving from library.swf:

var map:Object;
const APP_ID:String = "Put your own Application ID here";

// classes we will be loading
var YahooMap:Class;
var YahooMapEvent:Class;
var LatLon:Class;

Let’s load library.swf using a standard flash.display.Loader.

var mapsLoader:Loader = new Loader();
mapsLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, mapsLoaderCompleteHandler);
mapsLoader.load(new URLRequest("library.swf"));

When library.swf has finished loading, the mapsLoaderCompleteHandler() event handler function will be called, and we will retrieve the required classes. Use the getDefinition() function from ApplicationDomain to load the classes and place them in the variables we set up a moment ago.

function mapsLoaderCompleteHandler(event:Event):void
{
	// of course, don't forget to remove your listeners!
	event.target.removeEventListener(Event.COMPLETE, mapsLoaderCompleteHandler);

	// save each of the classes we plan to use
	var appDomain:ApplicationDomain = event.target.applicationDomain;
	YahooMap = appDomain.getDefinition("com.yahoo.maps.api.YahooMap") as Class;
	YahooMapEvent = appDomain.getDefinition("com.yahoo.maps.api.YahooMapEvent") as Class;
	LatLon = appDomain.getDefinition("com.yahoo.maps.api.core.location.LatLon") as Class;

	// create the YahooMap instance
	this.map = new YahooMap(APP_ID, stage.stageWidth, stage.stageHeight);  

	// we can call functions normally
	this.map.addPanControl();
	this.map.addZoomWidget();
	this.map.addTypeWidget();

	// using the loaded YahooMapEvent class
	this.map.addEventListener(YahooMapEvent.MAP_INITIALIZE, mapInitializeHandler);

	// cast as DisplayObject because yahooMap is typed as Object
	this.addChild(DisplayObject(this.map));
}

The mapInitializeHandler() function is called when the YahooMap is ready for interaction. We’ll set the zoom level and center on a specific latitude and longitude. As you can see, we use the LatLon class that we retrieved earlier.

// unfortunately we cannot use the YahooMapEvent type as the
// parameter because it isn't a compile-time constant.
function mapInitializeHandler(event:Event):void
{
	// once again, we can use the YahooMapEvent class here
	this.map.removeEventListener(YahooMapEvent.MAP_INITIALIZE, mapInitializeHandler);

	// sets the zoom level to a high-level city view.
	this.map.zoomLevel = 5;

	// here we use the loaded LatLon class
	this.map.centerLatLon = new LatLon(37.779160,-122.420049);
}

You’ll notice that the code itself isn’t much different than in the examples. By placing the loaded classes in a wide enough scope, we’ve made them accessible to all our functions here. For a more advanced application with extended functionality, you might consider placing the classes in a static variable somewhere so that they can be accessed globally.

To make things easy, so you don’t have to copy all my code, I’ve made my project files available (along with library.swf extracted from the SWC) in a zip. Download the YahooMaps in Flash CS3 project files. This hack will probably be short-lived, but I thought I’d share it anyway. As I mentioned before, a fully-supported Flash CS3 component can be expected in an upcoming release. Until then, happy hacking! :)

About the Author

Josh Tynjala is an indie game developer, entrepreneur, Flash and Flex mercenary, and bowler hat enthusiast.

Discussion
  1. [...] tried myself, but I KNOW it works in a pure AS3 project</strike>.  Josh has it covered. In my example, I merely wrap it in a UIComponent so I can use it in [...]

    posted by Flex and Flash Developer - Jesse Warden dot Kizz-ohm » Blog Archive » Yahoo AS3 Maps API & FlightAware in Flex: Part Deux of Deuuuuuuux on 02.12.2008
  2. Thanks Josh :) great hack

    posted by Saeed Ashour on 02.13.2008
  3. Curious if there’s a timeline for the CS3 component. Starting a project for a marketing effort that will use Yahoo! maps. It would be extremely helpful to have the CS3 component as Flex is not an alternative for this project. Thanks!

    posted by Matt on 02.13.2008
  4. Matt, no release date has been announced for the Flash CS3 Yahoo! Maps component.

    posted by Josh Tynjala on 02.13.2008
  5. [...] Update: I just fond this great information on how to use this API in CS3 (without Flex): How to use the Yahoo! AS3 Maps API in Flash CS3 [...]

    posted by Yahoo Maps API Released | information designer on 02.13.2008
  6. [...] Here is a tutorial on how to use their new API inside of Flash CS3, cause apparently it’s mostly Flex oriented (like most things eh?). [...]

    posted by intense creativity » Blog Archive » Yahoo Maps API in pure AS3! on 02.13.2008
  7. [...] I came across this site (zeuslabs) that has a hack to allow the use of Yahoo! Maps API. Their site provides excellent documentation [...]

    posted by [AS 3] Actionscript 3 and Yahoo Maps without Flex | web works by morgan newcomb | burlington, vermont on 02.15.2008
  8. I’m guessing you can’t make custom markers using this approach, since you have to either extend the Marker class and/or implement the IMarker class. Because the Marker and IMarker classes don’t exist at compile-time, it will be impossible. Is this true?

    posted by Matt on 02.27.2008
  9. That sounds about right, Matt.

    posted by Josh Tynjala on 02.27.2008
  10. I’d put a brief disclaimer somewhere on this post then. I got really excited for a second when I read this post and now I’m knee deep in a project that needs custom markers. Flex isn’t an option either.

    Any word on the CS3 component? I could really use it right now!

    posted by Matt on 02.27.2008
  11. Sorry, Matt. Yahoo! hasn’t publicly announced the release date.

    posted by Josh Tynjala on 02.27.2008
  12. I have a copy of the AS2 component. Do you know if its “safe” to still use this component?

    posted by Matt on 02.27.2008
  13. As far as I know, you should have no problem continuing to use the AS2 API.

    I just heard from Zach Graves, the primary developer of the AS3 API, that the Marker class is basically little more than a Sprite. I imagine that you could create a new instance of Marker and add other display objects as children.

    var markerContainer:Object = new Marker();
    markerContainer.address = new Address("Duluth, MN");
    var shape:Shape = new Shape();
    shape.graphics.lineStyle(0xff0000, 1);
    shape.graphics.drawRect(0, 0, 20, 20);
    markerContainer.addChild(shape);
    yahooMap.markerManager.addMarker(markerContainer);

    I haven’t tested that code, but I’m pretty sure that it will work.

    posted by Josh Tynjala on 02.27.2008
  14. Josh (and Zach) you’re a life saver. I was so hell bent on having it be a certain way that I completely overlooked this approach. Worked like a charm. Only thing wrong in your snippet is that markerContainer needs to be typed as an Object. Compiler will throw an error upon trying to set the address property of a Sprite. Then of course wrap it in the Sprite constructor to perform the addChild method on it.

    posted by Matt on 02.27.2008
  15. Glad I could help, Matt. Code fixed.

    posted by Josh Tynjala on 02.27.2008
  16. It would be extremely helpful to have the CS3 component as Flex is not an alternative for this project

    posted by دردشة on 03.02.2008
  17. [...] have more fun stuff coming, including a Flash component (for now, see Josh Tynjala’s post on how to use the current component in Flash). Stay tuned for more [...]

    posted by Yahoo! Flash(R) Blog » Blog Archive » AS3 Maps Update on 03.12.2008
  18. Hey Josh,

    I am trying to build a pure Actionscript project using Flex Builder 3, and would like to use the new Yahoo! map. However, I cannot seem to get the map to render to the screen. I have imported the swc, instantiated and initialized map and added it to the display list, but it doesn’t show up. I don’t get any compiler errors, and I can trace out the map component….. needless to say, im at a loss.

    it is possible to use the current Yahoo! AS3 Map in a pure Actionscript project using Flex Builder? Do you know of any tutorials or examples?

    Thanks, you do great work!

    -jon

    posted by Jonathan Greene on 03.15.2008
  19. As far as I know, there should be no problems using the Yahoo! AS3 Maps in a Flex Builder ActionScript project. Did you give it a location (such as through centerLatLon from my example)? I remember when I first played with the component, I thought it wasn’t working because it didn’t show anything, but it turned out that there’s no default location.

    posted by Josh Tynjala on 03.15.2008
  20. Josh, this was helpful… got it working, so thanks.

    But exactly why is it such a big deal to port this to a “true” Flash component?

    posted by Phillip Kerman on 03.17.2008
  21. Phillip, it is not difficult. Just a few changes to the API should be needed. The problem is that there is only a single developer working on the AS3 Yahoo! Maps API (in his free time).

    posted by Josh Tynjala on 03.17.2008
  22. Just ran your files and received this error. I am sure it’s something simple to fix but for the life of me can not figure it out. Any help would be greatly appreciated. Thanks in advance

    ArgumentError: Error #1063: Argument count mismatch on com.yahoo.maps.api::YahooMap(). Expected 0, got 3.
    at AS3MapsInFlash_fla::MainTimeline/mapsLoaderCompleteHandler()

    posted by Dan on 03.20.2008
  23. Zach changed the YahooMap class’ API slightly to accommodate the future Flash CS3 component. The constructor no longer takes arguments. Instead, you pass the same arguments to the init() function.

    this.map = new YahooMap();
    this.map.init(APP_ID, stage.stageWidth, stage.stageHeight);
    posted by Josh Tynjala on 03.20.2008
  24. [...] project with Flash CS3. A quick google search and I found Josh Tynjala’s blog which proposes an interesting solution. Two good things about this. I learnt about ApplicationDomain and how you can access to classes [...]

    posted by Théatre magique » Blog Archive » Yahoo Maps for Flash CS3 on 03.21.2008
  25. Hey Josh,

    Re: Using the map in Flex BUilder Actionscript Project…

    Thanks for the tip on setting a location. Duhhhhh! That was the problem! I was just used to the AS2 map defaulting to a set location. Anyway, the new component is sooo nice to work with! Thanks again.

    -jon

    posted by Jonathan Greene on 03.24.2008
  26. Thanks Josh,
    Its working nicely for me can u tell me time duration it will take for release of flash cs3 yahoo map component,Instead of doing like this.

    posted by Ravi on 03.28.2008
  27. Again, no release date has been announced.

    posted by Josh Tynjala on 03.28.2008
  28. Hi I have a question about the markerManager in Flash CS3. When I use Josh Tynjala’s code I get this compiler error “1180: Call to a possibly undefined method Address”. I’m sure there must be a class for address?

    posted by JustinBull on 03.31.2008
  29. Justin, can you share some of the code where that error occurs? It sounds like you simply haven’t grabbed the Address class from the ApplicationDomain, but it’s hard to tell without code.

    posted by Josh Tynjala on 03.31.2008
  30. var Address:Class = new Class;
    Address = appDomain.getDefinition("com.yahoo.maps.api.core.location.Address") as Class;
    var markerContainer:Object = new Object();
    markerContainer.Address = new Address("Duluth, MN");
    var shape:Shape = new Shape();
    shape.graphics.lineStyle(0xff0000, 1);
    shape.graphics.drawRect(0, 0, 20, 20);
    markerContainer.addChild(shape);
    map.markerManager.addMarker(markerContainer);
    posted by JustinBull on 03.31.2008
  31. This is a better way to get the Address class from the appDomain:

    var Address:Class = appDomain.getDefinition("com.yahoo.maps.api.core.location.Address") as Class;

    new Class doesn’t work and will throw an error at runtime.

    Also, what exactly are you trying to do here?:

    var markerContainer:Object = new Object();
    ...
    markerContainer.addChild(shape);

    An Object isn’t a display object, so I don’t think that will work.

    posted by Josh Tynjala on 03.31.2008
  32. I’m just trying to create a marker in the flash environment. That was the example you gave no ? I’m implementing this into a project for the first time and my employer expects it done tonight -_-

    posted by JustinBull on 03.31.2008
  33. No, your code had a couple things that were different than the code I posted for Matt.

    For one, markerContainer is typed as object, but I instantiate a new Marker (a class loaded from the appDomain). Additionally, the address property on the markerContainer should start with a lowercase letter.

    var markerContainer:Object = new Marker();
    markerContainer.address = new Address("Duluth, MN");
    posted by Josh Tynjala on 03.31.2008
  34. Thank you Josh but I tried that :( That’s why I changed it. It doesn’t make sense .. ? Is there any possibility of someone sending me a source file ? That would ge so cool :) Otherwise I have no clue why mines not working. I followed your advice to the button. Now I get a “1180: Call to a possibly undefined method Marker”

    posted by JustinBull on 03.31.2008
  35. The only reason I can imagine you’d get that error would be if you didn’t load the Marker class from the appDomain.

    var Marker:Class = appDomain.getDefinition("com.yahoo.maps.api.markers.Marker");
    posted by Josh Tynjala on 03.31.2008
  36. Ok Thank you ever so much Josh :) You are right, I was forgetting the marker class. I must have deleted it by accident :P At any rate I would like to make a contribution. I’m not sure why but your method of calling the class wasn’t working for me. My best guess is that the variable needed to be global so I stuck a var Marker:Class; outside the mapInitializeHandler and a Marker = appDomain.getDefinition("com.yahoo.maps.api.markers.Marker") as Class; inside the function and it worked.

    posted by JustinBull on 03.31.2008
  37. Is geocoding possible in the flash environment? I try to implement the flex version but It doesn’t understand the event handlers?

    posted by JustinBull on 03.31.2008
  38. Everything that’s possible with Flex should be possible in Flash too. The Maps API doesn’t use any Flex-specific features that I’m aware of. Make sure you’re using the latest version of the API SWC and that you’ve loaded all the Maps classes you need from the ApplicationDomain.

    posted by Josh Tynjala on 04.01.2008
  39. var YahooMap:Class;
    var YahooMapEvent:Class;
    var LatLon:Class;
    var Address:Class;
    var GeocoderResultSet:Class;
    var GeocoderResult:Class;
    var GeocoderEvent:Class;
    var Geocoder:Class;
    var _yahooMap:Object;
    var _geocoder:Object;
    var _centerAddress:String;
    var _centerAddressStr:String;
    var _centerLatLon:String;
    var mapsLoader:Loader;
    
    _yahooMap = new Object;
    const APP_ID:String = "my_id";
    mapsLoader = new Loader();
    mapsLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, mapsLoaderCompleteHandler);
    mapsLoader.load(new URLRequest("library.swf"));
    
    function mapsLoaderCompleteHandler(event:Event):void {
    event.target.removeEventListener(Event.COMPLETE, mapsLoaderCompleteHandler);
    var appDomain:ApplicationDomain = event.target.applicationDomain;
    YahooMap = appDomain.getDefinition("com.yahoo.maps.api.YahooMap") as Class;
    YahooMapEvent = appDomain.getDefinition("com.yahoo.maps.api.YahooMapEvent") as Class;
    LatLon = appDomain.getDefinition("com.yahoo.maps.api.core.location.LatLon") as Class;
    Address = appDomain.getDefinition("com.yahoo.maps.api.core.location.Address") as Class;
    GeocoderResultSet = appDomain.getDefinition("com.yahoo.maps.webservices.geocoder.GeocoderResultSet") as Class;
    GeocoderResult = appDomain.getDefinition("com.yahoo.maps.webservices.geocoder.GeocoderResult") as Class;
    GeocoderEvent = appDomain.getDefinition("com.yahoo.maps.webservices.geocoder.events.GeocoderEvent") as Class;
    Geocoder = appDomain.getDefinition("com.yahoo.maps.webservices.geocoder.Geocoder") as Class;
    _yahooMap = new YahooMap(APP_ID, mapHolder.width, mapHolder.height);
    _yahooMap.addPanControl();
    _yahooMap.addZoomWidget();
    _yahooMap.addTypeWidget();
    mapHolder.addChild(DisplayObject(_yahooMap));
    _yahooMap.addEventListener(YahooMapEvent.MAP_INITIALIZE, mapInitializeHandler);
    }
    
    function handleMapInitialize(event:YahooMapEvent):void {
    mapContainer.addEventListener(ResizeEvent.RESIZE, handleContainerResize);
    _geocoder = new Geocoder();
    _geocoder.addEventListener(GeocoderEvent.GEOCODER_SUCCESS, handleGeocodeSuccess);
    _centerAddress = new Address(this.loaderInfo.parameters.address || "San Francisco, CA");
    _centerAddress.addEventListener(GeocoderEvent.GEOCODER_SUCCESS, handleCenterGeocodeSuccess);
    _centerAddress.geocode();
    }
    
    function handleGeocodeSuccess(event:GeocoderEvent):void {
    var resultSet:GeocoderResultSet = event.data as GeocoderResultSet;
    var firstResult:GeocoderResult = resultSet.firstResult;
    _centerAddressStr = firstResult.getLineAddress();
    }
    
    function handleCenterGeocodeSuccess(event:GeocoderEvent):void {
    var result:GeocoderResult = _centerAddress.geocoderResultSet.firstResult;
    _yahooMap.zoomLevel = result.zoomLevel;
    _centerLatLon = map.centerLatLon = result.latlon;
    _centerAddressStr = result.getLineAddress();
    reverseGeocodeCenter();
    _yahooMap.addEventListener(YahooMapEvent.MAP_MOVE, handleMapMove);
    _yahooMap.addEventListener(YahooMapEvent.MAP_DRAG_STOP, handleMapMoveStop);
    _yahooMap.addEventListener(YahooMapEvent.MAP_DOUBLE_CLICK, handleDoubleClick);
    }
    
    function handleMapMove(event:YahooMapEvent):void {
    _centerLatLon = map.centerLatLon;
    }
    
    function handleMapMoveStop(event:YahooMapEvent):void {
    _centerLatLon = map.centerLatLon;
    reverseGeocodeCenter();
    }
    
    function handleDoubleClick(event:YahooMapEvent):void {
    _yahooMap.zoomLevel--;
    _centerLatLon = map.centerLatLon;
    reverseGeocodeCenter();
    }
    
    function reverseGeocodeCenter():void {
    _geocoder.reverseGeocode(map.centerLatLon);
    }
    
    function handleContainerResize(event:ResizeEvent):void {
    _yahooMap.setSize( mapContainer.width, mapContainer.height);
    }
    posted by JustinBull on 04.01.2008
  40. 1046: Type was not found or was not a compile-time constant: YahooMapEvent.
    1046: Type was not found or was not a compile-time constant: GeocoderEvent.
    1046: Type was not found or was not a compile-time constant: YahooMapEvent.
    1046: Type was not found or was not a compile-time constant: ResizeEvent.

    posted by JustinBull on 04.01.2008
  41. Your problem is with the event handlers.

    function handleMapMove(event:YahooMapEvent):void {

    You can’t use the YahooMapEvent or GeocoderEvent in the declaration of the event parameter because you’re loading those classes at runtime. Type it as Event or Object to get around that.

    Also, I’m pretty sure the code related to ResizeEvent only applies to Flex.

    posted by Josh Tynjala on 04.01.2008
  42. I know you are right about the declaration but neither Object nor Event worked. You are right about the ResizeEvent too, I didn’t need that in there.

    posted by JustinBull on 04.02.2008
  43. WOW … nevermind. I’m wrong haha sorry. event:Event or event:Object works.

    posted by JustinBull on 04.02.2008
  44. Ok Josh I thank you VERY much but I have one more quick question :)
    What do I do now with event.data because it doesn’t recognize it.
    1119: Access of possibly undefined property data through a reference with static type flash.events:Event.

    posted by JustinBull on 04.02.2008
  45. event:Event doesn’t work but event:Object does.

    posted by JustinBull on 04.02.2008
  46. Here is the final working product for anyone interested:

    var mapsLoader:Loader = new Loader();
    var YahooMap:Class;
    var YahooMapEvent:Class;
    var LatLon:Class;
    var Address:Class;
    var GeocoderResult:Class;
    var GeocoderEvent:Class;
    var _yahooMap:Object;
    var _centerAddress:Object;
    var _result:Object;
    
    const APP_ID:String = "Type your app id here.";
    mapsLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, mapsLoaderCompleteHandler);
    mapsLoader.load(new URLRequest("library.swf"));
    
    function mapsLoaderCompleteHandler(event:Event):void {
    	event.target.removeEventListener(Event.COMPLETE, mapsLoaderCompleteHandler);
    	var appDomain:ApplicationDomain = event.target.applicationDomain;
    	YahooMap = appDomain.getDefinition("com.yahoo.maps.api.YahooMap") as Class;
    	YahooMapEvent = appDomain.getDefinition("com.yahoo.maps.api.YahooMapEvent") as Class;
    	LatLon = appDomain.getDefinition("com.yahoo.maps.api.core.location.LatLon") as Class;
    	Address = appDomain.getDefinition("com.yahoo.maps.api.core.location.Address") as Class;
    	GeocoderResult = appDomain.getDefinition("com.yahoo.maps.webservices.geocoder.GeocoderResult") as Class;
    	GeocoderEvent = appDomain.getDefinition("com.yahoo.maps.webservices.geocoder.events.GeocoderEvent") as Class;
    	_yahooMap = new YahooMap(APP_ID, stage.stageWidth, stage.stageHeight);
    	_yahooMap.addPanControl();
    	_yahooMap.addZoomWidget();
    	_yahooMap.addTypeWidget();
    	_yahooMap.addEventListener(YahooMapEvent.MAP_INITIALIZE, handleMapInitialize);
    	addChild(DisplayObject(_yahooMap));
    }
    
    function handleMapInitialize(event:Object):void {
    	_centerAddress = new Address("3655 Nicomen Place Abbotsford,bc");
    	_centerAddress.addEventListener(GeocoderEvent.GEOCODER_SUCCESS, handleGeocodeSuccess);
    	_centerAddress.geocode();
    }
    function handleGeocodeSuccess(event:Object):void {
    	_result = GeocoderResult(_centerAddress.geocoderResultSet.firstResult);
    	_yahooMap.zoomLevel = _result.zoomLevel;
    	_yahooMap.centerLatLon = _result.latlon;
    }
    posted by JustinBull on 04.02.2008
  47. Hmm.. well it looks as if there is an official Flash AS3 release.
    http://developer.yahoo.com/maps/flash/asGettingStarted.html

    posted by JustinBull on 04.04.2008
  48. Justin, that’s the old AS2 Yahoo! Maps API.

    posted by Josh Tynjala on 04.04.2008
  49. Haha I thought it seemed slower :S Thanks Josh!

    posted by JustinBull on 04.07.2008
  50. I tried this and got the error below. Is there something wrong with my app id? I selected the the generic authentication method, was that wrong? I am also testing this from my desktop, not a server, could this be the problem?

    Error opening URL ‘http://local.yahooapis.com/Maps/Flash/beta/config.php?
    v=0%2E9&locale=en&appid=xxxxx’

    xxxxx = the app id I registered for.

    posted by Benny Hill on 04.13.2008
  51. Hi, After reading all the excellent and helpful posts I tried to get a SimpleMarker working.

    Although the code works without error I can’t see the simple marker on the screen.

    Any help would be awesome!

    var mapsLoader:Loader = new Loader();
    var YahooMap:Class;
    var YahooMapEvent:Class;
    var SimpleMarker:Class;
    var LatLon:Class;
    var Address:Class;
    var GeocoderResult:Class;
    var GeocoderEvent:Class;
    var _yahooMap:Object;
    var _centerAddress:Object;
    var _result:Object;
    
    const APP_ID:String = "niSDvhDIkY30ErOesgdFpeoDvEE2_qCCgw--";
    mapsLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, mapsLoaderCompleteHandler);
    mapsLoader.load(new URLRequest("library.swf"));
    
    function mapsLoaderCompleteHandler(event:Event):void {
    	event.target.removeEventListener(Event.COMPLETE, mapsLoaderCompleteHandler);
    	var appDomain:ApplicationDomain = event.target.applicationDomain;
    	SimpleMarker = appDomain.getDefinition("com.yahoo.maps.api.markers.SimpleMarker") as Class;
    	YahooMap = appDomain.getDefinition("com.yahoo.maps.api.YahooMap") as Class;
    	YahooMapEvent = appDomain.getDefinition("com.yahoo.maps.api.YahooMapEvent") as Class;
    	LatLon = appDomain.getDefinition("com.yahoo.maps.api.core.location.LatLon") as Class;
    	Address = appDomain.getDefinition("com.yahoo.maps.api.core.location.Address") as Class;
    	GeocoderResult = appDomain.getDefinition("com.yahoo.maps.webservices.geocoder.GeocoderResult") as Class;
    	GeocoderEvent = appDomain.getDefinition("com.yahoo.maps.webservices.geocoder.events.GeocoderEvent") as Class;
    	_yahooMap = new YahooMap(APP_ID, stage.stageWidth, stage.stageHeight);
    	_yahooMap.addPanControl();
    	_yahooMap.addZoomWidget();
    	_yahooMap.addTypeWidget();
    	_yahooMap.addEventListener(YahooMapEvent.MAP_INITIALIZE, handleMapInitialize);
    	addChild(DisplayObject(_yahooMap));
    }
    
    function handleMapInitialize(event:Object):void {
    	_centerAddress = new Address("b129an");
    	_centerAddress.addEventListener(GeocoderEvent.GEOCODER_SUCCESS, handleGeocodeSuccess);
    	_centerAddress.geocode();
    
    	var marker:Object = new SimpleMarker();
    	marker.address = new Address(_centerAddress);
    	_yahooMap.markerManager.addMarker(marker);
    }
    
    function handleGeocodeSuccess(event:Object):void {
    	_result = GeocoderResult(_centerAddress.geocoderResultSet.firstResult);
    	_yahooMap.zoomLevel = _result.zoomLevel;
    	_yahooMap.centerLatLon = _result.latlon;
    }
    posted by Rakesh on 04.15.2008
  52. Never mind peeps fixed by placing the code in the right function – doh

    posted by Rakesh on 04.15.2008
  53. if you are looking for a way to display multiple markers:

    var markerArray:Array = new Array();
    
    function handleMapInitialize(event:Object):void {
    	_centerAddress = new Address(incomingAddress);
    	_centerAddress.addEventListener(GeocoderEvent.GEOCODER_SUCCESS, handleGeocodeSuccess);
    	_centerAddress.geocode();
    	//create multiple markers.
    	for (var i:String in markerArray){
    		var tempAddress =  new Address(markerArray[i] );
    		tempAddress.addEventListener(GeocoderEvent.GEOCODER_SUCCESS , geoMarkerSuccess);
    		tempAddress.geocode();
    	}
    }
    
    //place marker on map after load success
    function geoMarkerSuccess(event:Object):void{
    	var marker:Object = new SimpleMarker();
    	marker.address = new Address(event.currentTarget);
    	_yahooMap.markerManager.addMarker(marker);
    }
    posted by Jp on 04.15.2008
  54. I am in need of more than one map in same fla file whether i need to load library.swf that number of times because after creating one instance of map if try to use the same class that i loaded for previous one the map is not coming for the second instance.If i load once again the library.swf for that second instance its working perfectely.Any one can help me in this because i am loading lirary.swf for every instance

    Ravi.K

    posted by Ravi on 04.20.2008
  55. I’m doing a localSearch, which is working fine except that I can’t figure out how to get a URL out of the results that goes to a map of the location in yahooMaps (outside of the app I’m building.) I can get detailURL out of localSearchResults, but resultURL is always null. Any ideas?

    posted by Robert on 04.29.2008
  56. One other question, if anyone’s listening: I’ve been trying to use a couple of the Classes in com.yahoo.maps.api.utils, but can’t get them to work. For example I can create the RadiusConversion class like this:

    RadiusConversion = appDomain.getDefinition(“com.yahoo.maps.api.utils.RadiusConversion”) as Class;

    But I can’t seem to use it. If I do something like this:

    var rc:Object = new RadiusConversion();
    var correctZoom:Number = rc.radiusToZoom(radiusInMeters);

    I get a runtime error:
    “Property radiusToZoom not found on com.yahoo.maps.api.utils.RadiusConversion”

    I can’t just do RadiusConversion.radiusToZoom() because the class doesn’t exist at compile time. What can I do?

    posted by Robert on 04.30.2008
  57. Robert, try this:

    Object(RadiusConversion).radiusToZoom()

    I’m guessing it’s just an issue of casting RadiusConversion so that the compiler understands that the method exists.

    posted by Josh Tynjala on 04.30.2008
  58. Thanks, Josh! Works like a charm. Now I know how to use all of those static classes. I’ll give you a link to the app I’m building when it goes live.

    posted by Robert on 05.02.2008
  59. I think this might be the same problem as the comment above on the radius conversion, but I am just trying to get the geocode class working so I can type in an address:

    GeocoderEvent = appDomain.getDefinition("com.yahoo.maps.api.core.location.LatLon") as Class;
    GeocoderResult = appDomain.getDefinition("com.yahoo.maps.webservices.geocoder.GeocoderResult") as Class;
    Address = appDomain.getDefinition("com.yahoo.maps.api.core.location.Address") as Class;
    
    _address = new Address("500 E Pratt St. Baltimore,MD");
    
    _address.addEventListener(GeocoderEvent.GEOCODER_SUCCESS , handleGeocodeSuccess);
    
    //send the request
    _address.geocode();
    

    I keep getting errors like “value is not a function” or “TypeError: Error #2007: Parameter type must be non-null.”

    can anybody help?

    posted by Brent on 05.12.2008
  60. Nevermind, forget that last post, was just looking at some of the above examples and figured out. Just poor reading on my part.

    posted by Brent on 05.12.2008
  61. I was not aware of this component in Flash CS3. Thanks for nice post. :)

    posted by Hunka on 05.13.2008
  62. [...] you? Ok, so maybe you don’t, but a lot of people do. And ok, so you say there’s at least one way to “hack” the SWC file to get it to work in a non-Flex SWF file. And I quote “hack” because I felt really dirty doing it, even though it was someone at Yahoo! who [...]

    posted by Nobien » Blog Archive » To Google & Yahoo!: Please Distribute Map API’s for Developers Who Don’t Use Flex! on 05.15.2008
  63. Hey Brent, how did you solve it? Can you explain it more in detail please…?

    I’ve been loading external images from xml-file, put them into an array and every button loads a couple of images of that array on the stage…
    Keep getting that #2007 error… help would be very very appreciated:)

    posted by Jarne on 05.30.2008
  64. First of all. A huge thanks for this page! Very helpful!

    Secondly, I have 2 questions… One, how does the radiusToZoom() method calculate? Because it doesn’t seem accurate at all? I put my radius in meters and it returns a HUGE zoom level! If my radius is 100 miles (Converted to meters) and my map is centered over Cleveland ohio, and I set my zoom level to what 100 miles returns, I get all the way west as Minnesota and as far east as Maine’s border on the atlantic! That I can fudge though, so I’m not too concerned with it, was just asking in case you knew.

    My real question is about markers. Is there any marker that I can implement that displays the address information without creating my own marker from scratch? I can’t seem to find anything about that in any of the examples or the class documentations… Any thoughts?

    Again, thanks! This has been amazingly helpful for me!

    -iLan

    posted by iLan on 05.31.2008
  65. In an addition to my last post, I’m looking for something like the local search marker where you click on it and it pops up a lil’ box that displays the contact info, but I want to supply the info as opposed to it being from a search.

    posted by iLan on 06.01.2008
  66. Hey All!

    I’ve built a custom marker class that you guys might be able to use. It uses a dynamic external icon, easy style change for the balloon, and click event dispatching inside of your application.

    http://robotoole.com/blog/wp/?p=9

    -rob

    posted by rob on 07.07.2008
  67. Hi,

    I just wanted to note that it is possible to compile your source code against an SWC (e.g. the Yahoo Maps SWC), and also extern all references to the SWC. This allows you to have static compilation (and proper type checking), but also allows you to dynamically load the library at runtime. This is very similar to RSLs, but you can accomplish this all without using the RSL framework from Adobe, but just standard swf loading. I have a link to the process and supporting code: blog post.

    Again this doesn’t achieve anything that the above doesn’t, apart from compilation checking and code completion in any sort of editor.

    posted by Timothy Soehnlin on 09.13.2008
  68. Very frustrated to ask this question, I have been using as2 map for a while and decide to move into as3 map. The first thing need to be done is add map SWC into the building path. and I keep getting the error message saying
    ” unable to load SWC YahooMap.swc: multiple points
    ” 1017: The definition of base class Locale was not found
    ” could not resolve to a component implementation

    Don’t know what’s went wrong, please help. Thanks

    posted by Mark on 09.30.2008
  69. Mark, did you install it with the MXP? If I remember correctly, the Yahoo! Maps for AS3 has two versions. The SWC should be for Flex 3 and the MXP is there for Flash CS3.

    posted by Josh Tynjala on 09.30.2008
  70. I am using flex 2.01, should I use the MXP? Is MXP come in the download package also? Thanks a lot

    posted by Mark on 10.01.2008
  71. Mark, if you’re using Flex, you should use the SWC. The MXP is only for Flash CS3. However, the SWC is built for Flex 3, so it’s probably not compatible with Flex 2. If I remember correctly, the SWC format changed somewhat between versions. You may need to upgrade to the newer SDK.

    posted by Josh Tynjala on 10.01.2008
  72. Got it and thanks

    posted by Mark on 10.01.2008
Share Your Thoughts

To display code in comments: <pre>Code here. May be multiline. Format XML with &gt; and &lt; entities.</pre>

Some HTML allowed in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>