I have created a small query widget for ESRI's web app builder. However, I cannot get access the this.map object. When inspected in Chrome, it appears I'm getting some other object in the map's place instead. What am I doing wrong here, and how do I obtain the this.map object correctly?
The error occurs on the line where this.map.setextent occurs and the error is:
this.map.setExtent is not a function
Any attempt to work with this.map results in a similar error. I have tried comparing my code against the pre-existing ESRI widgets in the web app builder and I am not seeing any differences that would lead to this error.
define([
'dojo/_base/declare',
'dojo/_base/lang',
'dojo/_base/query',
'dojo/_base/html',
'dojo/_base/array',
'dojo/_base/fx',
'dojo/promise/all',
'dojo/Deferred',
'esri/map',
'esri/graphic',
'esri/graphicsUtils',
'dojo/on',
'jimu/BaseWidget',
'dojo/dom',
'esri/tasks/query',
'esri/tasks/QueryTask',
'esri/layers/FeatureLayer',
'jimu/MapManager',
'esri/geometry/Extent',
'esri/Color',
'esri/symbols/SimpleMarkerSymbol',
'esri/symbols/SimpleLineSymbol',
'esri/symbols/SimpleFillSymbol'
],
function(declare, lang, query, html, array, fx, all, Deferred, Map, Graphic, graphicsUtils, on, BaseWidget, dom, Query, QueryTask, FeatureLayer, MapManager, Extent, Color, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol) { //a
//To create a widget, you need to derive from BaseWidget.
return declare([BaseWidget], {
// Custom widget code goes here
baseClass: 'jimu-widget-nessearch',
name: 'Search',
startup: function() {
console.log('startup');
},
_onPointBtnClicked: function(){ //d
//var layer
var query = new Query();
query.returnGeometry = true;
switch (dom.byId("SelectType").selectedIndex) { //e
case 0:
var featurelayer = <Layer 0>);
query.outFields = ["POLE_NO", "PNO"];
query.where = "UPPER(POLE_NO) LIKE UPPER('%" + dom.byId("SearchValue").value + "%')";
featurelayer.queryFeatures(query, function(result){
alert(this.map.id); //returns an id of "map"
//Problem Line:
this.map.setExtent(graphicsUtils.graphicsExtent(result.features), true); //fails here
var markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1.5), new Color([255, 0, 0, 0.5]));
var polygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), new Color([255, 0, 0, 0.5]));
});
break;
}
return;
}
});
});