topic Re: Accessing Map from Widget code in ArcGIS Web AppBuilder Questions

Accessing Map from Widget code

SteveCole — Sun, 12 Dec 2021 04:33:01 GMT

I'm likely making a stupid mistake but right now I'm not seeing it. I'm getting my feet wet with WAB Developer Edition 2.8 and I'm making a simple widget (based on demo widget template in the samplewidgets folder). In my widget, the user specifies a township/range/section and the map zooms to that location. Here's the widget:

Simple stuff. My code works up to the point of updating the map extent. I get an error that the "Object doesn't support property or method 'setExtent'". From my search, I feel like I'm referencing the map the right way but clearly I'm not. What am I missing?

There's not much to it but here's my widget.js code:

define(['dojo/_base/declare', 'dojo/dom', 'dojo/on', 'esri/tasks/query', 'esri/tasks/QueryTask', 'jimu/BaseWidget'],
function(declare, dom, on, Query, QueryTask, BaseWidget) {
  //To create a widget, you need to derive from BaseWidget.
  return declare([BaseWidget], {
    // DemoWidget code goes here

    //please note that this property is be set by the framework when widget is loaded.
    //templateString: template,

    baseClass: 'jimu-widget-demo',

    postCreate: function() {
      this.inherited(arguments);
      //console.log('postCreate');
    },

    startup: function() {
        this.inherited(arguments);
        this.mapIdNode.innerHTML = 'map id:' + this.map.id;
          
        on(dom.byId("zoomButton"), "click", function() {               
               var queryString = "Township=" + dom.byId('townshipNum').value + " AND TWP_CHAR='" + dom.byId('townshipDir').value + "' AND RANGE=" + dom.byId('rangeNum').value;
               queryString = queryString + " AND RNG_CHAR='" +dom.byId('rangeDir').value + "' AND SECTION=" + dom.byId('sectionNum').value;
            
            var query = new Query();
               query.returnGeometry = true;
               query.where = queryString;
               
            var qTask = new QueryTask("https://navigator.state.or.us/arcgis/rest/services/Framework/Cadastral_PLSS_WM/MapServer/3");
               qTask.execute(query, function(results) {
                    if (results.features.length != 1) {
                         alert('There was an issue zooming into your Township/Range/Section.');
                    } else {
                    var plssGeom = results.features[0].geometry;
                    this.map.setExtent(plssGeom.getExtent());
                    }
               });
          });      
    },

    onOpen: function(){
      //console.log('onOpen');
    },

    onClose: function(){
      //console.log('onClose');
    },

    onMinimize: function(){
      //console.log('onMinimize');
    },

    onMaximize: function(){
      //console.log('onMaximize');
    }
  });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The error happens on line 35 in my code above. Should my code be in a different event function instead of startup?

Thanks!

Steve

Re: Accessing Map from Widget code

RobertScheitlin__GISP — Sun, 12 Dec 2021 04:33:04 GMT

Steve,

The scope of “this” inside of your query task function is different from the scope outside of that function. To maintain the scope you must use lang.hitch or a closure.

    startup: function() {
        this.inherited(arguments);
        this.mapIdNode.innerHTML = 'map id:' + this.map.id;
          
        on(dom.byId("zoomButton"), "click", lang.hitch(this, function() {               
            var queryString = "Township=" + dom.byId('townshipNum').value + " AND TWP_CHAR='" + dom.byId('townshipDir').value + "' AND RANGE=" + dom.byId('rangeNum').value;
            queryString = queryString + " AND RNG_CHAR='" +dom.byId('rangeDir').value + "' AND SECTION=" + dom.byId('sectionNum').value;
            
            var query = new Query();
            query.returnGeometry = true;
            query.where = queryString;
               
            var qTask = new QueryTask("https://navigator.state.or.us/arcgis/rest/services/Framework/Cadastral_PLSS_WM/MapServer/3");
            qTask.execute(query, lang.hitch(this, function(results) {
                if (results.features.length != 1) {
                    alert('There was an issue zooming into your Township/Range/Section.');
                } else {
                    var plssGeom = results.features[0].geometry;
                    this.map.setExtent(plssGeom.getExtent());
                }
            }));
        }));      
    },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Accessing Map from Widget code

SteveCole — Tue, 22 May 2018 15:02:36 GMT

Thanks, Robert. I'll give this a try tonight. I figured I was doing something stupid!