I am trying to get the area of a polygon and divide that by 16.94 ft^2. I have plugged in a Template I found. I am missing something. I am trying to get the template and my original code to talk. That way when I draw a polygon the area is outputted along with the original function of finding the average of the point values within.

UPDATE: The error I keep getting is: "TypeError: Cannot read property '0' of undefinedmessage: "Cannot read property '0' of undefined"stack: (...)get stack: function () { [native code] }set stack: function () { [native code] }proto: Error "TypeError: Cannot read property '0' of undefined"

'xstyle/css!./Select/css/Select.css'  ,

], function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, Draw, InfoTemplate, FeatureLayer, SimpleMarkerSymbol, SimpleLineSymbol, Color, Query, Button, lang, on, arrayUtil, dom, SelectTemplate, graphicsUtils, GeometryService,AreasAndLengthsParameters, css,Extent, SpatialReference, SimpleFillSymbol, Units, webMercatorUtils, geodesicUtils, Polyline, Scalebar, json, esriConfig, Map, Graphic, Geometry) {
    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.selectQuery.geometry = geometry;

this.fieldsSelectionSymbol =
             new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([0,0,0]), 1),
new Color([0,0,0,0.5]));

            var 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";  
    var infoTemplate = new InfoTemplate("${grid_code}", content);  

    this.map.on("load", function () {
        var tb = new Draw(map);
        tb.on("selection-complete", lang.hitch(map, getAreaAndLength));

    var geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
    geometryService.on("selection-complete", outputAreaAndLength);

    function getAreaAndLength(event) {
        var map = this,
            geometry = event.geometry;

        var graphic = map.graphics.add(new Graphic(geometry, new SimpleFillSymbol()));
        var geom = webMercatorUtils.webMercatorToGeographic(geometry);
        var areas = geodesicUtils.geodesicAreas([geom], Units.ACRES);
        var polyline = new Polyline(geom.spatialReference);
        polyline.paths = geom.rings;
        var lengths = geodesicUtils.geodesicLengths([polyline], Units.FEET);
        dom.byId("area").innerHTML = areas[0].toFixed(3) + " acres";
        dom.byId("length").innerHTML = lengths[0].toFixed(3) + " feet";

        //setup the parameters for the areas and lengths operation
        var areasAndLengthParams = new AreasAndLengthsParameters();
        areasAndLengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_FOOT;
        areasAndLengthParams.areaUnit = esri.tasks.GeometryService.UNIT_ACRES;
        geometryService.simplify([geometry], function (simplifiedGeometries) {
            areasAndLengthParams.polygons = simplifiedGeometries;

    function outputAreaAndLength(event) {
        var result = event.result;
        dom.byId("area").innerHTML += "<br/>Server: " + result.areas[0].toFixed(3) + " acres";
        dom.byId("length").innerHTML += "<br/>Server: " + result.lengths[0].toFixed(3) + " feet";

            var infoTemplate = new InfoTemplate(this.title, content);

            this.featureLayer = new FeatureLayer(this.featureLayerURL,
                mode: FeatureLayer.MODE_SELECTION,

                infoTemplate: infoTemplate,
                outFields: ["*"]


            this.featureLayer.on("selection-complete", lang.hitch(this, 'avgGasProduction'));
            var clearMsg = this.clearSelectMsg;
            this.featureLayer.on("selection-clear", function () {
                dom.byId('messages').innerHTML = "<i>" + clearMsg + "</i>";



        select: function () {
        clearSelection: function () {

          avgGasProduction: function (event) {
            var productionSum = 0, productionAvg = 0;
            var sumField = this.fieldToSum;

            arrayUtil.forEach(event.features, function (feature) {
                productionSum += feature.attributes[sumField];

            if (event.features && event.features.length > 0) {
                productionAvg = Math.round(productionSum / event.features.length)

              dom.byId('messages').innerHTML = "<b>" + this.selectSumMsgPrefix + " " + productionAvg + " " + this.selectSumUnits + ". </b>";

          this.map.infoWindow.setTitle("Average Solar Potential")  
                  this.map.infoWindow.setContent("<b>Selected Area Potential: " + productionAvg + " KWh/(m^2). </b>");  
                  var gExt = graphicsUtils.graphicsExtent(event.features);  
             dom.byId("area").innerHTML = areas[0].toFixed(3) + " acres";


  • " I am missing something" is not enough information to solicit help. Please reword your question and identify what is not working.
    – tmcgee
    Jan 19, 2015 at 20:12

1 Answer 1


You haven't identified where in the code the error is occurring. I am only guessing it has something to do with the polyline since this line in the code does not appear to be correct:

var polyline = new Polyline(geom.spatialReference);

Perhaps it should be something like this instead?

var polyline = new Polyline(geom);

Additional thoughts based on new comment:

Th avgGasProduction method does not know anything about the area variable because is not in scope within that method. You should move that line to getAreaAndLength method because that area variable is local to that method.

Yet another additional thought based on yet another new comment:

var tb = new Draw(map);
tb.on("selection-complete", lang.hitch(map, getAreaAndLength));

The draw toolbar does not have a selection-complete event so your getAreaAndLength method will never be called. That's the first problem.

I pointed out one other possible issue with this method already. Looking through the code, there may be other issues as well as you move along. I recommend debugging the code by stepping through the lines in Chome's dev tools to troubleshoot further.

  • I believe I the error is coming from here: dom.byId("area").innerHTML = areas[0].toFixed(3) + " acres"; (this is the last line of code)
    – Fiter
    Jan 20, 2015 at 16:52
  • I agree that it should not be there. I had it in the getAreaAndLength method but it did not "talk" to the draw function. This is the part I cannot seem to get working.
    – Fiter
    Jan 20, 2015 at 17:29
  • you also have two draw toolbars in the code.
    – tmcgee
    Jan 20, 2015 at 18:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.