topic Re: How to call a button to work from JavaScript API file in ArcGIS JavaScript Maps SDK Questions

How to call a button to work from JavaScript API file

LeiZhou — Mon, 15 Sep 2014 19:56:57 GMT

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!

Re: How to call a button to work from JavaScript API file

ReneRubalcava — Mon, 15 Sep 2014 20:00:51 GMT

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

Re: How to call a button to work from JavaScript API file

LeiZhou — Mon, 15 Sep 2014 22:36:03 GMT

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!

Re: How to call a button to work from JavaScript API file

OwenEarley — Mon, 15 Sep 2014 22:51:16 GMT

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.

Re: How to call a button to work from JavaScript API file

LeiZhou1 — Tue, 16 Sep 2014 15:19:48 GMT

Thanks a lot!

Re: How to call a button to work from JavaScript API file

LeiZhou1 — Tue, 16 Sep 2014 15:23:42 GMT

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!

Re: How to call a button to work from JavaScript API file

OwenEarley — Tue, 16 Sep 2014 23:35:03 GMT

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.