I'm trying to do exactly this. If it still interests you, please contact firstname.lastname@example.org
In fact, I already managed to make ImageViewer:
1. receive an UIComponent
2. add it to its display list
3. pan it
But the component got completely messed up.
As I am not an experienced OO developer, I could use some help....
As well as some guidance on overrinding UIComponents methods (but this is easier as there is a lot of material to read).
I'm looking to add a marker onto the map, when you pan, i need it to pan too. when you zoom, i need it to zoom as well.
How do I do this?
Where do I add the child? imageViewer.addChild() doesn't work because the thing wont pan around.
Making the object follow the map is not a really complex issue, as long as you understand some basic matrix logic.
You should not add your marker as a child of the viewer, because even if you manage to do it (and I think you cant, because this component in FIG do not receive other UIComps) it will zoom (and thats not what you want).
I am using a modified version of Callout and my own pan zoom.
I suggest that you use the Callout component (very easy to customize) and, to make the mapping, you can use this method:
Hypothetically, if I DON'T understand basic matrix logic, which I don't...
I would put your function "transformCoordinates" in my main application.
from there, I call my imageViewer module and create a canvas above the image viewer module. I add children to the canvas.
Then how do I link the clicks? So when I click on the map and drag, the canvas and the imageViewer move together?
Would you be interested in making some money? We would pay whatever hourly rate you want to get this done as long as you take credit card... PayPal maybe or Google Checkout?
please contact me if you are interested:
I guess my biggest question is, how will the callout box know when to call transform coordinates and then move?
I include your function in my main application. I add a callout as a child of my canvas. do i add an event listener? what do i listen for?
I'm brand new to flex, if you can't tell...
also, will this work with multiple points that are added dynamically?
Here is my code if you're interested.
So I created a canvas at the bottom that is above imageViewer. I add my button as a child in collectionOnComplete(e:Event) to ivmap (my canvas)...
I thought I would give the solution to everybody.
In imageViewer.as there is a function: updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
At the very bottom, I added this code:
if(bitmapScaleFactor > 3)
In the parent application, I added two functions. LoadImages() will put points on a canvas that I have placed over the ImageViewer component. Clear images, will remove the children from that canvas.
So when the scalefactor gets above a certain level, it will load the points onto the image. when it zooms out, it will clear them. This clear/load process happens so quickly it looks like it's instant.
Making it zoom and pan was a bit tricky, but I had it done two months ago (in july). The integration of the pan zoom with callout ("kind of spots on the map", the other published FIG componet) repositioning was bit tricky.
I solved it with pointTransformations, but it was too expansive, in terms of memory. In my first trial, theyre positions were recalcuted as you pan and zoom.
Now, in the version I published here
you dont hav smooth zooming, and the callouts only are repositioned after your drop the map.
I am working now on it. Im probably going to make then blurry or transparent while panning, but as I got this message from the foruns and I had promissed another guy who contacted me a (working) version, I decided to publish it on my blog.
Hope it will be usefull.
Please, be aware that not really a small application: it has lots of classes. Please read it all before contacting me with any doubts.
Best luck :0)
This thread seems to have been stolen by the different topic of callouts on images in the Pan|Zoom component; I will try to reclaim it for the original poster. I am also curious if there is a version of this component (or another Flex component) that performs the exact same operations as the Pan|Zoom component on an arbitrary Flex component (e.g. container, canvas) instead of just on an image. An example use case would be for navigating a large organizational chart where the nodes are panels.
This would be a VERY useful component to lots of developers. Thanks!
The link on my previous post has a PAN|ZOOM with this funcionality. But it needs serious reworking. You can use it if you like.
Did anyone get this working? I included the following code after the <ns1:ImageViewer> component.
line1="272 L 31 122.8"
The callout does not update when zooming in or out.
@rockholla - Sorry to jump in at the end of this discussion thread but I'm a relative novice to Flex development. I'm currently working on modifying a pre-existing AIR application coded with Flex 3 and as in the case of the original post, I too have to implement a pan/zoom component for the interface. I have downloaded your org-rockholla-flex.swc library but my question pertains to how I "downgrade" it to work with a Flex 3 app. I know this may seem very much amateur hour, but you said it could easily be done. I've done a bit of searching on the web (perhaps with the wrong terms) but most "how-to" guides that I've found seem to pertain to upgrading a pre-existing FLex 3 app to Flex 4. Any help you could give would be sincerely appreciated.
Updating the PanZoomComponent to work with Flex 3 is primarily just about making sure the containers used are mx containers as opposed to spark (Flex 4) containers. Additionally the spark container now utilizes a method addElement for adding children to components. There are a few calls that will need to be updated to use the Flex 3 addChild. I actually have a branch of the rockholla library that's designed to be Flex 3 capable, and I've started to make some of these changes there; however, it's not fully functional yet--there are other issues to contend with that I haven't had time to tackle yet. Feel free to grab the source from there nonethless--I don't think it should be too hard to make it work for Flex 3--I, in fact, originally built this thing using Flex 3 and was just flying to update it for Flex 4, that I failed to save a copy of the previous state.