Navigation tools for ArcGIS API for JavaScript 4.x

Ranga_Tolapi · ‎12-19-2018

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 Frameworks‌ ArcGIS Server with JavaScript API‌ Esri Technical Support‌

#navigation #zoomToPrevExtent #zoomToNextExtent

RobertScheitlin__GISP · ‎12-19-2018

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.20</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.20/esri/css/main.css">
  <script src="https://js.arcgis.com/4.20/"></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

KenBuja · ‎12-19-2018

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

Functionality matrix | ArcGIS API for JavaScript 4.10

RobertScheitlin__GISP · ‎12-19-2018

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.20</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.20/esri/css/main.css">
  <script src="https://js.arcgis.com/4.20/"></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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Ranga_Tolapi · ‎12-19-2018

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

LefterisKoumis · ‎07-22-2021

Hi Robert. The solution you posted at https://community.esri.com/t5/arcgis-api-for-javascript-questions/does-the-class-quot-esri-toolbars-... cannot be rendered in its whole. There are issues with the ESRI website and it can't display the whole solution. Can you please post it again? Thanks.

RobertScheitlin__GISP · ‎07-23-2021

@LefterisKoumis Post has been updated.

LefterisKoumis · ‎07-23-2021

THank you. It seems that Chrome and Edge cannot render the whole page. If you scroll down you will see that it cuts off .

Firefox can display the whole code but it displays it in one line :(.

So, I have to manually to insert the line breaks to make it readable.

ESRI is aware of the issue and they are looking into it. THanks.

RobertScheitlin__GISP · ‎07-23-2021

@LefterisKoumis Strange it render fine for me in Chrome

LefterisKoumis · ‎07-27-2021

Robert, your screenshot is from this page. I was referring for the solution posted at this page:

https://community.esri.com/t5/arcgis-api-for-javascript-questions/does-the-class-quot-esri-toolbars-.... When you scroll down it freezes, after line 91.

LefterisKoumis · ‎07-27-2021

Latest update, ESRI responded with this about the issue.

https://community.esri.com/t5/community-feedback/problem-loading-blogs-with-long-scripts-in-google/m...