nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Navigation toolbar AMD confusion

markrobey

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>

Find more posts tagged with

Accepted answers

JonathanUihlein

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.

All comments

JonathanUihlein

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.

markrobey

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.

markrobey

Forget that. Didn't read your reply properly.

Cheers,

Mark

JonathanUihlein

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.

markrobey

Yes, I was reading it as a value too.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.