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

4452
3
Jump to solution
01-07-2015 02:57 PM
RickeyFight
MVP Regular Contributor

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.

question.PNG

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?

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

3 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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

RickeyFight
MVP Regular Contributor

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

0 Kudos
RickeyFight
MVP Regular Contributor

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

}

0 Kudos