Uncaught TypeError: Cannot read property 'on' of undefined

Question

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>

Do you know which line in your code throws this error?
– ArMoraer
Commented Feb 26, 2016 at 13:51 — ArMoraer, Commented Feb 26, 2016 at 13:51

GavinR · Accepted Answer · 2016-02-26 14:33:12Z

1

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"

answered Feb 26, 2016 at 14:33

GavinR

2,2681 gold badge12 silver badges14 bronze badges

Add a comment |

Bourbia Brahim · Accepted Answer · 2016-02-26 16:03:54Z

First thing , you have problems in your module import (wrong ordering , Button and Diiji/toolabr should figure the last in the list , so that's why you code confuses and throw the error !)

edit as GavinR said : you have Capitalized R in the button id registry.byId("drawRectangle") , should be replaced by registry.byId("drawrectangle")

Also, You forget and missed some instruction :

DrawToolbar not instantiated ,
Draw-end not fired , so the graphic never added to the map

I've add some instruction in the JS part, so the code will work correctly :

Replace JS with these code : ( I added comment where I made changes )

var map, navToolbar, drawToolbar;
// reorganize module import dijit/toolbar and button the last 
require(["esri/map",
    "esri/toolbars/navigation",
    "dojo/on",
    "dojo/parser",
    "dijit/registry",
    "esri/toolbars/draw",
    "esri/graphic",
    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/Color",
    "dijit/Toolbar",
    "dijit/form/Button",
    "dojo/domReady!"], function(Map, Navigation, on, parser, registry, Draw, Graphic, SimpleFillSymbol, SimpleLineSymbol, Color) {
    map = new Map("map", {
        basemap: "streets",
        center: [72, 25.75],
        zoom: 5,
    });
    parser.parse();

    navToolbar = new Navigation(map);

    //ADDED draw tool bar instantiation
    drawToolbar = new Draw(map);
    //ADDED event when draw complete 
    drawToolbar.on("draw-end", addPolygone);


    //ADDED symbol for polygone !
    var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
            new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25])
            );
    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();
    });
    //replace drawrectangle instead of drawRectangle
    registry.byId("drawrectangle").on("click", function() {

        alert("draw poly activated");
        navToolbar.deactivate();
        drawToolbar.activate(esri.toolbars.Draw.RECTANGLE);

    });


    //ADDED methode fired when draw complete to add graphic to the map 
    function addPolygone(evt) {
        drawToolbar.deactivate();
        var graphic = new Graphic(evt.geometry, symbol);
        map.graphics.add(graphic);
    }

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

Stack Exchange Network

Uncaught TypeError: Cannot read property 'on' of undefined

2 Answers 2

Your Answer

Not the answer you're looking for? Browse other questions tagged
dojo
arcgis-maps-sdk-javascript
or ask your own question.

Hot Network Questions

Uncaught TypeError: Cannot read property 'on' of undefined

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged dojoarcgis-maps-sdk-javascript or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
dojo
arcgis-maps-sdk-javascript
or ask your own question.