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).
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! 🙂
Pingback: Flex and Flash Developer - Jesse Warden dot Kizz-ohm » Blog Archive » Yahoo AS3 Maps API & FlightAware in Flex: Part Deux of Deuuuuuuux
Pingback: Flex and Flash Developer - Jesse Warden dot Kizz-ohm » Blog Archive » Yahoo AS3 Maps API & FlightAware in Flex: Part Deux of Deuuuuuuux
Pingback: Flex and Flash Developer - Jesse Warden dot Kizz-ohm » Blog Archive » Yahoo AS3 Maps API & FlightAware in Flex: Part Deux of Deuuuuuuux
Pingback: Flex and Flash Developer - Jesse Warden dot Kizz-ohm » Blog Archive » Yahoo AS3 Maps API & FlightAware in Flex: Part Deux of Deuuuuuuux
Thanks Josh 🙂 great hack
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!
Matt, no release date has been announced for the Flash CS3 Yahoo! Maps component.
Pingback: Yahoo Maps API Released | information designer
Pingback: intense creativity » Blog Archive » Yahoo Maps API in pure AS3!
Pingback: [AS 3] Actionscript 3 and Yahoo Maps without Flex | web works by morgan newcomb | burlington, vermont
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?
That sounds about right, Matt.
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!
Sorry, Matt. Yahoo! hasn’t publicly announced the release date.
I have a copy of the AS2 component. Do you know if its “safe” to still use this component?
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.
I haven’t tested that code, but I’m pretty sure that it will work.
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.
Glad I could help, Matt. Code fixed.
It would be extremely helpful to have the CS3 component as Flex is not an alternative for this project
Pingback: Yahoo! Flash(R) Blog » Blog Archive » AS3 Maps Update
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
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.
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?
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).
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()
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.Pingback: Théatre magique » Blog Archive » Yahoo Maps for Flash CS3
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
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.
Again, no release date has been announced.
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?
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.
This is a better way to get the Address class from the appDomain:
new Class
doesn’t work and will throw an error at runtime.Also, what exactly are you trying to do here?:
An Object isn’t a display object, so I don’t think that will work.
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 -_-
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.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â€
The only reason I can imagine you’d get that error would be if you didn’t load the Marker class from the appDomain.
Ok Thank you ever so much Josh 🙂 You are right, I was forgetting the marker class. I must have deleted it by accident 😛 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 aMarker = appDomain.getDefinition("com.yahoo.maps.api.markers.Marker") as Class;
inside the function and it worked.Is geocoding possible in the flash environment? I try to implement the flex version but It doesn’t understand the event handlers?
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.
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.
Your problem is with the event handlers.
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.
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.
WOW … nevermind. I’m wrong haha sorry. event:Event or event:Object works.
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.
event:Event doesn’t work but event:Object does.
Here is the final working product for anyone interested:
Hmm.. well it looks as if there is an official Flash AS3 release.
http://developer.yahoo.com/maps/flash/asGettingStarted.html
Justin, that’s the old AS2 Yahoo! Maps API.
Haha I thought it seemed slower :S Thanks Josh!
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.
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!
Never mind peeps fixed by placing the code in the right function – doh
if you are looking for a way to display multiple markers:
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
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?
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?
Robert, try this:
I’m guessing it’s just an issue of casting RadiusConversion so that the compiler understands that the method exists.
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.
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:
I keep getting errors like “value is not a function” or “TypeError: Error #2007: Parameter type must be non-null.”
can anybody help?
Nevermind, forget that last post, was just looking at some of the above examples and figured out. Just poor reading on my part.
I was not aware of this component in Flash CS3. Thanks for nice post. 🙂
Pingback: Nobien » Blog Archive » To Google & Yahoo!: Please Distribute Map API’s for Developers Who Don’t Use Flex!
Pingback: Nobien » Blog Archive » To Google & Yahoo!: Please Distribute Map API’s for Developers Who Don’t Use Flex!
Pingback: Nobien » Blog Archive » To Google & Yahoo!: Please Distribute Map API’s for Developers Who Don’t Use Flex!
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:)
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
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.
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
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.
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
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.
I am using flex 2.01, should I use the MXP? Is MXP come in the download package also? Thanks a lot
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.
Got it and thanks