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.
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
Draggable Map using nested dynamic panels and OnDrag
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.