nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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



        }



    });
});

Find more posts tagged with

Accepted answers

All comments

GaneshSolai_Sambandam

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

Anonymous User

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

JasonZou

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

GaneshSolai_Sambandam

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.

GaneshSolai_Sambandam

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

       

    });
});

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.

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

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,
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

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,
I changed my code below, but, it doesn't help.

Regards
Ganesh

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,

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.