I am trying to build my first widget, for use in the Configurable Map Viewer (CMV), using code from ESRI's ArcGIS API for JavaScript feature layer with selection sample. I've been successful in configuring a template and css file so the select and clear buttons show up in the viewer as desired, but I am having trouble modifying the ESRI developer sample for use in the CMV. I've adapted enough of the sample to be able to draw a box on the map with the draw tool but nothing is selected. I'm not following enough of what's going on in some of the other widgets I've looked at to have any confidence that I've successfully adapted the code for PostCreate, initSelectToolbar or sumGasProduction (obviously I haven't). I'm wondering if anyone has tackled the ESRI sample and has any suggestion as to what PostCreate, initSelectToolbar and sumGasProduction should look like or have any suggested references for someone getting started?
Code:
define([
'dojo/_base/declare',
'dijit/_WidgetBase',
'dijit/_TemplatedMixin',
'dijit/_WidgetsInTemplateMixin',
'esri/toolbars/draw',
'esri/InfoTemplate',
'esri/layers/FeatureLayer',
'esri/symbols/SimpleFillSymbol',
'esri/symbols/SimpleLineSymbol',
'esri/Color',
'esri/tasks/query',
'dijit/form/Button',
'dojo/_base/lang',
'dojo/on',
'dojo/text!./Select/templates/Select.html',
'xstyle/css!./Select/css/Select.css'
], function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, Draw, InfoTemplate, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol, Color, Query, Button, lang, on, SelectTemplate, css) {
return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
widgetsInTemplate: true,
templateString: SelectTemplate,
selectTools: null,
postCreate: function () {
this.selectTools = new Draw(this.map);
this.selectTools.on('load', lang.hitch(this, 'initSelectToolbar'));
this.fieldsSelectionSymbol =
new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 2),
new Color([255, 255, 0, 0.5]));
var content = "Status: ${STATUS}" +
"
Cumulative Gas: ${CUMM_GAS} MCF" +
"
Total Acres: ${APPROXACRE}" +
"
Avg. Field Depth: ${AVG_DEPTH} meters";
var infoTemplate = new InfoTemplate("${FIELD_NAME}", content);
this.featureLayer = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",
{
mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate: infoTemplate,
outFields: ["*"]
});
this.featureLayer.setDefinitionExpression("PROD_GAS='Yes'");
this.featureLayer.setSelectionSymbol(this.fieldsSelectionSymbol);
this.featureLayer.on("selection-complete", 'sumGasProduction');
this.featureLayer.on("selection-clear", function () {
document.getElementById('messages').innerHTML = "No Selected Fields";
});
this.map.addLayer(FeatureLayer);
},
select: function () {
this.selectTools.activate(Draw.EXTENT);
},
clearSelection: function () {
this.featureLayer.clearSelection();
},
initSelectToolbar: function (event) {
//selectionToolbar = new Draw(event.map);
this.selectQuery = new Query();
on(this.selectTools, "DrawEnd", function (geometry) {
this.selectTools.deactivate();
this.selectQuery.geometry = geometry;
this.featureLayer.selectFeatures(this.selectQuery,
FeatureLayer.SELECTION_NEW);
});
},
sumGasProduction: function (event) {
this.productionSum = 0;
//summarize the cumulative gas production to display
arrayUtil.forEach(event.features, function (feature) {
this.productionSum += feature.attributes.CUMM_GAS;
});
document.getElementById('messages').innerHTML = "Selected Fields Production: " + productionSum + " mcf. ";
}
});
});
The following configuration below seems to be working fine. I'd appreciate any issues being pointed out.
The configuration of the widget:
select: {
include: true,
id: 'select',
type: 'titlePane',
canFloat: true,
path: 'gis/dijit/Select',
title: 'Select',
open: false,
position: 10,
options: {
map: true,
mapClickMode: true,
featureLayerURL: 'http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1',
content: "Status: ${STATUS}" +
"
Cumulative Gas: ${CUMM_GAS} MCF" +
"
Total Acres: ${APPROXACRE}" +
"
Avg. Field Depth: ${AVG_DEPTH} meters",
title: '${FIELD_NAME}',
defExpress: "PROD_GAS='Yes'",
clearSelectMsg: 'No Selected Fields',
fieldToSum: 'CUMM_GAS',
selectSumMsgPrefix: 'Selected Fields Production:',
selectSumUnits: 'mcf'
}
},
The widget:
define([
'dojo/_base/declare',
'dijit/_WidgetBase',
'dijit/_TemplatedMixin',
'dijit/_WidgetsInTemplateMixin',
'esri/toolbars/draw',
'esri/InfoTemplate',
'esri/layers/FeatureLayer',
'esri/symbols/SimpleFillSymbol',
'esri/symbols/SimpleLineSymbol',
'esri/Color',
'esri/tasks/query',
'dijit/form/Button',
'dojo/_base/lang',
'dojo/on',
'dojo/_base/array',
'dojo/dom',
'dojo/text!./Select/templates/Select.html',
'xstyle/css!./Select/css/Select.css'
], function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, Draw, InfoTemplate, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol, Color, Query, Button, lang, on, arrayUtil, dom, SelectTemplate, css) {
return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
widgetsInTemplate: true,
templateString: SelectTemplate,
selectTools: null,
postCreate: function () {
this.selectTools = new Draw(this.map);
this.selectQuery = new Query();
on(this.selectTools, "DrawEnd", lang.hitch(this, function (geometry) {
this.selectTools.deactivate();
this.selectQuery.geometry = geometry;
this.featureLayer.selectFeatures(this.selectQuery,
FeatureLayer.SELECTION_NEW);
}));
this.fieldsSelectionSymbol =
new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 2),
new Color([255, 255, 0, 0.5]));
var infoTemplate = new InfoTemplate(this.title, this.content);
this.featureLayer = new FeatureLayer(this.featureLayerURL,
{
mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate: infoTemplate,
outFields: ["*"]
});
this.featureLayer.setDefinitionExpression(this.defExpress);
this.featureLayer.setSelectionSymbol(this.fieldsSelectionSymbol);
this.featureLayer.on("selection-complete", lang.hitch(this, 'sumGasProduction'));
var clearMsg = this.clearSelectMsg;
this.featureLayer.on("selection-clear", function () {
dom.byId('messages').innerHTML = "" + clearMsg + "";
});
this.map.addLayer(this.featureLayer);
},
select: function () {
this.selectTools.activate(Draw.EXTENT);
},
clearSelection: function () {
this.featureLayer.clearSelection();
},
sumGasProduction: function (event) {
var productionSum = 0;
var sumField = this.fieldToSum;
arrayUtil.forEach(event.features, function (feature) {
productionSum += feature.attributes[sumField];
});
dom.byId('messages').innerHTML = "" + this.selectSumMsgPrefix + " " + productionSum + " " + this.selectSumUnits + ". ";
}
});
});