Navigation toolbar AMD confusion

markrobey — Thu, 23 Jan 2014 12:53:05 GMT

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"/>
    
    <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>

Re: Navigation toolbar AMD confusion

JonathanUihlein — Thu, 23 Jan 2014 13:59:44 GMT

If you use the console to inspect "esri.toolbars.Navigation.ZOOM_IN", you'll see its actually a string (or constant, per the documentation you linked). The string value is "zoomin"

Proper Syntax:

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

This works as well:

navToolbar.activate("zoomin");

When you try to use:

navToolbar.activate(ZOOM_IN);

ZOOM_IN is not defined (nor is it one of the expected strings), so logically it will not work.

Re: Navigation toolbar AMD confusion

markrobey — Thu, 23 Jan 2014 14:23:11 GMT

You're right, those do work. But what has me confused is that the doco says that the constant should be "ZOOM_IN"

https://developers.arcgis.com/en/javascript/jsapi/navigation-amd.html#activate

activate(navType)
Activates the toolbar for map navigation. Activating the toolbar overrides default map navigation.
Parameters:
<String> navType Required The navigation type. The Constants table lists valid navigation values.

Constants
Name Description
PAN Map is panned.
ZOOM_IN Map zooms in.
ZOOM_OUT Map zooms out.

Re: Navigation toolbar AMD confusion

markrobey — Thu, 23 Jan 2014 14:26:06 GMT

Forget that. Didn't read your reply properly.

Cheers,

Mark

Re: Navigation toolbar AMD confusion

JonathanUihlein — Thu, 23 Jan 2014 14:52:46 GMT

No problem! It tripped me up at first too, I promise.

I basically had to realize that 'ZOOM_IN' was the name of the constant, but not the value.
Additionally, the constant is a property of the esri.toolbars.Navigation object, justifying the need to reference the full-path.
For the record, I do agree that the documentation should probably make that a bit more clear

Make sure you mark the thread as 'answered' if you are completely satisfied.

Re: Navigation toolbar AMD confusion

markrobey — Thu, 23 Jan 2014 17:16:19 GMT

Yes, I was reading it as a value too.

topic Re: Navigation toolbar AMD confusion in ArcGIS JavaScript Maps SDK Questions

Navigation toolbar AMD confusion

Re: Navigation toolbar AMD confusion

Re: Navigation toolbar AMD confusion

Re: Navigation toolbar AMD confusion

Re: Navigation toolbar AMD confusion

Re: Navigation toolbar AMD confusion