Navigation Toolbar Error: Navigation is not a Constructor

Dr__JasrajGramopadhye — Fri, 27 Jun 2014 19:42:42 GMT

Hi All,

I am getting an error while adding a navigation toolbar into my web application using JavaScript.
The error message reads "TypeError: Navigation is not a constructor".

I have attached my code here for reference.
The code to add the toolbar is placed towards the end, after 'map.addlayers'.

Am I missing something?
I would appreciate any help or suggestions.

Thanks.
Jasraj

Code:

<script>       var map;    var navToolbar;        require([         "esri/map",         "esri/layers/ArcGISDynamicMapServiceLayer",         "esri/layers/ImageServiceParameters",      "dojo/_base/connect",      "dojo/dom", "dojo/parser","dojo/on", "dojo/_base/Color",   "esri/geometry/Extent",    "esri/layers/FeatureLayer",   "esri/layers/ArcGISTiledMapServiceLayer",    "esri/symbols/SimpleFillSymbol",   "esri/renderers/ClassBreaksRenderer",   "agsjs/dijit/TOC",    "dijit/layout/BorderContainer",    "dijit/layout/ContentPane",    "dojo/fx", "dojo/domReady!",      "esri/toolbars/navigation",   "dijit/registry",         "dijit/Toolbar",         "dijit/form/Button",   "dojo/domReady!"      ],         function(Map, ArcGISDynamicMapServiceLayer, ImageParameters, connect, dom, parser, on, Color,    Extent, FeatureLayer, ArcGISTiledMapServiceLayer,    SimpleFillSymbol,ClassBreaksRenderer, TOC, BorderContainer, ContentPane, Navigation, registry, Toolbar, Button)                 {       //var navToolbar;            map = new Map("mapDiv", {           sliderOrientation : "horizontal"         });      var imageParameters = new ImageParameters();         imageParameters.format = "PNG"; //set the image type to PNG24, note default is PNG8.          //Takes a URL to a non cached map service.         var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://vm-gisdev.personcounty.local/arcgis/rest/services/TaxWebApp/Tax_Web_Application/MapServer", {           "opacity" : 1,           "imageParameters" : imageParameters         });          map.addLayer(dynamicMapServiceLayer);       featLayer1 = new FeatureLayer("http://vm-gisdev.personcounty.local/arcgis/rest/services/TaxWebApp/Tax_Web_Application/MapServer/1", {                 mode: FeatureLayer.MODE_SNAPSHOT,                 outFields: ["*"]               });            /* dynaLayer1 = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/0", {                 mode: FeatureLayer.MODE_SNAPSHOT,                 outFields: ["*"]               });*/                    map.on ('layers-add-result', function (evt) {                 // overwrite the default visibility of service.                 // TOC will honor the overwritten value.                 //dynamicMapServiceLayer.setVisibleLayers ([2, 5, 8, 11]);                 //try {                   toc = new TOC({                     map: map,                     layerInfos: [{                       layer: featLayer1,                       title: "FeatureLayer1"                     }, {       layer: dynamicMapServiceLayer,                       title: "dynamicMapServiceLayer"        }      ]                   }, 'tocDiv');                   toc.startup()       });           map.addLayers([featLayer1]);      // Add Navigation Toolbar                        navToolbar = new Navigation(map);         on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);            registry.byId("zoomin").on("click", function () {             navToolbar.activate(Navigation.ZOOM_IN);           });            registry.byId("zoomout").on("click", function () {             navToolbar.activate(Navigation.ZOOM_OUT);           });            registry.byId("zoomfullext").on("click", function () {             navToolbar.zoomToFullExtent();           });            registry.byId("zoomprev").on("click", function () {             navToolbar.zoomToPrevExtent();           });            registry.byId("zoomnext").on("click", function () {             navToolbar.zoomToNextExtent();           });            registry.byId("pan").on("click", function () {             navToolbar.activate(Navigation.PAN);           });            registry.byId("deactivate").on("click", function () {             navToolbar.deactivate();           });            function extentHistoryChangeHandler () {             registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();             registry.byId("zoomnext").disabled = navToolbar.isLastExtent();           }            });         </script>

Re: Navigation Toolbar Error: Navigation is not a Constructor

KenBuja — Mon, 30 Jun 2014 12:22:55 GMT

The arguments in the function are not matching the order in require. You also have an extra "dojo/domReady!"

      require([         "esri/map",         "esri/layers/ArcGISDynamicMapServiceLayer",         "esri/layers/ImageServiceParameters",                  "dojo/_base/connect",         "dojo/dom", "dojo/parser","dojo/on", "dojo/_base/Color",         "esri/geometry/Extent",          "esri/layers/FeatureLayer",         "esri/layers/ArcGISTiledMapServiceLayer",          "esri/symbols/SimpleFillSymbol",         "esri/renderers/ClassBreaksRenderer",         "agsjs/dijit/TOC",          "dijit/layout/BorderContainer",          "dijit/layout/ContentPane",          "esri/toolbars/navigation",         "dijit/registry",         "dijit/Toolbar",         "dijit/form/Button",         "dojo/fx", "dojo/domReady!",         ],                        function(Map, ArcGISDynamicMapServiceLayer, ImageParameters, connect, dom, parser, on, Color,          Extent, FeatureLayer, ArcGISTiledMapServiceLayer,          SimpleFillSymbol,ClassBreaksRenderer, TOC, BorderContainer, ContentPane, Navigation, registry, Toolbar, Button)                 {

If you have any questions about that, see this blog.

Re: Navigation Toolbar Error: Navigation is not a Constructor

Dr__JasrajGramopadhye — Mon, 30 Jun 2014 17:58:16 GMT

Thanks, Ken.

I made the changes you suggested, and added parser.parse();. It worked!

topic Re: Navigation Toolbar Error: Navigation is not a Constructor in ArcGIS JavaScript Maps SDK Questions

Navigation Toolbar Error: Navigation is not a Constructor

Re: Navigation Toolbar Error: Navigation is not a Constructor

Re: Navigation Toolbar Error: Navigation is not a Constructor