AnsweredAssumed Answered

Navigation toolbar AMD confusion

Question asked by robeym on Jan 23, 2014
Latest reply on Jan 23, 2014 by robeym
Converting a simplified version of the navToolbar sample has caused me some confusion in terms of the AMD navigation module.

In the script below the zoomfullextent, zoomnext and zoomprev buttons all work as expected. However, the zoomin and zoomout buttons do not work. I see in other people's examples that they use:

navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN)

This does indeed work (if I substitute it into the code below). But why does

navToolbar.activate(ZOOM_IN)    not work?

Looking at the documentation it seems like it should work as activate() and zoomToFullExtent() are both methods of the Navigation object.



<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Navigation toolbar</title>
   
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css"/>
    <style type="text/css">
      @import "http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css";
      .zoominIcon { background-image:url(images/zoomin16_tiny.png); width:16px; height:16px; }
      .zoomoutIcon { background-image:url(images/zoomout16.png); width:16px; height:16px; }
      .zoomfullextIcon { background-image:url(images/fullextent32_tiny.png); width:16px; height:16px; }
      .zoomprevIcon { background-image:url(images/previous16.png); width:16px; height:16px; }
      .zoomnextIcon { background-image:url(images/next16.png); width:16px; height:16px; }
      .panIcon { background-image:url(pan16_tiny.png); width:16px; height:16px; }
    </style>
    <script type="text/javascript" src="http://js.arcgis.com/3.8/"
        data-dojo-config="async: true"></script>
    <script type="text/javascript">
        var navToolbar;
        require([
        "dojo/parser",
        "esri/map",
        "esri/toolbars/navigation",
        "dijit/form/Button",
        "dijit/Toolbar",
        "dojo/domReady!"
        ],
        function (parser, Map, Navigation) {
            parser.parse();
            map = new Map("map", {
                basemap: "satellite",
                center: [-56.953, 57.472],
                zoom: 3
            });

            navToolbar = new Navigation(map);
        }
        );
    </script>
  </head>
  <body class="claro">
    <div id="navToolbar" data-dojo-type="dijit/Toolbar">
      <button type="button" data-dojo-type="dijit/form/Button" id="zoomin" data-dojo-props="iconClass:'zoominIcon'">
        <script type="dojo/on" data-dojo-event="click">
            navToolbar.activate(ZOOM_IN);
        </script>
        Zoom In
      </button>
      <button type="button" data-dojo-type="dijit/form/Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon'">
        <script type="dojo/on" data-dojo-event="click">
            navToolbar.activate(ZOOM_OUT);
        </script>
        Zoom Out
      </button>
      <button type="button" data-dojo-type="dijit/form/Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon'">
        <script type="dojo/on" data-dojo-event="click">
            navToolbar.zoomToFullExtent();
        </script>
        Full Extent     
      </button>
      <button type="button" data-dojo-type="dijit/form/Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon'">
        <script type="dojo/on" data-dojo-event="click">
            navToolbar.zoomToPrevExtent();
        </script>   
        Prev Extent
      </button>    
      <button type="button" data-dojo-type="dijit/form/Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon'">
        <script type="dojo/on" data-dojo-event="click">
            navToolbar.zoomToNextExtent();
        </script>      
        Next Extent
      </button>       
      <button type="button" data-dojo-type="dijit/form/Button" id="pan" data-dojo-props="iconClass:'panIcon'">
        <script type="dojo/on" data-dojo-event="click">
            navToolbar.activate(PAN);
        </script> 
        Pan
      </button>
    </div>
    <div id="map" style="width:100%; height:512px;"></div>
  </body>
</html>

Outcomes