Navigation tools for ArcGIS API for JavaScript 4.x

1265
4
Jump to solution
12-19-2018 03:42 AM
Ranga_Tolapi
Occasional Contributor II

Does Navigation tools available in ArcGIS API for JavaScript 4.x?

I am looking for the best approach to implement zoomToNextExtent() and zoomToPrevExtent() using ArcGIS API for JavaScript 4.x. Any suggestions/samples please.

Your support is sincerely appreciated.

HTML5, CSS, JavaScript, and JavaScript FrameworksArcGIS Server with JavaScript APIEsri Technical Support

#navigation #zoomToPrevExtent #zoomToNextExtent

1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

I got impatient waiting for that to be implemented so I did it myself.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Intro to MapView - Create a 2D map - 4.10</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #tools {
      padding: 1em;
      text-align: center;
    }

    .tool {
      padding-top: 3px;
      padding: 4px 2px;
    }

    .tool.disabled,
    .tool.disabled:hover {
      opacity: 0.6;
      pointer-events: none;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
  <script src="https://js.arcgis.com/4.10/"></script>

  <script>
    var _prevExtent, _preExtent,
    _currentvExtent, _extentHistory
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/core/watchUtils",
      "dojo/dom-class",
      "dojo/dom",
      "dojo/on"
    ], function(Map, MapView, watchUtils, domClass, dom, on) {
      _prevExtent = false;
      _preExtent = null;
      _currentExtent = null;
      _extentHistory = [];
      _extentHistoryIndx = 0;
      _nextExtent = false;
      var map = new Map({
        basemap: "streets"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 4,
        center: [15, 65] // longitude, latitude
      });

      watchUtils.whenTrue(view, "ready", function(){
        initToolbar();
        watchUtils.whenOnce(view, "extent", function(){
          watchUtils.when(view, 'stationary', function(evt){
            if(evt){
              extentChangeHandler(view.extent);
            }
          });
        });
      });

      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 ){
          domClass.add(dom.byId("zoomprev"), "disabled");
        } else {
          domClass.remove(dom.byId("zoomprev"), "disabled");
        }
        if(_extentHistory.length === 0 || _extentHistoryIndx === _extentHistory.length - 1){
          domClass.add(dom.byId("zoomnext"), "disabled");
        } else {
          domClass.remove(dom.byId("zoomnext"), "disabled");
        }
      }

      function initToolbar() {
        on(dom.byId("zoomnext"), "click", function() {
          _nextExtent = true;
          _extentHistoryIndx++;
          view.goTo(_extentHistory[_extentHistoryIndx].currentExtent);
        });
        on(dom.byId("zoomprev"), "click", function() {
          if(_extentHistory[_extentHistoryIndx].preExtent){
            _prevExtent = true;
            view.goTo(_extentHistory[_extentHistoryIndx].preExtent);
            _extentHistoryIndx--;
          }
        });
      }
      view.ui.add("tools", "top-right");
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="tools" class="esri-widget">
    <img src="images/backward.png" alt="Back Extent" title="Back Extent" class="tool" id="zoomprev" />
    <img src="images/forward.png" alt="Forward Extent" title="Forward Extent" class="tool" id="zoomnext" />
  </div>
</body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

4 Replies
KenBuja
MVP Honored Contributor

The Navigation toolbar is listed as "Under Consideration" instead of "Coming Soon" in the Functionality Matrix

Functionality matrix | ArcGIS API for JavaScript 4.10 

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

I got impatient waiting for that to be implemented so I did it myself.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Intro to MapView - Create a 2D map - 4.10</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #tools {
      padding: 1em;
      text-align: center;
    }

    .tool {
      padding-top: 3px;
      padding: 4px 2px;
    }

    .tool.disabled,
    .tool.disabled:hover {
      opacity: 0.6;
      pointer-events: none;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
  <script src="https://js.arcgis.com/4.10/"></script>

  <script>
    var _prevExtent, _preExtent,
    _currentvExtent, _extentHistory
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/core/watchUtils",
      "dojo/dom-class",
      "dojo/dom",
      "dojo/on"
    ], function(Map, MapView, watchUtils, domClass, dom, on) {
      _prevExtent = false;
      _preExtent = null;
      _currentExtent = null;
      _extentHistory = [];
      _extentHistoryIndx = 0;
      _nextExtent = false;
      var map = new Map({
        basemap: "streets"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 4,
        center: [15, 65] // longitude, latitude
      });

      watchUtils.whenTrue(view, "ready", function(){
        initToolbar();
        watchUtils.whenOnce(view, "extent", function(){
          watchUtils.when(view, 'stationary', function(evt){
            if(evt){
              extentChangeHandler(view.extent);
            }
          });
        });
      });

      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 ){
          domClass.add(dom.byId("zoomprev"), "disabled");
        } else {
          domClass.remove(dom.byId("zoomprev"), "disabled");
        }
        if(_extentHistory.length === 0 || _extentHistoryIndx === _extentHistory.length - 1){
          domClass.add(dom.byId("zoomnext"), "disabled");
        } else {
          domClass.remove(dom.byId("zoomnext"), "disabled");
        }
      }

      function initToolbar() {
        on(dom.byId("zoomnext"), "click", function() {
          _nextExtent = true;
          _extentHistoryIndx++;
          view.goTo(_extentHistory[_extentHistoryIndx].currentExtent);
        });
        on(dom.byId("zoomprev"), "click", function() {
          if(_extentHistory[_extentHistoryIndx].preExtent){
            _prevExtent = true;
            view.goTo(_extentHistory[_extentHistoryIndx].preExtent);
            _extentHistoryIndx--;
          }
        });
      }
      view.ui.add("tools", "top-right");
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="tools" class="esri-widget">
    <img src="images/backward.png" alt="Back Extent" title="Back Extent" class="tool" id="zoomprev" />
    <img src="images/forward.png" alt="Forward Extent" title="Forward Extent" class="tool" id="zoomnext" />
  </div>
</body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

Ranga_Tolapi
Occasional Contributor II

Excellent Robert Scheitlin, GISP, thank you so much. You are the man... Cheers...

0 Kudos
DorothyMortenson1
New Contributor II

Thanks!  You're awesome!

0 Kudos