Skip to content

Instantly share code, notes, and snippets.

@JimBlaney
Created June 28, 2017 20:02
Show Gist options
  • Save JimBlaney/0245950a3b83454c58ea8fc955f1e6f5 to your computer and use it in GitHub Desktop.
Save JimBlaney/0245950a3b83454c58ea8fc955f1e6f5 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>Previous/Next Extent</title>
<meta charset="utf-8">
<link rel="stylesheet" href="//js.arcgis.com/3.21/esri/css/esri.css">
<style>
html, body {
margin: 0; padding: 0;
width: 100%; height: 100%;
}
#map {
width: 100%; height: 100%;
}
#map .buttons {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 999;
}
#map .buttons button {
padding: 0.5rem;
border-radius: 0.25rem;
background: white;
border: 1px solid #333;
color: #333;
font-size: 0.8rem;
transition: all 0.6s ease-out;
cursor: pointer;
}
#map .buttons button:hover {
background: #333;
color: white;
}
#map .buttons button[disabled],
#map .buttons button[disabled]:hover {
background: white;
border: 1px solid #aaa;
color: #aaa;
cursor: not-allowed;
}
</style>
</head>
<body>
<div id="map">
<div class="buttons">
<button id="previousButton" disabled>Previous</button>
<button id="nextButton" disabled>Next</button>
</div>
</div>
<script data-dojo-config="async: true" src="//js.arcgis.com/3.21/init.js"></script>
<script>
require([
'dojo/_base/declare',
'dojo/_base/lang',
'dojo/dom',
'dojo/dom-attr',
'dojo/on',
'esri/map',
'dojo/domReady!'
], function (
declare,
lang,
dom,
domAttr,
on,
Map
) {
var PreviousNextExtentManager = declare(null, {
_map: null,
_cachedExtent: null,
_previous: null,
_next: null,
_ignoreNext: null,
constructor: function(map) {
this._map = map;
this._cachedExtent = map.extent;
this._previous = [];
this._next = [];
this._ignoreNext = false;
this._attachEvents();
},
_attachEvents: function() {
this._map.on('extent-change', lang.hitch(this, this._onExtentChange));
},
_onExtentChange: function(event) {
if (this._ignoreNext) {
this._ignoreNext = false;
this._cachedExtent = event.extent;
return;
}
this._previous.push(this._cachedExtent);
this._cachedExtent = event.extent;
this._next = [];
},
clear: function() {
this._previous = [];
this._next = [];
},
canMovePrevious: function() { return !!this._previous.length; },
canMoveNext: function() { return !!this._next.length; },
movePrevious: function() {
if (!this.canMovePrevious()) {
return;
}
this._next.push(this._map.extent);
this._ignoreNext = true;
this._map.setExtent(this._previous.pop());
},
moveNext: function() {
if (!this.canMoveNext()) {
return;
}
this._previous.push(this._map.extent);
this._ignoreNext = true;
this._map.setExtent(this._next.pop());
}
});
var map = new Map('map', {
basemap: 'gray',
center: [-77.425461, 39.412327],
zoom: 13
});
map.on('load', function() {
var previousNextMgr = new PreviousNextExtentManager(map);
var previousButton = dom.byId('previousButton');
on(previousButton, 'click', function() {
previousNextMgr.movePrevious()
});
var nextButton = dom.byId('nextButton');
on(nextButton, 'click', function() {
previousNextMgr.moveNext()
});
map.on('extent-change', function() {
if (previousNextMgr.canMovePrevious()) {
domAttr.remove('previousButton', 'disabled');
} else {
domAttr.set('previousButton', 'disabled', 'disabled');
}
if (previousNextMgr.canMoveNext()) {
domAttr.remove('nextButton', 'disabled');
} else {
domAttr.set('nextButton', 'disabled', 'disabled');
}
});
});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment