Zoom Pan Map Viewer

Zoom Pan Map Viewer

This flash component can be used for viewing high quality large images inside a small area. In order to see the entire image you can zoom in and out, drag the image or the preview stroke around, move the image by using the arrows or reset it's position and size by pressing the reset button in the middle of the navigation arrows.

Using the XML file you can edit the size and colors of some of the elements, as well as the path to the large image and preview thumb.

The image can have any size, and the minimum size will automatically be calculated so that the image is always visible entirely, and the part that remains out of the display area is draggable so that it can also be viewed. The thumbnail needs to be proportionally resized down, and it has to be exactly the same image.

The preview is automatically created, respecting the size of the thumbnail as well as the sizes you specify in the XML file for the border. 

Features:

- panning: draggable image
- panning: draggable preview stroke
- controls: navigation arrows
- controls: reset size and position button
- zooming: zoom in/out buttons
- auto-hide controls

Note: The image used in this file is for display purposes only. It was taken from Google Maps website.

 

Andrei Potorac

on 29/7/09

 

File updated [update 01]. Please read more here: http://blog.flabell.com/649/file-updat...

 

Andrei Potorac

on 29/7/09

 

If you want to test the zoom with the mouse scroll, you can check the preview in fullscreen mode.

 

Andrei Potorac

on 2/8/09

 

The product was used at http://naracamicie.sk/ - click on any image to enlarge it. The navigation appears at the top, on the right side. It's been customized for the client to work a bit different.

 

Andrei Potorac

on 11/8/09

 

We updated the file based on the feedback of Nicolas Ekko. There was a bug that didn't allow the user to use the SWF file more than once on the page, with different XML files.

We fixed the path and now it works. Enjoy! :)

 

David Swanson

on 24/9/09

 

excellent product at a good price. Highly recommended!

 

Andrei Potorac

on 6/10/09

 

Product update: update 02

We fixed a bug: the product wasn't able to load swf files. Now it can load swf files also, if you plan to pass a swf instead of a jpg.

 

madadive

on 21/12/11

Hello,
i can replace .jpg by . swf file, i got the Zoom Map_update02
but it doesn't work for me, Is there a special thing to do ?

 

Corneliu Chitanu

on 22/12/11

Hello,

I have tested the component again and it didn't work with SWF files. However, we completed a quick update and fixed the problem. Please download the files one more time and replace your old preview.swf file with the new one from the project->deploy folder.

This time it should work. Let us know, if it gives you any trouble. We'll find a solution as soon as we can.

Thanks for your patience.

 

madadive

on 27/12/11

well thank you for quick update, I try the update tonight and I will keep you feedback.

 

madadive

on 1/1/12

in .jpg there's no problem but .swf always doesn't work !
Happy New Year to all the flabell team

 

Corneliu Chitanu

on 3/1/12

Happy New Year!

I just checked the component one more time and it worked with SWF files too. What does not go well when you're trying to use your file? Is the file a standalone file or does it need any resources to function? Please share a link to your component, if you can put it online. We'll take a look and find a solution faster. Thanks for your patience.

 

sarah lacy

on 6/10/09

 

This is really good. So happy with this purchase, and definitely the recent update so I can use swfs! Brilliant.

 

f f

on 8/10/09

 

Nice product. Just a couple questions :

1. How can i make the stage heigt & width 100%. like size = stage.width ?
2. How can i add keyboard controls for up down left right ?
3. How can i make the mousescroll zoom faster ?

I thought all the actionscript was on 1 frame but this is quite difficult.

 

Andrei Neamtu

on 12/10/09

 

rshit,

I just made an update to the product.

1.If you go in our index.html file and define the stagew and stageh like this:

var stageW = "100%";
var stageH = "100%";

and then comment or delete the 2 lines that define the component dimensions inside the swf file:

//flashvars.componentWidth = stageW;
//flashvars.componentHeight = stageH;

This way the swf object will be full browser and the component inside will take it's dimensions.
Also make sure that your picture is big enough.

2. I add the code for all arrows and also for "-" and "+"(zoom keys).

3. Now if you look in the "settings.xml" you will find 3 new attributes at the end of the "item" tag:

scrollSpeed = "10" - mousescroll speed
zoomKeysStep = "10" - how fast the "-" and "+"(zoom keys) work
arrowsKeysStep = "30" - how fast the arrows keys work

Thanks for the suggestion. We've added good features to this product.

 

f f

on 13/10/09

 

thanks for the upgrade, this is awesome !

I have two more suggestions :

- When moving x and y with the keyboard controls tweening would be nice.
- When zooming in with the mouse it would be nice if it would zoom in on the position of the mouse.

Thanks !

21

Post a comment

Please login to join the discussions. Don't have an account? Register (it takes 30 seconds)

There are currently no frequent asked questions. As soon as we receive your feedback, we'll update this section permanently.

There are no video tutorials for this flash component yet.

Zoom Pan Map Viewer - change log

Update 11 June 2010
- we updated the file to the new Flabell structure, replacing Main.as with Sample.as
- we modified the XML file and put the thumb and the image in the FlashVars

There is currently no additional help provided for this flash component.