Untitled

<!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>