Issues with buffering selected features/query task

RyanSellman · ‎10-15-2014

I am trying to give users the ability to select features from a specific feature layer, buffer that selection and query another feature layer using the geometries from the buffer. I want results from the first selection to be sent to one datagrid and results from the second query to be sent to a different datagrid. I think I am really close - the way I have it set up now is the user can draw a box to select features (points in this case). When the drawing ends, it select features within the drawn extent, performs a buffer at a set distance on those features, and uses the buffer extent to select features from a polygon layer. This all works just fine however, the issue I am having is with the two datagrids. For some reason, data from the first selection is being pushed to both datagrids.

Here is a bit of JS:

dojo.connect(map, "onLoad", function(map) {
    //initialize the toolbar
    toolBar2 = new esri.toolbars.Draw(map);
    dojo.connect(toolBar2, "onDrawEnd", onDrawEnd);
});


var featureLayerUrl = "http://summitmaps.summitoh.net/arcgis/rest/services/DOES_Mercator/MapServer/2";
featureLayer = new esri.layers.FeatureLayer(featureLayerUrl, {
    mode: esri.layers.FeatureLayer.MODE_SELECTION,
    outFields: ["UNAME", "INSTALLYR", "DNAME", "STREET", "EASEMENT", "INVERT", "OWNERSHIP"]
});
featureLayer.setSelectionSymbol(new esri.symbol.SimpleMarkerSymbol().setSize(8).setColor(new dojo.Color([160, 214, 238])));
map.addLayer(featureLayer);


function onDrawEnd(extent) {


    var newStore = new dojo.data.ItemFileReadStore({
        data: {
            identifier: "",
            items: []
        }
    });
    var grid = dijit.byId("manholeGrid");
    manholeGrid.setStore(newStore);


    toolBar2.deactivate();


    var query = new esri.tasks.Query();
    query.geometry = extent;
    featureLayer.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function(features, selectionMethod) {


        var items30 = dojo.map(features, function(feature) {
            return feature.attributes;
        });
        var data30 = {
            identifier: "OBJECTID",
            items: items30
        };
        var store30 = new dojo.data.ItemFileReadStore({
            data: data30
        });


        var manholeGrid = registry.byId("manholeGrid");


        manholeGrid.on("rowclick", onRowClickHandler);


        manholeGrid.setStore(store30);


        map.setExtent(graphicsUtils.graphicsExtent(featureLayer.getSelectedFeatures()), true);


        gsvc = new GeometryService("http://summitmaps.summitoh.net/arcgis/rest/services/Utilities/Geometry/GeometryServer");
        var graphics = featureLayer.graphics;
        var selectedGeoms = graphicsUtils.getGeometries(graphics);
        var params = new BufferParameters();
        params.geometries = selectedGeoms;


        params.distances = [500];
        params.unit = GeometryService.UNIT_FOOT;
        params.outSpatialReference = map.spatialReference;
        gsvc.buffer(params, showBuffer);


        function showBuffer(geometries) {


            var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                    new Color([0, 0, 255, 0.65]), 2
                ),
                new Color([0, 0, 255, 0.35])
            );


            arrayUtils.map(geometries, function(geometry) {
                var graphic = new Graphic(geometry, symbol);
                map.graphics.add(graphic);


            });


            queryTaskNew = new esri.tasks.QueryTask("http://summitmaps.summitoh.net/arcgis/rest/services/Cadastral/Parcels/MapServer/0");
            var queryNew = new esri.tasks.Query();
            queryNew.returnGeometry = true;
            queryNew.outFields = ["PARID", "ADDR"];


            queryNew.geometry = geometries[0];


            queryTaskNew.execute(queryNew, showResults300);


            function showResults300(featureSet) {


                var resultFeatures = featureSet.features;
                for (var i = 0, il = resultFeatures.length; i < il; i++) {


                    var items300 = dojo.map(features, function(feature) {
                        return feature.attributes;
                    });
                    var data300 = {
                        identifier: "OBJECTID",
                        items: items300
                    };
                    var store300 = new dojo.data.ItemFileReadStore({
                        data: data300
                    });


                    var grid = registry.byId("parcelGrid");


                    grid.on("rowclick", onRowClickHandler);


                    grid.setStore(store300);
                }
            }


        };
    });

And here is the HTML as it pertains to the above code:

<div data-dojo-type="dijit/layout/ContentPane" title="Manhole">
                    <input type="text" id="doesManholeText" value="BA15" />
                    <button id="doesManholeSearch" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button">Search</button>
                    <button data-dojo-type="dijit.form.Button" onClick="toolBar2.activate(esri.toolbars.Draw.EXTENT);">Select</button>
                    <button id="clearManholeGrid" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button">Clear</button>
                    <span id="manhole-result-count"></span>
                    <table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="manholeGrid" id="manholeGrid" style="height: 340px" data-dojo-props="rowsPerPage:'100', rowSelector:'20px'">
                        <thead>
                            <tr>
                                <th field="UNAME">UNAME</th>
                                <th field="INSTALLYR">Install Year</th>
                                <th field="DNAME">DNAME</th>
                                <th field="STREET">Street</th>
                                <th field="EASEMENT">Easement</th>
                                <th field="INVERT">Invert</th>
                                <th field="OWNERSHIP">Ownership</th>
                            </tr>
                        </thead>
                    </table>
                </div>

<div id="bottom" data-dojo-type="dojox/layout/ExpandoPane" title="Click the Arrow to Minimize this Panel" data-dojo-props="title: 'Parcel Search', splitter:true, startExpanded: false, region:'bottom'" style="height: 300px;">


    <div data-dojo-type="dijit/layout/ContentPane" title="Selected Parcels">


        <table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="parcelGrid" id="parcelGrid" style="height: 300px" data-dojo-props="rowsPerPage:'100', rowSelector:'20px'">
            <thead>
                <tr>
                    <th field="PARID">Parcel #</th>
                    <th field="ADDR">Address</th>
                </tr>
            </thead>
        </table>
    </div>


</div>

Can anyone see why I can't get results from the second query, in this case, "queryTaskNew" into the appropriate datagrid?

Any help is much appreciated!!

RyanSellman · ‎11-26-2015

Bharath,

Are you able to post your code?

Ryan

bharathreddy · ‎11-26-2015

Hi Ryan,

Here is my code.I'm able to get infotemplate but unable to get buffer AND SELECTED FEATURES

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>Select with feature layer</title>

<style>

html, body, #mapDiv {

padding: 0;

margin: 0;

height: 100%;

}

#messages{

background-color: #fff;

box-shadow: 0 0 5px #888;

font-size: 1.1em;

max-width: 15em;

padding: 0.5em;

position: absolute;

right: 20px;

top: 20px;

z-index: 40;

}

</style>

var map;

require([

"esri/map", "esri/layers/FeatureLayer","esri.layers.ArcGISDynamicMapServiceLayer",

"esri/tasks/query", "esri/geometry/Circle",

"esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",

"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",

"esri/config", "esri/Color", "dojo/dom", "dojo/domReady!"

], function (

Map, FeatureLayer,ArcGISDynamicMapServiceLayer,

Query, Circle,

Graphic, InfoTemplate, SimpleMarkerSymbol,

SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,

esriConfig, Color, dom

) {

// use a proxy page if a URL generated by this page is greater than 2000 characters

//

// this should not be needed as nearly all query & select functions are performed on the client

esriConfig.defaults.io.proxyUrl = "/proxy/";

map = new Map("mapDiv", {

// basemap: "streets",

// center: [-95.249, 38.954],

// zoom: 14,

// slider: false

});

var landBaseLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/line/MapServer", { opacity: 5.55 });

map.addLayer(landBaseLayer);

//add the census block points in on demand mode. Note that an info template has been defined so when

//selected features are clicked a popup window will appear displaying the content defined in the info template.

var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/line/FeatureServer/0", {

infoTemplate: new InfoTemplate("Block: ${CAP_ID }", "${*}"),

outFields: ["CAP_AIN", "CAP_LOCATION", "CAP_DT_ID", "CAP_SS_ID", "CAP_AMPS"]

});

// selection symbol used to draw the selected census block points within the buffer polygon

var symbol = new SimpleMarkerSymbol(

SimpleMarkerSymbol.STYLE_CIRCLE,

12,

new SimpleLineSymbol(

SimpleLineSymbol.STYLE_NULL,

new Color([247, 34, 101, 0.9]),

1

),

new Color([207, 34, 171, 0.5])

);

featureLayer.setSelectionSymbol(symbol);

//make unselected features invisible

var nullSymbol = new SimpleMarkerSymbol().setSize(0);

featureLayer.setRenderer(new SimpleRenderer(nullSymbol));

map.addLayer(featureLayer);

var circleSymb = new SimpleFillSymbol(

SimpleFillSymbol.STYLE_NULL,

new SimpleLineSymbol(

SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,

new Color([105, 105, 105]),

2

), new Color([255, 255, 0, 0.25])

);

var circle;

//when the map is clicked create a buffer around the click point of the specified distance.

map.on("click", function (evt){

//debugger;

circle = new Circle({

center: evt.mapPoint,

geodesic: true,

radius: 1,

radiusUnit: "esriMiles"

});

map.graphics.clear();

map.infoWindow.hide();

var graphic = new Graphic(circle, circleSymb);

map.graphics.add(graphic);

debugger;

var query = new Query();

query.geometry = circle.getExtent();

//use a fast bounding box query. will only go to the server if bounding box is outside of the visible map

featureLayer.queryFeatures(query, selectInBuffer);

alert("success");

});

function selectInBuffer(response) {

var feature;

var features = response.features;

var inBuffer = [];

//filter out features that are not actually in buffer, since we got all points in the buffer's bounding box

for (var i = 0; i < features.length; i++) {

feature = features;

if (circle.contains(feature.geometry)) {

inBuffer.push(feature.attributes[featureLayer.objectIdField]);

}

var query = new Query();

query.objectIds = inBuffer;

//use a fast objectIds selection query (should not need to go to the server)

featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (results) {

var totalPopulation = sumPopulation(results);

var r = "";

r = "<b>The total Census Block population within the buffer is <i>" + totalPopulation + "</i>.</b>";

dom.byId("messages").innerHTML = r;

});

}

function sumPopulation(features) {

var popTotal = 0;

for (var x = 0; x < features.length; x++) {

popTotal = popTotal + features.attributes["CAP_AIN"];

}

return popTotal;

}

});

</script>

</head>

<body>

<span id="messages">Click on the map to select census block points within 1 mile.</span>

</body>

</html>

RyanSellman · ‎11-27-2015

Bharath,

I adjusted just a few minor things. The code shown below should work. Also, I swapped out your service URLs with mine and got your code to work here:

Edit fiddle - JSFiddle

-Ryan

<!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>Select with feature layer</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
  <style>
  html,
  body,
  #mapDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  }

  #messages {
  background-color: #fff;
  box-shadow: 0 0 5px #888;
  font-size: 1.1em;
  max-width: 15em;
  padding: 0.5em;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 40;
  }
  </style>
  <script src="http://js.arcgis.com/3.14/"></script>
  <script>
  var map;
  require([
  "esri/map", "esri/layers/FeatureLayer", "esri/layers/ArcGISDynamicMapServiceLayer",
  "esri/tasks/query", "esri/geometry/Circle",
  "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
  "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
  "esri/config", "esri/Color", "dojo/dom", "dojo/domReady!"
  ], function(
  Map, FeatureLayer, ArcGISDynamicMapServiceLayer,
  Query, Circle,
  Graphic, InfoTemplate, SimpleMarkerSymbol,
  SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
  esriConfig, Color, dom
  ) {
  // use a proxy page if a URL generated by this page is greater than 2000 characters
  //
  // this should not be needed as nearly all query & select functions are performed on the client
  esriConfig.defaults.io.proxyUrl = "/proxy/";


  map = new Map("mapDiv", {
  basemap: "streets",
  center: [-95.249, 38.954],
  zoom: 14,
  slider: false
  });




  var landBaseLayer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/line/MapServer", {
  opacity: 5.55
  });
  map.addLayer(landBaseLayer);




  //add the census block points in on demand mode. Note that an info template has been defined so when
  //selected features are clicked a popup window will appear displaying the content defined in the info template.
  var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/line/FeatureServer/0", {
  infoTemplate: new InfoTemplate("Block: ${CAP_ID }", "${*}"),
  outFields: ["CAP_AIN", "CAP_LOCATION", "CAP_DT_ID", "CAP_SS_ID", "CAP_AMPS"]
  });




  // selection symbol used to draw the selected census block points within the buffer polygon
  var symbol = new SimpleMarkerSymbol(
  SimpleMarkerSymbol.STYLE_CIRCLE,
  12,
  new SimpleLineSymbol(
  SimpleLineSymbol.STYLE_NULL,
  new Color([247, 34, 101, 0.9]),
  1
  ),
  new Color([207, 34, 171, 0.5])
  );
  featureLayer.setSelectionSymbol(symbol);




  //make unselected features invisible
  var nullSymbol = new SimpleMarkerSymbol().setSize(0);
  featureLayer.setRenderer(new SimpleRenderer(nullSymbol));


  map.addLayer(featureLayer);


  var circleSymb = new SimpleFillSymbol(
  SimpleFillSymbol.STYLE_NULL,
  new SimpleLineSymbol(
  SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
  new Color([105, 105, 105]),
  2
  ), new Color([255, 255, 0, 0.25])
  );
  var circle;




  //when the map is clicked create a buffer around the click point of the specified distance.
  map.on("click", function(evt) {
  debugger;


  circle = new Circle({
  center: evt.mapPoint,
  geodesic: true,
  radius: 1,
  radiusUnit: "esriMiles"
  });


  map.graphics.clear();




  map.infoWindow.hide();
  var graphic = new Graphic(circle, circleSymb);
  map.graphics.add(graphic);
  debugger;
  var query = new Query();
  query.geometry = circle.getExtent();
  //use a fast bounding box query. will only go to the server if bounding box is outside of the visible map
  featureLayer.queryFeatures(query, selectInBuffer);

  });




  function selectInBuffer(response) {
  var feature;
  var features = response.features;
  var inBuffer = [];
  //filter out features that are not actually in buffer, since we got all points in the buffer's bounding box
  for (var i = 0; i < features.length; i++) {
  feature = features;
  if (circle.contains(feature.geometry)) {
  inBuffer.push(feature.attributes[featureLayer.objectIdField]);
  }
  }
  var query = new Query();
  query.objectIds = inBuffer;
  //use a fast objectIds selection query (should not need to go to the server)
  featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results) {
  var totalPopulation = sumPopulation(results);
  var r = "";
  r = "<b>The total Census Block population within the buffer is <i>" + totalPopulation + "</i>.</b>";
  dom.byId("messages").innerHTML = r;
  });

  }




  function sumPopulation(features) {
  var popTotal = 0;
  for (var x = 0; x < features.length; x++) {
  popTotal = popTotal + features.attributes["CAP_AIN"];
  }
  return popTotal;
  }
  });
  </script>
  </head>




  <body>
  <span id="messages">Click on the map to select census block points within 1 mile.</span>
  <div id="mapDiv"></div>
  </body>


</html>