[GIS] Uncaught TypeError: Cannot read property ‘on’ of undefined

arcgis-javascript-apidojo

I have added a drawpolygon tool in navigation toolbar,but when clicking on this tool event is not firing.

Please suggest me how to solve this error :

Cannot read property 'on' of undefined.

Below my whole code :

<!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>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">

    <style>

    @import "https://js.arcgis.com/3.15/dijit/themes/claro/claro.css";


      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }


      .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;
      }

      .drawrectangleIcon {
        background-image: url(images/nav_drawrectangle.png);
        width: 16px;
        height: 16px;
      }
    </style>
    <script src="http://js.arcgis.com/3.14/"></script>  
    <script>
      var map,navToolbar,drawToolbar;

      require(["esri/map",
                "esri/toolbars/navigation",
                "dojo/on",
                "dojo/parser",              
                "dijit/registry",
                "dijit/Toolbar",
                "dijit/form/Button",
                "esri/toolbars/draw",
                "esri/graphic",
                "esri/symbols/SimpleLineSymbol",
                "esri/Color",
                "dojo/domReady!"], function(Map, Navigation, on, parser, registry,Draw,Graphic,SimpleLineSymbol,Color) {
          map = new Map("map", {
          basemap: "streets",  
          center: [72, 25.75], 
          zoom: 5,        
        });
            parser.parse();

            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();
          });

         registry.byId("drawRectangle").on("click", function() {

                    alert("Index");
                    navToolbar.deactivate();
                    drawToolbar.activate(esri.toolbars.Draw.RECTANGLE);

                });


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



    });
    </script>
  </head>

  <body>     
    <div id="navToolbar" data-dojo-type="dijit/Toolbar">
      <div data-dojo-type="dijit/form/Button" id="zoomin" title="Zoom in" data-dojo-props="iconClass:'zoominIcon'"></div>
      <div data-dojo-type="dijit/form/Button" id="zoomout" title="Zoom Out" data-dojo-props="iconClass:'zoomoutIcon'"></div>
      <div data-dojo-type="dijit/form/Button" id="zoomfullext" title="Zoom to Full Extent" data-dojo-props="iconClass:'zoomfullextIcon'"></div>
      <div data-dojo-type="dijit/form/Button" id="zoomprev" title="Zoom to Previous Extent" data-dojo-props="iconClass:'zoomprevIcon'"></div>
      <div data-dojo-type="dijit/form/Button" id="zoomnext" title="Zoom to Next Extent" data-dojo-props="iconClass:'zoomnextIcon'"></div>
      <div data-dojo-type="dijit/form/Button" id="pan" title="Pan" data-dojo-props="iconClass:'panIcon'"></div>
      <div data-dojo-type="dijit/form/Button" id="deactivate" title="Deactivate" data-dojo-props="iconClass:'deactivateIcon'"></div>
      <div data-dojo-type="dijit/form/Button" id="drawrectangle" title="DrawPolygon" data-dojo-props="iconClass:'drawrectangleIcon'"></div>
    </div>
   <div id="map"></div>


  </body>
</html>

Best Answer

Your issue is that you have registry.byId("drawRectangle") (with a capital "R"), but in your HTML you have a lower case "R": id="drawrectangle"

Related Question