adevine

navToolbar Issues

Discussion created by adevine on Oct 30, 2013
Latest reply on Oct 30, 2013 by adevine
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>

Outcomes