nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Previous/Next Extent Widget

NickHarvey

Hi All - Does a previous/next extent option exist in any standard or community widget? If not how would I customize a WAB setup to achieve something similar? I have located a js api sample that provides this functionality in an esri/map, in a single, simple .html page. But I'm not sure how to bridge the two (yet)...

-Nick

Find more posts tagged with

Accepted answers

LarryStout

Here is a link to the widget you are looking for:

Zoom Prev Next Widget Version 1.1.0 May 10, 2015

Larry

All comments

LarryStout

Here is a link to the widget you are looking for:

Zoom Prev Next Widget Version 1.1.0 May 10, 2015

Larry

NickHarvey

Sounds good, I have to move on to a couple of requests but if I come back and have a break through first I'll let you know...

thanks!

Anonymous User

Nick if it is not time sensitive to you, I may work on it next week...

-Kevin

NickHarvey

Thanks Kevin just an update that my rate of progress is not in line with 'whip it up' at present. I appreciate the tip (and Rickey's) on looking at the folder structure, sample code/widgets and how these interact (now understanding more, very helpful)...But how to structure the code in the widget.js and widget.html vs. this js api sample (below) is not clear, if you have time to assist that would be awesome ....I'm going to keep digging but you're likely to get through it first just a heads up...

thanks

-Nick

Map navigation tools | ArcGIS API for JavaScript

RickeyFight

If you are writing your own widget I would look at the sample widgets found at: arcgis-web-appbuilder-1.1\client\stemapp\widgets\samplewidgets

I would suggest adding a button on the bookmark widget to zoom to next bookmark.

Anonymous User

To make a widget you just need to put it into the right "declare" 'shell'. Look at the other widget folders to get an idea of the folder/file structure. I just started doing this a couple days ago and I am a newbie. So for your concept of forward/previous extent, I'd just clone the Home widget folder in stemapp, and then just throw the back/forward JS inside it, like so:

navToolbar = new Navigation(map);

on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

use dojo to attach click handlers to the two HTML DOM nodes (a back and forward image for buttons):

navToolbar.zoomToNextExtent();

navToolbar.zoomToPrevExtent();

I may end up writing this in the next few days if you don't whip it up or if it isn't already somewhere else, and if so, I'll be happy to post the code here!

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.