Identify point features that fall within a buffer

GaneshSolai_Sambandam · ‎09-18-2013

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



        }



    });
});

GaneshSolai_Sambandam · ‎09-20-2013

Hi Zou,
I changed my code in different way, and finally I got the results I wanted, but the only problem is: below code only works in Google chrome and Firefox browser, but it doesn't work on IE. On IE, it only works upuntil buffering stage, and it doesn't select features within them. I am wondering what would be the reason when the same code work in chrome and firefox, why not in IE?
anyone any clue?

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

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: "streets",
                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]));
             graphic1 = new esri.Graphic(geometries[0], symbol);
            map.graphics.add(graphic1);


            addSBILocations(graphic1);

                        

            


        }


        var rsymbol = new esri.symbol.PictureMarkerSymbol({
            "angle": 0,
            "xoffset": 0,
            "yoffset": 10,
            "type": "esriPMS",
            "url": "http://static.arcgis.com/images/Symbols/Shapes/YellowPin1LargeB.png",
            "contentType": "image/png",
            "width": 24,
            "height": 24
        });

        function addSBILocations(Results) {


            // SBI Branch Locations - Feature Service created by Ganesh 
            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,
                mode: FeatureLayer.MODE_SNAPSHOT,
                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", "BankAddres", "Manager", "Time"];
        

         mySBIQuery.geometry = Results.geometry;
         mySBIQuery.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
          mySBIQueryTask.execute(mySBIQuery, addPoints);



        }

        function addPoints(fset) {
            map.graphics.clear();

            alert("Finally Reached!!!");
            var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([0, 255, 0, 0.25]));

            var resultFeatures = fset.features;
            for (var i = 0, il = resultFeatures.length; i < il; i++) {
                var pt_graphic = resultFeatures;
                pt_graphic.setSymbol(rsymbol);
                 pt_graphic.setInfoTemplate(infoSBITemplate);


              
                map.graphics.add(pt_graphic);

                
            }

            // var resultExtent = graphicsUtils.graphicsExtent(resultFeatures);
            var resultExtent = esri.graphicsExtent(resultFeatures);
            map.setExtent(resultExtent);
        }

       

    });
});

GaneshSolai_Sambandam · ‎09-21-2013

HI Zou,
Can you tell me how to get spatialreference of a featurelayer and point features on my app.

I tried various options on my map to get the spatialreference of a feature layer and pointfeature.

If you have got any syntax, can you send it across to me.

JasonZou · ‎09-21-2013

FeatureLayer.fullExtent.spatialReference, or
FeatureLayer.graphics -> graphic.geometry.spatialReference

Anonymous User · ‎10-05-2013

FeatureLayer.fullExtent.spatialReference, or
FeatureLayer.graphics -> graphic.geometry.spatialReference

Was the initial issue of not being able to perform an identify on the points within the buffer ever resolved? I'm having the same issue. Points are returned, properly symbolized, etc. But a click on the returned point/graphic does nothing. infoTemplate is set and even returns successfully in the debug. I'm stumped.

Thanks!

rGibson

GaneshSolai_Sambandam · ‎10-05-2013

Hi Gibson
My code is working fine, now. But, it works fine with Chrome and Firefox, but, it doesn't work on IE.

If you are interested, I can send the code.
But, I do have created loads of additional functionality - viewing all the data on dgrid and selecting the selecting the rows on
them, which allows me to go to the selected point features / extent.

please, let me know, if you need any help.

regards
ganesh