AS3 Maps: Flick-able and Spinnable

Posted in "Flash, Flex, General" at 3:41 pm on February 11, 2008 by Tripp Bridges |

Flickable and Spinnable Map

The Yahoo! AS3 Maps API is barely a day old (well, alright, maybe some lucky folks got their hands on it a little earlier), and we are already seeing some seriously cool apps. An example of what can be done with this new API has been created by Jonathan New and Benjamin Halstead, our fellow Yahoos. They built a cool flick-able and rotable map interface which won the most fun hack award for our internal Q2/07 Hack Day. You can check out their application here. Give it spin—literally! Toss the map around and shift drag to rotate it around the center.

If you are reading this blog, you are probably a Flex or ActionScript developer, which means only one thing: Yahoo! AS3 Maps is a must have! We have prepared screencasts, examples and a complete documentation to get you started. Give it a test drive now. We look forward to your feedback.

(Special thanks to Ben and Jon for building an awesome map demo, and to Jeremy Johnstone for the photo)

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!

12 Comments »

RSS feed for comments on this post. TrackBack URI

  1. I’m a little perplexed. Can you not use the AS3 API with Flash CS3?

    Comment by Matt — February 12, 2008 #

  2. I’m a little perplexed. Can you not use the AS3 API with Flash CS3?

    Yes you can, although it requires a little bit extra effort. The SWC file in the current package is just a zip file with a swf and a metafile inside of it. You can pull out the swf and load it in Flash, and just use all the methods.

    We will release the proper mxp-packaged Flash CS3 version very soon, stay tuned!

    Comment by Allen Rabinovich — February 12, 2008 #

  3. Matt, check out my blog post, How to use the Yahoo! AS3 Maps API in Flash CS3 for some pretty easy steps to get Maps working in Flash.

    Josh Tynjala
    Yahoo! Flash Platform

    Comment by Josh Tynjala — February 12, 2008 #

  4. [...] people, hopefully. You can get a bird’s eye view of the news, for instance, or toss your map around at the flick of a mouse (shout-out to my friend Jon!). And of course, in case you are looking to get into your own hacking, [...]

    Pingback by Yahoo! Cool thing of the Day » Blog Archive » Can’t spell EXAMPLES without MAPS — February 12, 2008 #

  5. [...] Following this link you will find a blog entry on a little app the guys inside of Yahoo built. Somebody should tell them about the ’smoothing’ property of Bitmap object in AS3, it would make the rotated maps look much better! [...]

    Pingback by intense creativity » Blog Archive » Yahoo Maps API in pure AS3! — February 14, 2008 #

  6. I’m having trouble finding a help page or help forum for this API so I’ll just post it here in hopes that I’ll either get the answer I need or get redirected to somewhere more useful. :)

    I’m trying to use the YahooMap.setMapBounds as well as YahooMap.setZoomRange to limit the users movements on the map to the portion relevant to the site. Thus far I cannot get either of these to work. Are these methods still in development or is there something I could be doing incorrectly?

    Dan Wilday
    Peel Interactive Media

    Comment by Dan Wilday — February 14, 2008 #

  7. I was able to hack out an answer to my own zooming problem… but I’ve yet to crack the panning dilemma.

    For anyone interested here’s what I did:

    1 - created my own _zoomRange Object with minimum a maximum properties

    2 - added YahooMapEvent.MAP_ZOOM EventListener to the the map.

    3 - on zoom I checked that the range was inside my own range like so:

    var zoomLevel:int = e.currentTarget.zoomLevel;
    if(zoomLevel _zoomRange.maximum) _map.zoomLevel = _zoomRange.maximum;

    I’m still working on the panning problem.
    If there’s any official answer on this (or an elegant hack) I’d love to hear it.

    Dan Wilday
    Peel Interactive Media

    Comment by Dan Wilday — February 14, 2008 #

  8. I was able to hack out an answer to my own zooming problem… but I’ve yet to crack the panning dilemma.

    For anyone interested here’s what I did:

    1 - created my own _zoomRange Object with minimum a maximum properties

    2 - added YahooMapEvent.MAP_ZOOM EventListener to the the map.

    3 - on zoom I checked that the range was inside my own range like so:

    var zoomLevel:int = e.currentTarget.zoomLevel;
    if(zoomLevel _zoomRange.maximum) _map.zoomLevel = _zoomRange.maximum;

    I’m still working on the panning problem.
    If there’s any official answer on this (or an elegant hack) I’d love to hear it.

    Dan Wilday
    Peel Interactive Media

    Comment by Dan Wilday — February 14, 2008 #

  9. The code snippet in my last post got truncated due to LessThan and GreaterThan symbols. Hopefully this one will go through better.

    if(zoomLevel < _zoomRange.minimum) _map.zoomLevel = _zoomRange.minimum;
    if(zoomLevel > _zoomRange.maximum) _map.zoomLevel = _zoomRange.maximum;

    Comment by Dan Wilday — February 14, 2008 #

  10. any source for this available?

    looks awsome

    Comment by c.moore — February 18, 2008 #

  11. I’m using the Yahoo maps in a Flex project and it’s working very well. I do however see security sandbox errors when trying to grab a bitmapdata snapshot. Is this something that Yahoo could address? I think all it may take is the appropriate crossdomain file.

    Regards,

    Stefan

    Comment by Stefan Richter — March 3, 2008 #

  12. Any updates on that crossdomain file for the BitmapData?

    Comment by asinomasimple — May 21, 2008 #

Leave a comment

Note: Comments are moderated for first-timers. Spam deleted.

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Hosted by Yahoo!

Copyright © 2007 Yahoo! Inc. All rights reserved. Privacy Policy - Terms of Service

Powered by WordPress on Yahoo! Web Hosting.