Map click events and related WAB documentation

5184
4
Jump to solution
01-22-2015 08:56 AM
HessCorporation
New Contributor

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

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
RichardThompson
New Contributor II

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);
  }
  }
   });
});  

View solution in original post

4 Replies
RichardThompson
New Contributor II

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);
  }
  }
   });
});  
CarlosSousaFerreira
New Contributor III

Thanks for this. It helped me too.

0 Kudos
AndrewDavis5
New Contributor II

This helped me a good bit.  Thanks for sharing.

0 Kudos
TimDine
Occasional Contributor II

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

0 Kudos