"WINDOWING" CONTENT

On the MapWindow panel, add a case to the OnDrag event. From the list of actions, choose "Move" and specify the MapContent panel. By default, it'll set this action to move the panel with the drag. Click OK to close the Case Editor.

 

Go back to the "Draggable Map" page.

Select the "Reset Map" link, and add an OnClick case with the action to "Move MapContent to (-530, -135.)", which is approximately its original position.

 

...And that's it! Generate a prototype and try it out.

Creating a draggable map is not such a drag, after all!  You can use the same technique to create other draggable content while staying within a specified area.

First, open AxureDraggableMap.rp and open the "Draggable Map" page.

 

Since we don't want the entire map to show on our screen, we're going to create something like a "window" that gives us a view of just a portion of the map. To do this, select the image of Google Maps in the design area, right-click and choose [Convert to Dynamic Panel].

 

Label this panel "MapWindow".

Next, reposition the MapWindow panel on top of the grey rectangle. Using the handles, resize the panel so that it fits inside the rectangle (it'll look like the image on the left).

© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure is a registered trademark of Axure Software Solutions Inc.

u21_start u21_end u21_line

We want the red map marker in the image to be in the middle of our map view, so let's reposition the map inside the MapWindow panel state.

 

Open up State1 of the MapWindow panel. Reposition the map upwards and to the left so that the red marker is approximately in the middle of the dynamic panel. Part of the map will be off the grid, but that's OK.

 

Go back to the "Draggable Map" page and check to see that the marker is where you want it to be.

Now that we've created our "window" for the map, we want to make the map draggable. To do this, we'll convert the map image to its own dynamic panel. Open up State1 of the MapWindow panel again, right-click on the image and choose [Convert to Dynamic Panel] to create another dynamic panel.

 

Label this panel "MapContent". You'll notice that this dynamic panel is now nested within the MapWindow panel.

Step 1: Create dynamic panel for the "window"

Step 2: Resize MapWindow panel

Step 3: Reposition map inside the panel state

Step 4: Convert map

to a dynamic panel

Step 5: Add move

panel action with drag

Step 6: Add interaction

to reset the map

Still need help? Check out the forum or drop us a line at support@axure.com.

THE ROUNDUP

DYNAMIC PANELS

Draggable Map using nested dynamic panels and OnDrag

u57_start u57_end u57_line
u59_start u59_end u59_line
u61_start u61_end u61_line
u63_start u63_end u63_line
u65_start u65_end u65_line

DOWNLOAD

u87_start u87_end u87_line

MORE DYNAMIC PANELS (ADVANCED) ARTICLES ::

This is an archived Axure 7 training resource. You can update to Axure 8 for free at www.axure.com/update.