So i'm just kicking off my first WAB widget and immediately running into an issue trying to set map click handlers when the widget is opened. Looking through the esri coordinate widget i found this...
this.own(on(this.map, "click", lang.hitch(this, this.onMapClick)));
But I just can't get it to register the event, here's my full code...
define([ 'dojo/_base/declare', 'jimu/BaseWidget', 'esri/geometry/Point', 'esri/SpatialReference' ], function(declare, BaseWidget) { //To create a widget, you need to derive from BaseWidget. return declare([BaseWidget], { // Custom widget code goes here baseClass: 'jimu-widget-customwidget', startup: function() { this.inherited(arguments); //this.mapIdNode.innerHTML = 'map id:' + String(this.map.getScale()); }, onOpen: function(){ this.own(on(this.map, "click", lang.hitch(this, this.onMapClick))); }, onMapClick: function(event) { window.alert('map click'); this.mapIdNode.innerHTML = 'map id:' + String(event.mapPoint.x); } }); });
I'm very confused why this isn't working.
Also does anyone know where i can find better documentation specific to the WAB? i also found this in the measurement widget and trying to work out the differences is giving me a headache, there seems to be a lot of methods/functions not found in the JSAPI and it would be nice to know what they are.
if (this.map && this.map.webMapResponse) { var handler = this.map.webMapResponse.clickEventHandle; if (handler) { handler.remove(); this.map.webMapResponse.clickEventHandle = null; } }
Thanks all!
Richard
Solved! Go to Solution.
Managed to answer my own question, code is below for future reference, the issue was that i wasn't defining dojo.lang.
define([ 'dojo/_base/declare', 'dijit/_WidgetsInTemplateMixin', 'jimu/BaseWidget', 'dojo/_base/lang', 'dojo/on', 'dojo/dom', 'dojo/domReady', 'esri/tasks/query', 'esri/tasks/QueryTask' ], function( declare, _WidgetsInTemplateMixin, BaseWidget, lang, on, dom, domReady, Query, QueryTask ) { //To create a widget, you need to derive from BaseWidget. return declare([BaseWidget, _WidgetsInTemplateMixin], { // Custom widget code goes here baseClass: 'jimu-widget-editor', name: 'Editor', startup: function() { this.inherited(arguments); }, onOpen: function(){ this.own(on(this.map, "click", lang.hitch(this, this.onMapClick))); }, onMapClick: function(event) { this.mapIdNode.innerHTML = String(event.mapPoint.x); var queryTask = new QueryTask('*Service URL*'); var query = new Query(); query.returnGeometry = true; query.outFields = ['*']; query.geometry = event.mapPoint; queryTask.execute(query, lang.hitch(this, this.showResults)); }, showResults: function(results) { var resultItems = []; var resultCount = results.features.length; for (var i = 0; i < resultCount; i++) { var featureAttributes = results.features.attributes; this.featName.innerHTML = featureAttributes.NAME; //window.alert(featureAttributes.NAME); } } }); });
Managed to answer my own question, code is below for future reference, the issue was that i wasn't defining dojo.lang.
define([ 'dojo/_base/declare', 'dijit/_WidgetsInTemplateMixin', 'jimu/BaseWidget', 'dojo/_base/lang', 'dojo/on', 'dojo/dom', 'dojo/domReady', 'esri/tasks/query', 'esri/tasks/QueryTask' ], function( declare, _WidgetsInTemplateMixin, BaseWidget, lang, on, dom, domReady, Query, QueryTask ) { //To create a widget, you need to derive from BaseWidget. return declare([BaseWidget, _WidgetsInTemplateMixin], { // Custom widget code goes here baseClass: 'jimu-widget-editor', name: 'Editor', startup: function() { this.inherited(arguments); }, onOpen: function(){ this.own(on(this.map, "click", lang.hitch(this, this.onMapClick))); }, onMapClick: function(event) { this.mapIdNode.innerHTML = String(event.mapPoint.x); var queryTask = new QueryTask('*Service URL*'); var query = new Query(); query.returnGeometry = true; query.outFields = ['*']; query.geometry = event.mapPoint; queryTask.execute(query, lang.hitch(this, this.showResults)); }, showResults: function(results) { var resultItems = []; var resultCount = results.features.length; for (var i = 0; i < resultCount; i++) { var featureAttributes = results.features.attributes; this.featName.innerHTML = featureAttributes.NAME; //window.alert(featureAttributes.NAME); } } }); });
Thanks for this. It helped me too.
This helped me a good bit. Thanks for sharing.
Additional link that may be useful. I found this page first, then the link below to show removing the event.
https://community.esri.com/thread/214607-how-to-turn-tool-for-mapclick-event-on-and-off