ArcGIS API for JavaScript 4.x - Zoom to Previous Extent and Zoom to Next Extent Supported?

3210
7
Jump to solution
02-14-2022 09:19 AM
ipeebles
Occasional Contributor

Hello everyone.  Working on updating some applications from the JS API 3.x environment to the JS API 4.x environment.

I am looking to add in a button for a Zoom to Previous Extent and a button for Zoom to Next Extent.  I am looking at the API reference, but do not find anything.

Is there anything in JS API 4.x that is like this?

zoomToNextExtent()

zoomToPrevExtent()

I am looking, but not finding anything.

0 Kudos
1 Solution

Accepted Solutions
JeffreyWilkerson
Frequent Contributor

I don't know if there will ever be the same functions as in 3.X, but I implemented the same (at least the previous extents) using a little code.

// Add a variable somewhere before it all happens
let prevPoint = [];

// You probably already have a 'view.when' section, add the 'view.watch' to
//  look for changes to the extent and store those in the prevPoint list.
view.when(function () {
	// Setup listener for the extent change, then populate the previous point using its center
	view.watch("extent", function (newValue, oldValue) {
		let dTest = Math.abs(newValue.xmax - newValue.xmin);
		let dFactor = dTest / 100;  // Need to leave any small movements behind, but these depend on scale.
		if (Math.abs(newValue.xmax - oldValue.xmax) > dFactor ||
			Math.abs(newValue.xmin - oldValue.xmin) > dFactor ||
			Math.abs(newValue.ymax - oldValue.ymax) > dFactor ||
			Math.abs(newValue.ymin - oldValue.ymin) > dFactor) {
			prevPoint.push(newValue);
		}
		if (prevPoint.length > 40) { prevPoint.shift(); //stored }
	});
});

// Previous button functionality (zoom to previous)
let btnPrevExtent = dom.byId("btnPrevExtent");
on(btnPrevExtent, "click", function () {
	zoomPrevious();
})

function zoomPrevious() {
	if (prevPoint.length > 1) {
		prevPoint.pop();
		let lastEx = prevPoint[prevPoint.length - 1];
		prevPoint.pop();
		view.extent = lastEx;
	}
}

Could probably be made more concise but you get the idea.  

 

View solution in original post

7 Replies
JeffreyWilkerson
Frequent Contributor

I don't know if there will ever be the same functions as in 3.X, but I implemented the same (at least the previous extents) using a little code.

// Add a variable somewhere before it all happens
let prevPoint = [];

// You probably already have a 'view.when' section, add the 'view.watch' to
//  look for changes to the extent and store those in the prevPoint list.
view.when(function () {
	// Setup listener for the extent change, then populate the previous point using its center
	view.watch("extent", function (newValue, oldValue) {
		let dTest = Math.abs(newValue.xmax - newValue.xmin);
		let dFactor = dTest / 100;  // Need to leave any small movements behind, but these depend on scale.
		if (Math.abs(newValue.xmax - oldValue.xmax) > dFactor ||
			Math.abs(newValue.xmin - oldValue.xmin) > dFactor ||
			Math.abs(newValue.ymax - oldValue.ymax) > dFactor ||
			Math.abs(newValue.ymin - oldValue.ymin) > dFactor) {
			prevPoint.push(newValue);
		}
		if (prevPoint.length > 40) { prevPoint.shift(); //stored }
	});
});

// Previous button functionality (zoom to previous)
let btnPrevExtent = dom.byId("btnPrevExtent");
on(btnPrevExtent, "click", function () {
	zoomPrevious();
})

function zoomPrevious() {
	if (prevPoint.length > 1) {
		prevPoint.pop();
		let lastEx = prevPoint[prevPoint.length - 1];
		prevPoint.pop();
		view.extent = lastEx;
	}
}

Could probably be made more concise but you get the idea.  

 

ReneRubalcava
Honored Contributor

Yeah, these methods will most likely not be implemented in 4x.

If I were to change one thing, is save the extent on watchUtils.whenFalse(view, "updating", method)

This way you don't need to check for the small extent changes. You can also utilize the spatialReference.equals(sr) method to make sure they are different

https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-SpatialReference.html#eq...

This is clever, though, nice work

ipeebles
Occasional Contributor

Thank you for the response.  I was hoping most functionality would carry over.  Never easy telling those who use apps that certain functionality is no longer available.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

This thread may also interest you. in 3.x there was a navigation toolbar and in this link I have a sample that creates the navigation toolbar in 4.x (which includes prev and next view extents)

https://community.esri.com/t5/arcgis-api-for-javascript-questions/does-the-class-quot-esri-toolbars-...

 

ipeebles
Occasional Contributor

Thank you Robert!  I will certainly have a look.  This looks great!  I am having a discussion with my colleague to see if we want to include the zoom to previous and next extent.  We may exclude for now, but I will certainly have a look at your sample.  Your input is always appreciated.  Hoping to speak with you at the Dev Summit again, but we are not traveling right now.

0 Kudos
JeffreyWilkerson
Frequent Contributor

Yeah, just remember it was all built with Javascript so eventually you should be able to figure out how to do something similar.  Just classes, functions, methods, and events.  Always nice to have someone of Rene's caliber to chime in when your a little off but bet you would have been able to get close to what I did.  Now you can also include a next by not popping the extent off and losing it after each previous.  Not sure what that will be but make sure to post it once you get it finished.  

ipeebles
Occasional Contributor

Just wanted to thank everyone for responding.  Truly appreciate your feedback.

0 Kudos