Community

Navigation Toolbar post AMD

1243
3
10-25-2013 06:44 AM
PeterMcBride
by
New Contributor
‎10-25-2013 06:44 AM
HI,

I am having some trouble making the navigation toolbar work in an application that I am porting to AMD. Everything loads fine but when I try to use the Zoom In and Zoom Out buttons I get the following error:

Error: Object doesn't support property or method 'activate'

Can anyone see any issues with the code below?

Peter

<!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.7/js/esri/css/esri.css"> 
 <style>      
 @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>      
 <script>     var dojoConfig = { parseOnLoad: false,
                                        packages: [
                                                   {
                                                    name: "ERMWidgets",
                                                    location: location.pathname.replace(/\/[^/]+$/, '') + '/ERMWidgets'
                                                }]
                                            };
    </script>  
 <script src="http://js.arcgis.com/3.7/"></script>  
 <script>
         var map;

         require([
         "esri/map",
         "dojo/parser",
         "esri/dijit/BasemapGallery",
         "esri/toolbars/navigation",
         "esri/arcgis/utils",
         "ERMWidgets/ZoomToXY",
         "dojo/dom",
         "dijit/form/TextBox",
         "dijit/form/Button",
         "dijit/Toolbar",
         "dijit/layout/BorderContainer",
         "dijit/layout/ContentPane",
         "dijit/layout/AccordionContainer",
         "dojo/domReady!"

        ], function (Map, parser, BasemapGallery, Navigation, arcgisUtils, ZoomToXY) {
            parser.parse();

            map = new Map("map", {
                basemap: "satellite",
                center: [-56.953, 57.472],
                zoom: 3
            });

            var basemaps = [];

            //Basemap 1
            var oceanLayer = new esri.dijit.BasemapLayer({ url: "http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer" });
            var OceanBasemap = new esri.dijit.Basemap({ layers: [oceanLayer], title: "ESRI Oceans Basemap", thumbnailUrl: "images/ocean.png" });
            basemaps.push(OceanBasemap);
            //Basemap 2
            var imageryLayer = new esri.dijit.BasemapLayer({ url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" });
            var ImageryBasemap = new esri.dijit.Basemap({ layers: [imageryLayer], title: "World Imagery", thumbnailUrl: "images/imagery.png" });
            basemaps.push(ImageryBasemap);
            //Basemap 3
            var physicalLayer = new esri.dijit.BasemapLayer({ url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer" });
            var PhysicalBasemap = new esri.dijit.Basemap({ layers: [physicalLayer], title: "Physical Imagery", thumbnailUrl: "images/physical.png" });
            basemaps.push(PhysicalBasemap);

            var basemapGallery = new esri.dijit.BasemapGallery({ showArcGISBasemaps: false, basemaps: basemaps, map: map }, "basemapGallery");
            basemapGallery.startup();

            basemapGallery.on("error", function (msg) {
                console.log("basemap gallery error:  ", msg);
            });

            var navToolbar = new Navigation(map);
            navToolbar.on("extent-history-change", extentHistoryChangeHandler);

            function extentHistoryChangeHandler() {
                dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent();
                dijit.byId("zoomnext").disabled = navToolbar.isLastExtent();
            }  

            newXY = new ZoomToXY({
                map: map
            }, dojo.byId('zoomXYDiv'));

            newXY.startup();

        });
 
 </script>
 </head>
      
 <body class="claro">  
    <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width:100%;height:100%;">
         <div id="header" data-dojo-type="dijit.layout.ContentPane" region="top">
             <div id="navToolbar" data-dojo-type="dijit.Toolbar"> 
               <div data-dojo-type="dijit.form.Button" id="zoomin"  data-dojo-props="iconClass:'zoominIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);}">Zoom In</div>
               <div data-dojo-type="dijit.form.Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);}">Zoom Out</div>
               <div data-dojo-type="dijit.form.Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon', onClick:function(){navToolbar.zoomToFullExtent();}">Full Extent</div> 
               <div data-dojo-type="dijit.form.Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon', onClick:function(){navToolbar.zoomToPrevExtent();}">Prev Extent</div>   
               <div data-dojo-type="dijit.form.Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon', onClick:function(){navToolbar.zoomToNextExtent();}">Next Extent</div>   
               <div data-dojo-type="dijit.form.Button" id="pan" data-dojo-props="iconClass:'panIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.PAN);}">Pan</div> 
               <div data-dojo-type="dijit.form.Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon' ,onClick:function(){navToolbar.deactivate();}">Deactivate</div>
                        <div data-dojo-type="dijit.form.DropDownButton" id="zoomXYButton" data-dojo-props="iconClass:'dijitIconEdit'"><span>Zoom to XY</span>
                        <div data-dojo-type="dijit.TooltipDialog"><div id="zoomXYDiv"></div></div> </div> 
      </div>
         </div>
         <div id="rightPane" data-dojo-type="dijit.layout.ContentPane" region="right" style="width:25%">
             <div data-dojo-type="dijit.layout.AccordionContainer">
                   <div data-dojo-type="dijit.layout.ContentPane" id="layerControlPane" title="LayerControl" selected="true" >
                        This pane will contain the layer control functions.
                   </div>
                    <div data-dojo-type="dijit.layout.ContentPane" id="legendPane" title="Legend" >
                        This pane will contain the legend.
                    </div>
                   <div data-dojo-type="dijit.layout.ContentPane" id="basemapPane" title="Select Basemap" >
                        <div id="basemapGallery"></div>
                   </div>
                    <div data-dojo-type="dijit.layout.ContentPane" id="metadataPane" title="Metadata" >
                        This pane will contain metadata information.
                    </div>
                    <div data-dojo-type="dijit.layout.ContentPane" id="analysisPane" title="Analysis" >
                        This pane will contain data analysis functions.
                    </div>
            </div>
         </div>             
       <div id="map" style="width:100%; height:512px; top:200px" region="center">

             </div>
     </div>

    </div>
 </body>
</html>
0 Kudos
3 Replies
JasonZou
by
Occasional Contributor III
‎10-25-2013 10:17 AM
Making navToolbar a global variable should solve the issue.

So change the code like:
<script>
    var map, navToolbar;
    require([...], function(...) {
        ...
        navToolbar = new Navigation(map);
    });
</script>
0 Kudos
AlexDeVine
by
New Contributor III
‎10-30-2013 04:52 AM
Try changing it to 

var navToolbar = new esri.toolbars.Navigation(map);
0 Kudos
AlexDeVine
by
New Contributor III
‎10-30-2013 06:01 AM
Ahhhh... I added this line in my head section and everything started working. I am just getting acquainted with the AMD model.

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