navToolbar Issues

AlexDeVine — Wed, 30 Oct 2013 14:41:39 GMT

I am trying to migrate an older web app (built at 3.2) to 3.7 using the AMD model and have run into an issue. I managed to get my navToolbar "working" but the graphic and action of the zoom in and out functions appears many inches to the north and east of where my click occurs.

Also, my "extentHistoryChangeHandler" function is throwing this error :TypeError: Cannot call method 'byId' of undefined. I cannot figure out why my registry would be undefined.

Anyone have any ideas on why it would behave this way?

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9,IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>UGA Campus Map</title>
    <style>
    html, body, #mapDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    }
    @import "http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css";     
 .zoominIcon { background-image:url(images/nav_zoomin.png); width:16px; height:16px; }    
 .zoomoutIcon { background-image:url(images/nav_zoomout.png); width:16px; height:16px; }   
 .zoomfullextIcon { background-image:url(images/nav_fullextent.png); width:16px; height:16px; }    
 .zoomprevIcon { background-image:url(images/nav_previous.png); width:16px; height:16px; }   
 .zoomnextIcon { background-image:url(images/nav_next.png); width:16px; height:16px; }    
 .panIcon { background-image:url(images/nav_pan.png); width:16px; height:16px; }  
    .deactivateIcon { background-image:url(images/nav_decline.png); width:16px; height:16px; }  
    </style>
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
    <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css"/>
    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://js.arcgis.com/3.7/"></script>

    <script>
        var map, navToolbar;
        require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "dijit/dijit", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
            "dijit/layout/AccordionContainer", "dijit/form/TextBox",
            "dijit/form/Button", "dijit/Toolbar", "dijit/Tooltip", "esri/toolbars/navigation", "dojo/domReady!"
        ], function (
          Map, ArcGISDynamicMapServiceLayer, Navigation
        ) {
            var startExtent = new esri.geometry.Extent({ "xmin": 2534400, "ymin": 1438400, "xmax": 2538900, "ymax": 1440900, "spatialReference": { "wkid": 102667 } });
            map = new Map("map", {
                "logo": false,
                "extent": startExtent
            });          

            var campusData = new ArcGISDynamicMapServiceLayer(
                "http://eagle.camplan.uga.edu:6080/arcgis/rest/services/CampusMap/UGA_CampusMap_Base/MapServer", {
                });

            navToolbar = new esri.toolbars.Navigation(map);
            dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

            function extentHistoryChangeHandler() {
                //Makes the first and last extent visited disable the first and last extent button
                dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent();
                dijit.byId("zoomnext").disabled = navToolbar.isLastExtent();
            }
            
            map.addLayer(campusData);
        });
        
        

        function panCursor() {
            //activates pan navigation tools and change cursor to pan arrows
            navToolbar.activate(esri.toolbars.Navigation.PAN);
            map.setMapCursor("move");
        }

        function deactivateNavToolbar() {
            //deactivates navbar and returns cursor to default
            navToolbar.deactivate();
            map.setMapCursor("default");
        }

        function zoomInCursor() {
            //deactivates navbar and returns cursor to default
            navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);
            map.setMapCursor("crosshair");
        }

        function zoomOutCursor() {
            //deactivates navbar and returns cursor to default
            navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);
            map.setMapCursor("crosshair");
        }

        function fullExtent() {
            //Goes to full extent and returns cursor to default
            navToolbar.zoomToFullExtent();
            map.setMapCursor("default");
        }

        function prevExtent() {
            //Goes to previous extent and returns cursor to default
            navToolbar.zoomToPrevExtent();
            map.setMapCursor("default");
        }

        function nextExtent() {
            //Goes to next extent and returns cursor to default
            navToolbar.zoomToNextExtent();
            map.setMapCursor("default");
        }

    </script>
  </head>
  <body class="claro">
  <div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;border:1px solid #000">
            <div id="header" dojotype="dijit.layout.ContentPane" region="top">
                 <div id="TopContainer" style="overflow:hidden; border:1px solid #000; width:220px; float:left;">                    
                     <div id="navToolbar" data-dojo-type="dijit.Toolbar" style="float:left">
                        <div data-dojo-type="dijit.form.Button"  id="zoomin" data-dojo-props="iconClass:'zoominIcon', onClick:function(){zoomInCursor();}"></div>
                            <span id="zoomin_tt" position="below" dojoType="dijit.Tooltip" connectId="zoomin">Activates Zoom In Tool. Click or Drag Box. You can also zoom with scroll wheel!</span>
                        <div data-dojo-type="dijit.form.Button"  id="zoomout" data-dojo-props="iconClass:'zoomoutIcon', onClick:function(){zoomOutCursor();}"></div>
                            <span id="zoomout_tt" position="below" dojoType="dijit.Tooltip" connectId="zoomout">Activates Zoom Out Tool. Click or Drag Box. You can also zoom with scroll wheel!</span>
                        <div data-dojo-type="dijit.form.Button"  id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon', onClick:function(){fullExtent();}"></div>
                            <span id="zoomfullext_tt" position="below" dojoType="dijit.Tooltip" connectId="zoomfullext">Zooms Map to Full Extent.</span>                       
                        <div data-dojo-type="dijit.form.Button"  id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon', onClick:function(){prevExtent();}"></div>
                            <span id="zoomprev_tt" position="below" dojoType="dijit.Tooltip" connectId="zoomprev">Goes Back One View.</span>
                        <div data-dojo-type="dijit.form.Button"  id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon', onClick:function(){nextExtent();}"></div>
                            <span id="zoomnext_tt" position="below"dojoType="dijit.Tooltip" connectId="zoomnext">Goes Forward One View</span>
                        <div data-dojo-type="dijit.form.Button"  id="pan" data-dojo-props="iconClass:'panIcon', onClick:function(){panCursor();}"></div>
                            <span id="pan_tt" position="below" dojoType="dijit.Tooltip" connectId="pan">Activates Panning Tool. You Can Also Right Click Map and Drag.</span>
                        <div data-dojo-type="dijit.form.Button"  id="deactivate" data-dojo-props="iconClass:'deactivateIcon' ,onClick:function(){deactivateNavToolbar()}"></div>
                            <span id="deact_tt" position="below" dojoType="dijit.Tooltip" connectId="deactivate">Deactivate and return to default arrow.</span>
                    </div>
                </div>
                <div id="searchContainer" style="overflow:hidden; width:360px; float:left">
                    <div id="FindBuilding" style="width:360px; height:4%; float:left; padding-top:6px; padding-left:4px">
                        <label for="searchText">UGA Building Search</label>
                        <input type="text" style="height:4%" id="searchText" autocomplete="off" value="Name or 4-Digit Code" onkeypress="{if (event.keyCode==13)execute(dojo.byId('searchText').value);}" onClick="SelectAll('searchText');"/>
                        <input type="button" value="Find" onclick="execute(dojo.byId('searchText').value);" />
                    </div>
                </div>
            </div>
            <div id="leftPane" dojotype="dijit.layout.ContentPane"  region="left" splitter="true" style="width:200px">
                <div dojotype="dijit.layout.BorderContainer" design="sidebar" >       
                    <div id="thumbContainer" dojoType="dijit.layout.ContentPane" region="center" style="padding-left:20px; width:100%;height:100%;border:1px solid #000">
                        <div id="basemapGallery"></div> 
                    </div>
                </div> 
            </div>
            <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="width:100%; height:100%; border:1px solid #000">      
            </div>
   </div>
    
  </body>
</html>

Re: navToolbar Issues

JasonZou — Sat, 11 Dec 2021 19:44:43 GMT

There are several issues in your code. Try to make below changes. Also refer to this thread for the offset issue.

Change:

<script>var dojoConfig = { parseOnLoad: true };</script>

To: set async to true is the requirement for AMD style.

<script>var dojoConfig = { parseOnLoad: true, async: true };</script>

Change:

require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "dijit/dijit", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
            "dijit/layout/AccordionContainer", "dijit/form/TextBox",
            "dijit/form/Button", "dijit/Toolbar", "dijit/Tooltip", "esri/toolbars/navigation", "dojo/domReady!"
        ], function (
          Map, ArcGISDynamicMapServiceLayer, Navigation
        ) {

To:

require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/toolbars/navigation", "dijit/dijit", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
            "dijit/layout/AccordionContainer", "dijit/form/TextBox",
            "dijit/form/Button", "dijit/Toolbar", "dijit/Tooltip", "dojo/domReady!"
        ], function (
          Map, ArcGISDynamicMapServiceLayer, Navigation
        ) {

The order of the modules in the array right after require should match the order of the parameters (module aliases) inside function(). You can have fewer module aliases. But once have in the alias list, those aliases must match the order in the module dependency list.

Re: navToolbar Issues

AlexDeVine — Wed, 30 Oct 2013 18:55:11 GMT

Jason,

Thank you very much for the fix on the cursor issue! I am trying to wrap my head around this AMD code style and am running into many issues.

Alex

topic Re: navToolbar Issues in ArcGIS JavaScript Maps SDK Questions

navToolbar Issues

Re: navToolbar Issues

Re: navToolbar Issues