ArcGIS Maps SDK for JavaScript example: Previous and Next extent buttons (updated for 4.25)
927
0
01-12-2023 01:35 PM
Hi,
I like to have my Previous extent and Next extent buttons in a web mapping application. Don't you?
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>
