Web-app - Draw polygon, Select, and Geo-process

RickeyFight · ‎01-07-2015

Is there any way to draw a rectangle on a map, select all the points within the rectangle and then find the average of the values?

I want the user to be able to "design" their own solar panel and get a verdict if the location is good or not.

I know that I can buffer pixels around a selected point but I would rather be able to draw my own area.

I am not sure where to start? Any ideas would be helpful!

Thanks!

I have found this template:

Layer in a map service - [ON-DEMAND]

If I go with this one, is there a way to have sum (or average) display in a popup not at the bottom of the screen?

RobertScheitlin__GISP · ‎01-07-2015

Ricky,

Here is the template you found modified to have the sum in the maps info window.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
  on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Layer in a map service - [ON-DEMAND]</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css" />

  <script src="http://js.arcgis.com/3.12/"></script>
  <script>
    var map;

    require([
      "esri/InfoTemplate",
      "esri/map",
      "esri/layers/FeatureLayer",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/tasks/query",
      "esri/toolbars/draw",
      "esri/graphicsUtils",
      "dojo/dom",
      "dojo/on",
      "dojo/parser",
      "dojo/_base/array",
      "esri/Color",
      "dijit/form/Button",
      "dojo/domReady!"
    ],
      function (
        InfoTemplate, Map, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol,
        Query, Draw, graphicsUtils, dom, on, parser, arrayUtil, Color
      ) {

        parser.parse();

        var selectionToolbar, featureLayer;

        map = new Map("map", {
          basemap: "streets",
          center: [-97.395, 37.537],
          zoom: 11
        });

        map.on("load", initSelectToolbar);

        var fieldsSelectionSymbol =
          new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
          new Color([255, 0, 0]), 2), new Color([255, 255, 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("${FIELD_NAME}", content);

        featureLayer = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",
          {
            mode: FeatureLayer.MODE_ONDEMAND,
            infoTemplate: infoTemplate,
            outFields: ["*"]
          });

        featureLayer.setDefinitionExpression("PROD_GAS='Yes'");
        featureLayer.setSelectionSymbol(fieldsSelectionSymbol);
        featureLayer.on("selection-complete", sumGasProduction);
        featureLayer.on("selection-clear", function () {
          map.infoWindow.hide();
        });
        map.addLayer(featureLayer);

        on(dom.byId("selectFieldsButton"), "click", function () {
          selectionToolbar.activate(Draw.EXTENT);
        });

        on(dom.byId("clearSelectionButton"), "click", function () {
          featureLayer.clearSelection();
        });

        function initSelectToolbar (event) {
          selectionToolbar = new Draw(event.map);
          var selectQuery = new Query();

          on(selectionToolbar, "DrawEnd", function (geometry) {
            selectionToolbar.deactivate();
            selectQuery.geometry = geometry;
            featureLayer.selectFeatures(selectQuery,
              FeatureLayer.SELECTION_NEW);
          });
        }

        function sumGasProduction (event) {
          var productionSum = 0;
          //summarize the cumulative gas production to display
          arrayUtil.forEach(event.features, function (feature) {
            productionSum += feature.attributes.CUMM_GAS;
          });
          //dom.byId('messages').innerHTML = "<b>Selected Fields Production: " +
                                            //productionSum + " mcf. </b>";
          map.infoWindow.setTitle("Cumulative Gas Production")
          map.infoWindow.setContent("<b>Selected Fields Production: " + productionSum + " mcf. </b>");
          var gExt = graphicsUtils.graphicsExtent(event.features);
          map.infoWindow.show(gExt.getCenter());
        }
      });
  </script>
</head>

<body class="claro">
  <button id="selectFieldsButton" data-dojo-type="dijit/form/Button">Select Fields</button>
  <button id="clearSelectionButton" data-dojo-type="dijit/form/Button">Clear Selection</button><br>
  <div id="map" style="position: relative; width:700px; height:500px; border:1px solid #000;"></div>
  <!--<span id="messages"></span>-->
</body>

</html>

View solution in original post

RobertScheitlin__GISP · ‎01-07-2015

Ricky,

Here is the template you found modified to have the sum in the maps info window.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
  on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Layer in a map service - [ON-DEMAND]</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css" />

  <script src="http://js.arcgis.com/3.12/"></script>
  <script>
    var map;

    require([
      "esri/InfoTemplate",
      "esri/map",
      "esri/layers/FeatureLayer",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/tasks/query",
      "esri/toolbars/draw",
      "esri/graphicsUtils",
      "dojo/dom",
      "dojo/on",
      "dojo/parser",
      "dojo/_base/array",
      "esri/Color",
      "dijit/form/Button",
      "dojo/domReady!"
    ],
      function (
        InfoTemplate, Map, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol,
        Query, Draw, graphicsUtils, dom, on, parser, arrayUtil, Color
      ) {

        parser.parse();

        var selectionToolbar, featureLayer;

        map = new Map("map", {
          basemap: "streets",
          center: [-97.395, 37.537],
          zoom: 11
        });

        map.on("load", initSelectToolbar);

        var fieldsSelectionSymbol =
          new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
          new Color([255, 0, 0]), 2), new Color([255, 255, 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("${FIELD_NAME}", content);

        featureLayer = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",
          {
            mode: FeatureLayer.MODE_ONDEMAND,
            infoTemplate: infoTemplate,
            outFields: ["*"]
          });

        featureLayer.setDefinitionExpression("PROD_GAS='Yes'");
        featureLayer.setSelectionSymbol(fieldsSelectionSymbol);
        featureLayer.on("selection-complete", sumGasProduction);
        featureLayer.on("selection-clear", function () {
          map.infoWindow.hide();
        });
        map.addLayer(featureLayer);

        on(dom.byId("selectFieldsButton"), "click", function () {
          selectionToolbar.activate(Draw.EXTENT);
        });

        on(dom.byId("clearSelectionButton"), "click", function () {
          featureLayer.clearSelection();
        });

        function initSelectToolbar (event) {
          selectionToolbar = new Draw(event.map);
          var selectQuery = new Query();

          on(selectionToolbar, "DrawEnd", function (geometry) {
            selectionToolbar.deactivate();
            selectQuery.geometry = geometry;
            featureLayer.selectFeatures(selectQuery,
              FeatureLayer.SELECTION_NEW);
          });
        }

        function sumGasProduction (event) {
          var productionSum = 0;
          //summarize the cumulative gas production to display
          arrayUtil.forEach(event.features, function (feature) {
            productionSum += feature.attributes.CUMM_GAS;
          });
          //dom.byId('messages').innerHTML = "<b>Selected Fields Production: " +
                                            //productionSum + " mcf. </b>";
          map.infoWindow.setTitle("Cumulative Gas Production")
          map.infoWindow.setContent("<b>Selected Fields Production: " + productionSum + " mcf. </b>");
          var gExt = graphicsUtils.graphicsExtent(event.features);
          map.infoWindow.show(gExt.getCenter());
        }
      });
  </script>
</head>

<body class="claro">
  <button id="selectFieldsButton" data-dojo-type="dijit/form/Button">Select Fields</button>
  <button id="clearSelectionButton" data-dojo-type="dijit/form/Button">Clear Selection</button><br>
  <div id="map" style="position: relative; width:700px; height:500px; border:1px solid #000;"></div>
  <!--<span id="messages"></span>-->
</body>

</html>

RickeyFight · ‎01-13-2015

Thank you for the help on the code!

Is it possible to find the average now?

I am using CMV - Configurable Map Viewer :

define([
'dojo/_base/declare',
'dijit/_WidgetBase',
'dijit/_TemplatedMixin',
'dijit/_WidgetsInTemplateMixin',
'esri/toolbars/draw',
'esri/InfoTemplate',
'esri/layers/FeatureLayer',
'esri/symbols/SimpleMarkerSymbol',
'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, SimpleMarkerSymbol, 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 SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]), 1),
new Color([0,255,0,0.25]));


   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>";
   }
   });
});

RickeyFight · ‎01-15-2015

Here is the answer to my second question.

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>";
}