Simple map panning and zooming with ActionScript

A while ago I wrote a summary of basic map panning and zooming methods along with demonstrations of most of them. There were a few requests for code examples for those demos, so (finally) I thought I’d outline some of the simple methods for doing it in Flash/ActionScript.

I’ve put together two AS files:

  • A PanZoomMap class, with some simple panning and zooming methods.
  • An example class that creates an instance of the PanZoomMap and demonstrates zooming, basic click and drag panning, and a zoom box.

The code has some simple comments that I hope give an idea of how it works. I’ll let them do the talking, as anything I write here is likely to be long-winded and confusing.

The example is really very basic. A real interactive map is likely to require some more complicated capabilities than what I have provided here, but this is a starting point that may be helpful to anyone who needs an introduction.

Here’s what the test file does. A simple click-and-drag pan/zoom example:

And a zoom box example:

Tagged ,

11 Comments

  1. Andy

    Have a look at what we have done – I would like your feedback

    Thanks

    Jorgen

    Jorgen
    16 December 2008 @ 1:57pm

  2. Hello, I’ve been testing the possibilities offered by Silverlight, especially the MultiScaleImage object, and thought the “pyramidal” method they use to benefit from different resolutions of the same image, cut down in tiles of constant weight, was quite smart, and could be ported to actionscript…
    have a look at the site they showed at MIX : http://memorabilia.hardrock.com/
    I’d say the result is quite impressive, and really match your work.

    shiva
    22 December 2008 @ 11:37am

  3. Just letting you know that your script helped me building a basic map for my final project (it’s about a tourism website). Thank you so much!

    Larissa
    6 October 2009 @ 2:12am

  4. Hi,

    I have been trying to figure out how to do zooming like in your example, but have the image with scrollbars instead of allowing panning. I see that you have an example of this but no code is available. I would really appreciate a look at that code if possible. Anything would help. Thanks, Brian

    Brian Prince
    22 May 2010 @ 2:13pm

  5. Thank you !
    Really appreciate this nice bit of code

    bill
    1 July 2010 @ 10:15am

  6. thanks man

    ageent
    7 September 2010 @ 2:49am

  7. Thanks alot for your help, it was really an awesome stuff

    Fasi
    11 April 2012 @ 12:16pm

  8. Man, you’ve made my day, thanks a lot!

    Zus
    18 March 2013 @ 8:12am

  9. Hi There

    Thnx a mill for the code,…Im new to this so, i might sound stupid to ask how or where do i place the code…?? Again Thnx. South Africa

    Benjamin
    7 May 2013 @ 4:15am

  10. Could you provide a sample fla, can not get the class to work.

    Thanks,

    Kevin

    Kevin Brake
    26 August 2013 @ 10:50am