Identify point features that fall within a buffer

[GaneshSolai_Sambandam]

HI GIS folks,
Can you help me to find out the problems in my code with respect selecting features that fall within a buffer distance. I am actually geocder widget to find location and used the geocoded point feature to buffer around that point to create a buffered polygon. Once done, I want query against my customer feature layer to identify my point feature layer that fall within my buffered polygon.
The code below works fine upto buffering a point features, but it cannot identify the points that fall within  a buffer.

Can any one Please........................help me.

var map;
var gPoint;
var gsvc;
var gGraphic;
var graphic;
var locator;
var currentLocation;
var watchLocation;
var myQueryTask;
var myQuery;

require(["dojo/ready", "dojo/on",
    "esri/map", "esri/config", "esri/dijit/Geocoder", "esri/geometry/screenUtils", "esri/geometry/Extent", "esri/geometry/Point", "esri/geometry/webMercatorUtils", "esri/tasks/locator", "esri/graphic", "esri/SpatialReference",
    "esri/layers/FeatureLayer", "esri/layers/KMLLayer", "esri/tasks/QueryTask", "esri/tasks/query", "esri/tasks/RelationParameters", "esri/tasks/GeometryService", "esri/tasks/BufferParameters",
    "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/PictureMarkerSymbol", "esri/symbols/Font", "esri/symbols/TextSymbol", "esri/InfoTemplate",

    "esri/dijit/BasemapGallery", "esri/arcgis/utils",
     "dojo/_base/array", "dojo/_base/Color",
    "dojo/number", "dojo/parser", "dojo/dom", "dojo/dom-construct", "dojo/query", "dijit/registry",
     "dijit/form/Button", "dijit/form/TextBox", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", "dijit/layout/TabContainer", "dijit/Menu", "dijit/TitlePane",
      "dojo/domReady!"


], function (ready, on, Map, esriConfig, Geocoder, screenUtils, Extent, Point, webMercatorUtils, Locator, Graphic, SpatialReference,
    FeatureLayer, KMLLayer, QueryTask, Query, RelationshipParameters, GeometryService, BufferParameters, SimpleMarkerSymbol, SimpleLineSymbol, PictureMarkerSymbol, Font, TextSymbol, InfoTemplate, BasemapGallery, arcgisUtils, arrayUtils, Color, number, parser, dom, domConstruct, query, registry) {
    ready(function () {

        parser.parse();

        esri.config.defaults.io.proxyUrl = "http://localhost:53303/proxy/proxy.ashx"; // for ASP.net application use this proxy.
        // esri.config.defaults.io.proxyUrl = "/proxy";

        //  esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
        esri.config.defaults.io.alwaysUseProxy = false;

        // var startExtent = new Extent(2264982.7047277316, 6425602.130388378, 1726864.6604362514, 8240522.929991121,
        //  new SpatialReference({ wkid: 102100 }));

        // var initialExtent = new Extent({ "xmin": -2550392, "ymin": 6093330, "xmax": 1852380, "ymax": 9028512, "spatialReference": { "wkid": 102100 } });
        var initialExtent = new Extent({ "xmin": -2335145.742961492, "ymin": 6433321.958737379, "xmax": 1656701.6222024914, "ymax": 8248242.758340122, "spatialReference": { "wkid": 102100 } });
        map = new Map("map",
            {
                extent: initialExtent,
                basemap: "osm",
                zoom: 3,
                sliderPosition: "top-right",
                sliderStyle: "small"
            });



        // Geocoder Widget

        var geocoder = new Geocoder({
            arcgisGeocoder: { Placeholder: "Find a place" },
            autoComplete: true,
            map: map
        }, dom.byId("Search"));

        geocoder.startup();

      //  map.on("load", enableSpotlight);


        geocoder.on("select", showFindLocation);
        geocoder.on("clear", removeSpotlight);


        function showFindLocation(evt) {

            map.graphics.clear();
            gPoint = evt.result.feature.geometry;
            var gSymbol = new SimpleMarkerSymbol();
            gSymbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE).setColor(new Color([255, 0, 0, 0.5]));
            gGraphic = new Graphic(gPoint, gSymbol);
            map.graphics.add(gGraphic);
            map.infoWindow.setTitle("Search Result");
            map.infoWindow.setContent(evt.result.name);
            map.infoWindow.show(evt.result.feature.geometry);


            var spotlight = map.on("extent-change", function (extentChange) {
                var geom = screenUtils.toScreenGeometry(map.extent, map.width, map.height, extentChange.extent);
                var width = geom.xmax - geom.xmin;
                var height = geom.ymin - geom.ymax;

                var max = height;
                if (width > height) {
                    max = width;
                }

                var margin = '-' + Math.floor(max / 2) + 'px 0 0 -' + Math.floor(max / 2) + 'px';

                query(".spotlight").addClass("spotlight-active").style({
                    width: max + "px",
                    height: max + "px",
                    margin: margin
                });
                spotlight.remove();
            });

        }


        function enableSpotlight() {
            var html = "<div id='spotlight' class='spotlight'></div>"
            domConstruct.place(html, dom.byId("map_container"), "first");
        }


        function removeSpotlight() {

            query(".spotlight").removeClass("spotlight-active");

            map.infoWindow.hide();

            map.graphics.clear();
        }


        // Buffer -Point features based geocoder widget location

        gsvc = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        on(dojo.byId("Buffer"), "click", buffer);

        function buffer() {
            map.graphics.clear();

            var bufferParameters = new BufferParameters();
            bufferParameters.distances = [dojo.byId("distance").value];
            // bufferParameters.distances = [1];
            bufferParameters.bufferSpatialReference = new SpatialReference({ wkid: 102100 });
            bufferParameters.outSpatialReference = map.spatialReference;
            bufferParameters.unit = GeometryService[dojo.byId("unit").value];

            bufferParameters.geometries = [gPoint];

          
            gsvc.buffer(bufferParameters, bufferDraw);
        }




        function bufferDraw(geometries) {
            var symbol = new esri.symbol.SimpleFillSymbol("none", new esri.symbol.SimpleLineSymbol("solid", new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));
            var graphic = new esri.Graphic(geometries[0], symbol);
            map.graphics.add(graphic);


            addSBILocations(graphic);

                       

           


        }

        function addSBILocations(Results) {


            // SBI Branch Locations - Feature Service created by Ganesh
            var infoSBITemplate = new InfoTemplate("SBI Bank Locations", "Bank Name: ${BankName}<br/>" + "Bank Address: ${BankAddres}<br/>" + "Manager Name: ${Manager}<br/>" + "Opening Time: ${Time}");

            var flSBIUrl = "http://services1.arcgis.com/rHig23wEINZ1MKYI/arcgis/rest/services/SBI_BankLocation/FeatureServer/0";

            var flSBI = new FeatureLayer(flSBIUrl, {
               mode: FeatureLayer.MODE_SELECTION,
                outFields: ["BankName", "BankAddres", "Manager", "Time"],
                infoTemplate: infoSBITemplate
            });
            var rsymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE).setColor(new Color([255, 0, 0, 0.5]));
            flSBI.setSelectionSymbol(rsymbol);
            map.addLayer(flSBI);

            var mySBIQueryTask = new QueryTask(flSBIUrl);
            var mySBIQuery = new Query();
            mySBIQuery.returnGeometry = true;
            mySBIQuery.outFields = ["BankName"];
            mySBIQuery.outSpatialReference = { wkid: 102100 };


        mySBIQuery.geometry = Results.geometry;
      flSBI.selectFeatures(mySBIQuery, FeatureLayer.SELECTION_NEW);

           

        }

          

    });
});

[JasonZou]

Try to change two places.

Change:

bufferParameters.distances = [dojo.byId("distance").value];

To:

bufferParameters.distances = [parseInt(dojo.byId("distance").value)];

Change:

mySBIQuery.outSpatialReference = { wkid: 102100 };

To:

mySBIQuery.outSpatialReference = new SpatialReference({ wkid: 102100 });

[GaneshSolai_Sambandam]

Hi zou,

Thank you very much for your response.
My code below works fine upto point where I want to buffer a point by 5 km or 10 km distances. But, the only problem is once I further want to identify the point features  from a custom feature layer service that fall within the buffered polygon, it doesn't identify the features within the buffer.

Can you please tell me, what would be the problem with code below.

thanks very much in advance zou.

[JasonZou]

Try to change:

var mySBIQueryTask = new QueryTask(flSBIUrl);
var mySBIQuery = new Query();
mySBIQuery.returnGeometry = true;
mySBIQuery.outFields = ["BankName"];
mySBIQuery.outSpatialReference = { wkid: 102100 };

To:

var mySBIQuery = new Query();
mySBIQuery.returnGeometry = true;

[GaneshSolai_Sambandam]

HI  Zou,
I changed my code below, but, it doesn't help.

Regards
Ganesh

[JasonZou]

Can you tell me which line does not work and what error message do you get?

To find out the error message, load your app in Chrome, and press CTRL-SHIFT-i to open the Developer Tools. Then go to Console tab. Run your app until hit the error. Then you should see the error on the Console tab.

[GaneshSolai_Sambandam]

HI Zou,
thank you very much for your help. When I load my app in Chrome, it does only select one features, not all within the buffer.

And, I am also getting the following error on the console tab. Can you tell me what would be the reason. Do I need to configure the proxy properly? Any idea or help would be greatly appreciated.


XMLHttpRequest cannot load http://tasks.arcgisonline.com/ArcGIS/rest/info?f=json. Origin http://localhost:53303 is not allowed by Access-Control-Allow-Origin.

thank you very much for your prompt reply. I was really going mad with this. Atleast, I have one of fellow GIS folks supporting me on this. Great, zou.

[JasonZou]

So you can buffer the geocoding result, but not the query result using the buffer polygon, right? After the buffer is drawn on the map, can you see if there is any point feature(s) from the query layer inside the buffer? If so, please provide me two things.

1.

mySBIQuery.geometry = Results.geometry;

The extent of Results.geometry. I mean the minx, miny, maxx, maxy and spatial reference. You can get the extent using Results.geometry.getExtent().

2. Change:

flSBI.selectFeatures(mySBIQuery, FeatureLayer.SELECTION_NEW);

To:

flSBI.selectFeatures(mySBIQuery, FeatureLayer.SELECTION_NEW, function(features) {
    if (features) {
       alert("Number of features selected: " + features.length);
    }
});

And tell me if you get anything returned in features from the query.

UPDATE:
I just noticed that you are using openstreetmap (osm) as your basemap. Since osm uses WGS1984 as its spatial reference, which is different than the web-mercator (102100), the issue may be caused by this. DO a quick test.

Change:

map = new Map("map", {
            extent: initialExtent,
            basemap: "osm",
            zoom: 3,
            sliderPosition: "top-right",
            sliderStyle: "small"
        });

To:

map = new Map("map", {
            extent: initialExtent,
            basemap: "streets",
            zoom: 3,
            sliderPosition: "top-right",
            sliderStyle: "small"
        });

And see if it works as expected.

[GaneshSolai_Sambandam]

Hi Zou,
I made the incorporation as per your suggestion below, but I get the Result.geometry.getExtent() in webMercator units, and on the feature selection length - it says, 2 features selected, that's exactly what I want (i.e only 2 features fall within the buffer). However, when it comes to plotting the selected graphic features it only maps one graphic feature on the map. I don't know what is going wrong.

[JasonZou]

Which basemap are you using? With the information provided, I can think of two cases.

Case 1:
The map projection is different than the feature layer projection. If so, two options.
1.1 Make the two projections the same. Either use different base map or change the map service that contains the feature layer to use the same projection as the base map and republish it.
1.2 Use featureLayer.queryFeatures to make the query. Then within the query callback function, reproject the found features to the map projection. Inside onProjectComplete, create graphics for each reprojected feature, and add them to the map.

Case 2:
The two found features are very close so that they look like the same spot from a small map scale. Zoom in the map enough to see the detail.