How to call a button to work from JavaScript API file

[LeiZhou]

I am trying to create a group of draw tools like point, freehandpolyline and freehandpolygon in a ESRI's JavaScript map template.  I set up three buttons in the index.html as the following:

<button id="point" data-dojo-type="dijit/form/Button"></button>

<button id="freehandpolyline" data-dojo-type="dijit/form/Button"></button>

<button id="freehandpolygon" data-dojo-type="dijit/form/Button"></button>

After that I tried to registered these buttons in a file called 'main.js' inside the js folder of the template.

var tb = new Draw(this.map); registry.byId("point").on("click", function () { tb.activate(this.id); }); 

But  it just can not call this  button at all.  The debug tools indicate that "cannot read property 'on' of undefined. Any hint would be helpful. Thanks!

[ReneRubalcava]

Did you require dojo/parser and diji/form/Button in your main.js file?

If you don't set parseOnLoad; true in your dojoConfig, you'll need to do parser.parse() before anything else.

dijit/form/Button — The Dojo Toolkit - Reference Guide

[LeiZhou]

After adding parser.parse(), there is new issue about adding graphics, it indicates that "Cannot read property 'graphics' of undefined

function addGraphic(evt) {

    var graphic = new Graphic(evt.geometry, symbol);

    this.map.graphics.add(graphic);

}

graphics is a property of map object, and I already use paresr.parse(), why it cannot read graphics? Thanks!

[OwenEarley]

The error indicates that this.map has not been defined at the time the addGraphic function runs.

Is the function being called before the map is created?

You may need to check if this.map is undefined before calling the addGraphic function. You could also look into the map load event and define your button click handlers after the map loads.

[LeiZhou1]

Thank you very much! I checked the link you sent to me, and I am trying to figure out how to tell a map is loaded.  Can I just use " this.map.on("load");" to load the map? Before addGraphic function(), some other statements already call the map like " this.map.addLayer(layer1);".  If they addLayer method can work, why this.map.graphics.add(graphics) is not working? Thanks!

[OwenEarley]

This example from the API documentation shows adding a graphic when the map loads:

require([
  "esri/map", "esri/geometry/Point", "esri/SpatialReference",
  "esri/symbols/SimpleMarkerSymbol", "esri/graphic", ... 
], function(Map, Point, SpatialReference, SimpleMarkerSymbol, Graphic, ... ) {
  var map = new Map( ... );
  map.on("load", function() { ShowLocation(-81.3765, 28.54175); });

  function ShowLocation(x, y) {
    var point = new Point(x, y, new SpatialReference({wkid:4326}));
    var simpleMarkerSymbol = new SimpleMarkerSymbol();
    var graphic = new Graphic(point, simpleMarkerSymbol);
    map.graphics.add(graphic);
  };
  ...
});

It is hard to determine why other statements are working without viewing the your source code.

[LeiZhou1]

Thanks a lot!