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: "<b>Status</b>: ${STATUS}" +
"<br><b>Cumulative Gas</b>: ${CUMM_GAS} MCF" +
"<br><b>Total Acres</b>: ${APPROXACRE}" +
"<br><b>Avg. Field Depth</b>: ${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 = "<i>" + clearMsg + "</i>";
});
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 = "<b>" + this.selectSumMsgPrefix + " " + productionSum + " " + this.selectSumUnits + ". </b>";
}
});
});
Best Answer
The ArcGIS JavaScript API, will allow the map center to be like you show but to use an extent, you need to do it a little differently. Here's how you can set a custom extent:
First ensure that the esri Extent module is included at the top of your
config/viewerfile. If you are using the demo configuration that comes with CMV, then it is already there. If not, you will need to add it. The first few lines will look something like this:define([ 'esri/units', 'esri/geometry/Extent', 'esri/config', 'esri/tasks/GeometryService', 'esri/layers/ImageParameters' ], function(units, Extent, esriConfig, GeometryService, ImageParameters) {then the
extentfor your mapOptions would look something like this:extent: new Extent({ xmin: -106.5918, ymin: 28.0959, xmax: -86.5918, ymax: 48.0959, spatialReference: { wkid: 4326 } }),The extent above is around the center of the CMV demo map at the same zoom level as the demo. The coordinates and the spatialReference wkid you use in the extent would be different depending on the basemap (ArcGIS Online or a MapService from an ArcGIS Server) you use.