1

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 Feb 26 '16 at 13:51
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"

1

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 :

  1. DrawToolbar not instantiated ,
  2. 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();
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.