ArcGIS Maps SDK for JavaScript example: Previous and Next extent buttons (updated for 4.25)

Egge-Jan_Pollé — Thu, 12 Jan 2023 21:49:50 GMT

Hi,

I like to have my Previous extent and Next extent buttons in a web mapping application. Don't you?

ArcGIS Maps SDK for JavaScript example: Previous and Next extent buttonsBut as far as I know the (new) ArcGIS Maps SDK for JavaScript does not have a default widget for that. Is that correct?

So, I have created an example with my own Previous and Next Buttons - see sample code below or click on the map to get to a working application.

True, my version of these buttons owes a lot to work done by @RobertScheitlin__GISP (see his app with a navigation toolbar in this post.)

I have updated the code for the two buttons to 4.25, removing dojo and replacing watchUtils with reactiveUtils.

And I managed to group the two buttons together (like the zoom in and zoom out buttons) using esri css classes.

I think it all works, more or less. Can you please test it and tell me what you think?

Cheers,

Egge-Jan

TWIAV | ArcGIS JavaScript example - Previous and Next extent buttons

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>TWIAV | ArcGIS JavaScript example - Previous and Next extent buttons</title> <link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/css/main.css"> <script src="https://js.arcgis.com/4.25/"></script> <style> html, body { padding: 0; margin: 0; height: 100%; width: 100%; font-family: sans-serif; } #header { width: 100%; height: 70px; background-color: #154273; color:#FFFFFF; margin: 0; } #headertext { float: left; font-size: 35px; color: white; line-height: 70px; padding-left: 15px; } #viewDiv { position: absolute; top: 70px; bottom: 0; right: 0; left: 0; padding: 0; margin: 0; } </style> <script> require([ "esri/Map", "esri/views/MapView", "esri/core/reactiveUtils" ], function(Map, MapView, reactiveUtils) { var map = new Map({ basemap: "osm" }); var view = new MapView({ container: "viewDiv", map: map, zoom: 10, center: [0, 51.5] }); createZoomPrevZoomNextBtns(); view.ui.add(["zoomPrevNextBtns"], "top-left"); /******************************************************************************* * Start Zoom Previous and Zoom Next buttons ******************************************************************************* * The solution presented here to add these 2 zoom buttons is based on work by RobertScheitlin__GISP. * See his answer to this question: * https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/does-the-class-quot-esri-toolbars-navigation-quot/m-p/567061 * Changes to the original RobertScheitlin__GISP solution: removed dojo and replaced watchUtils with reactiveUtils (to upgrade to 4.25) *******************************************************************************/ _prevExtent = false; _preExtent = null; _currentExtent = null; _extentHistory = []; _extentHistoryIndx = 0; _nextExtent = false; reactiveUtils.when( () => view.stationary === true, () => { extentChangeHandler(view.extent); } ); function createZoomPrevZoomNextBtns() { const zoomPrevNextBtnsDiv = document.createElement('div'); zoomPrevNextBtnsDiv.innerHTML = ` <div id="zoomPrevNextBtns" class="esri-component esri-zoom"> <div id="zoomPrevBtn" class="esri-widget--button esri-widget esri-disabled" role="button"> <span title="Previous extent" id="zoomPrev" class="esri-icon esri-icon-left-arrow-circled"></span> </div> <div id="zoomNextBtn" class="esri-widget--button esri-widget esri-disabled" role="button"> <span title="Next extent" id="zoomNext" class="esri-icon esri-icon-right-arrow-circled"></span> </div> </div>`; document.body.appendChild(zoomPrevNextBtnsDiv); } let l_zoomPrevBtn = document.getElementById("zoomPrevBtn"); l_zoomPrevBtn.addEventListener("click", zoomPreviousExtent); let l_zoomNextBtn = document.getElementById("zoomNextBtn"); l_zoomNextBtn.addEventListener("click", zoomNextExtent); function zoomNextExtent() { _nextExtent = true; _extentHistoryIndx++; if (_extentHistoryIndx > _extentHistory.length - 1) { // this might happen if the user clicks the zoomNext button too often too fast _extentHistoryIndx = _extentHistory.length - 1; } view.goTo(_extentHistory[_extentHistoryIndx].currentExtent); } function zoomPreviousExtent() { if(_extentHistory[_extentHistoryIndx].preExtent){ _prevExtent = true; view.goTo(_extentHistory[_extentHistoryIndx].preExtent); _extentHistoryIndx--; } } function extentChangeHandler(evt) { if(_prevExtent || _nextExtent){ _currentExtent = evt; }else{ _preExtent = _currentExtent; _currentExtent = evt; _extentHistory.push({ preExtent: _preExtent, currentExtent: _currentExtent }); _extentHistoryIndx = _extentHistory.length - 1; } _prevExtent = _nextExtent = false; extentHistoryChange(); } function extentHistoryChange() { if(_extentHistory.length === 0 || _extentHistoryIndx === 0 ){ l_zoomPrevBtn.classList.add("esri-disabled"); } else { l_zoomPrevBtn.classList.remove("esri-disabled"); } if(_extentHistory.length === 0 || _extentHistoryIndx === _extentHistory.length - 1){ l_zoomNextBtn.classList.add("esri-disabled"); } else { l_zoomNextBtn.classList.remove("esri-disabled"); } } /******************************************************************************* * End Zoom Previous and Zoom Next buttons *******************************************************************************/ }); </script> </head> <body> <div id="header"> <div id="headertext" class="stretch">ArcGIS Maps SDK for JavaScript example: Previous and Next extent buttons</div> </div> <div id="viewDiv"></div> </body> </html>

topic ArcGIS Maps SDK for JavaScript example: Previous and Next extent buttons (updated for 4.25) in ArcGIS JavaScript Maps SDK Questions

ArcGIS Maps SDK for JavaScript example: Previous and Next extent buttons (updated for 4.25)