Resizing map to fit container

Hello,

I’m wanting to resize a map to fit a container on drag of one corner. However quite struggling to get it working with it being a map.

Any help/demos would be greatly appreciated!

Danielle :slight_smile:

@danielle.walker2,

This sounds like an interesting problem. It would help greatly if you could post an .rp file so we can see what you’re trying to do. Also or instead, if you can sketch out a quick diagram or series of drawings showing the starting, middle and ending states, that would be a big help. Or, point to a website where something similar has been done?

Without some of this info, here are the questions I would have:

Are you trying to provide the ability for a user to do this in your prototype, or are you just trying to do this in the Axure editor to get your page layout to look nice?

Is the map a static image? An SVG? An Inline Frame? Something else? Is in in a dynamic panel which can be dragged? By “resize a map” do you mean you are trying to scale the map–zooming in or out–or do you mean “make the map window larger/smaller”–showing more or less of the map area?

Will it resize larger or smaller… which is bigger to start with–the map or the container?

Is the container a basic widget, a dynamic panel, a virtual area? How have you designed the “corner” which can be dragged?

If you need your prototype to have this functionality, I would imagine this basic approach to scale the map image (not having tried this yet):

  • Set your map (I’ll assume it is an image) to the largest size it can be. If you are dragging it to be smaller, great. If you need to start with it smaller and then drag it larger, then scale it down to its initial size.
  • Create your “one corner” --either something visible like a box or an ellipse, or a hotspot.
  • Convert the corner widget to a dynamic panel (dp). This will allow it to be draggable.
  • Assign an OnDrag action to the dp to “move This with drag”.
  • Set boundaries for the drag based on the container size/location. e.g., “right is less than or equals [[container.right]]” and “bottom is less than or equals [[container.bottom]]”
  • Assign an OnDragStart action to capture the [[Map.left]], [[Map.top]], [[Map.right]], [[Map.bottom]] --either setting global variables or hidden text widgets, so you know the starting position and size of the Map.
  • Assign an OnMove action to “set size of Map to …” (and do the math to calculate the size of the map based on the (x,y) location of the corner minus the starting (x,y) of the map.
  • Copy to other corners if needed.

To scale the “viewport” for the map–showing more or less of the map area, take the same approach, but create an outer “mask” dp and uncheck “Fit To Content” so that as it gets resized, the map inside stays in place and more or less of the map is shown through the dp mask.

Thanks for your response :slight_smile:

A working example I found online is as follows: https://zmmatg.axshare.com/#g=1&p=home

The difference between that and what I want is the map should be within that panel which is inline frame, making the map window larger/smaller and the map itself then responding to the user dragging the window much like the image above.

I will have ago with what you have suggested above, unless you have anymore pointers based on the example supplied above?

Thanks a lot

Danielle

A very simple way:
Use the map a background of a dynamic panel.
Select your preferred behavior “Stretch to cover” or “Stretch to contain”.

Place the handler within the panel and add a “Move - With drag” action to the “onDrag” interaction.

done - works like a charm.

Map-Resize.rp (526.9 KB)

1 Like

PS: You can add boundaries to the restrict the handler movement.

Do you know how you would do this with an inline frame instead of an image?

Thanks so much for the help :slight_smile:

Theoretically yes. Depending on your iFrame target you run into problems.

Map-Resize.rp (521.8 KB)

I think I have already hit one of the problems… when adding the map it doesn’t actually resize the map itself. Do you know of a way to do this?

Thanks

Danielle

I can’t tell from here.

But your map has to be responsive. If it has a fixed size on the page you are including then it wont resize in the container either.

Can you post the link of the map you are trying to include?

@Zuvala,

Nice and simple solution! I forgot you could set background images for dp’s. The iFrame approach works as well --although the map link you had didn’t load for me, maybe because I don’t have an account on that site.

Here’s a version that loads an inline frame with an internal page, and boundaries for scaling the frame. The map can be dragged around within the frame.

Map-Resize (1).rp (855.9 KB)

1 Like