Map Zoom Using Alternative to Mouseclick

Hello all,

I’m creating the equivalent to large, multilayered maps (think Google Maps with multiple levels of zoom). I need a way to simulate zooming using a MouseWheel (which can’t currently be prototyped using Axure), but it can’t be Mouseclick. In my prototype there are multiple objects that the user will interact with at any level using Mouseclick.

So is there a way to accomplish zooming into an area (while doing math to calculate width and height for zoom area) without using Mouseclick? Any alternatives?

Thanks,
Cheyne

Hi Cheyne,
I think you can easily achieve it using inline frame widget. Just try to insert embedded URL into inline frame.
I’m not entirely sure if this is what you mean.

Thanks,
Vikram

Hi Cheyne,

Not sure if this is what you are looking for, but I was able to create a map that is scrollable using the mouse wheel–albeit crudely so. Here is what I did.

  1. Create an image of your map and then set it as the background of a Dynamic Panel (DP). Set the image to “Stretch to Contain” so that when you resize the DP, the image–i.e. the map–resizes too, thus it “zooms”. Let’s call this DP “Map”

  2. Then nest this in another DP called “MapContainer”. Then nest this in yet a third DP, let’s call this “MapFrame”. Make sure “MapFrame” has “Show Scrollbars” selected. You can cover up these scrollbars with Rectangle shapes so your user can’t see them

  3. “MapFrame” should contain the “MapContainer” DP, but throw in a Hot Spot at something like y=1000–this is to make the DP scrollable.

  4. Then using the OnScroll event of the “MapFrame” DP you resize the “Map” DP–i.e. zoom–and move the “MapContainer” DP–i.e. reposition.

Getting all the math right–how much to resize and move by–is the tricky part and is probably something you’ll need to rework so it works with the specifics of your design.

The result is a map that is zoomable using the mouse wheel!

See it live!

Here are the interactions I used:


I don’t know if it will ultimately work for you in the long run. But it is a starting point that you could perhaps expand on!

Here’s the file if you want to see it.
MapZoom.rp (112 KB)

2 Likes

Thanks Tuomis! I was out the last two weeks for holiday, which is why I didn’t reply sooner.

Each layer has significant data visualization functionality, which may not work using the “Stretch to Contain” function. But as you say, it’s a starting point.

What I’m looking for is a simple way to trigger an action using the mousewheel. Instead of clicking a plus icon, the user could move their mousewheel up to zoom). The zoom levels are predefined with data visualization functionality available for each layer.

It would be nice if Axure had a simple way to map an action to the mousewheel :\

Thanks,
Cheyne

Hi Cheyne,

The only way that I can think of to map an action to the mousewheel is to use the OnScroll event–and that’s not very difficult to do.

So I pondered this a bit more and made a modified version of my original file. Here is a summary of what it does:

There are four zoom levels. Each zoom level has it’s own interactive elements–mouse hover over text fly outs. Using the mousewheel allows you to navigate to different zoom levels.

Hover over the cities in the first two zoom levels and attractions in the last two.

See it live!

It’s not very fluid, but how many preset zoom levels–and their respect breakpoints–is entirely up to you.

Are we getting closer to the functionality that you want? If so, I’d be happy to go into more detail on how I created it.

See the file below. This new version is on the “Method2” page.
MapZoom.rp (483 KB)

1 Like

Hi your solution is great but I don’t know how setup my image like background dynamic panel. Could you give sam advice and more details ?

Hi silverwind!

You can set a background image for a dynamic panel by navigating to the most inner panel (the third layer in Tuomas’ file) and clicking on the Import button under the Style tab in the Inspector pane:

This will allow you to import a background image for the dynamic panel. When doing this, make sure to also select “Stretch to Contain” from the “No Repeat” dropdown.

HI!

You can do this using the mouse wheel with some javascript, here added to the OnLoad event of the dynamic panel. This example assumes that each zoom level will be in a different panel state.

Note that you can adjust the deltaThreshold variable (in the javascript) to make the mouse wheel more or less sensitive. A threshold of 0 is the most sensitive. Adjust the numStates variable to reflect the number of states that are in your panel. (The example has 5 states.) It assumes the dynamic panel is named “map.”

I don’t have IE since I’m on a Mac, but it works in Safari and Chrome.

NOTE! I’m using my trackpad with a deltaThreshold of 5. I don’t know how that converts to a mouse wheel; I don’t have (well, I can’t find) a mouse with a scroll wheel. I’m hoping you won’t have to tick the mouse wheel 5 times to get a single state change; if so, set the deltaThreshold to 0. Or it may jump directly to 5, in which case you’d need to increase the deltaThreshold.

Live sample.

File: change_panel_state_with_mousewheel.rp (52.9 KB)

[edit] You can remove the console.log() line in the javascript. It was just there for testing.

Oh, I have no way of testing it, but this one automatically sets deltaThreshold to 0 if the mouse ticks are measured in “lines” instead of pixels. (I updated the live sample above with it.)
change_panel_state_with_mousewheel2.rp (52.9 KB)

1 Like