topic Selecting Point features within a buffered geomtries using gecoder widget in ArcGIS JavaScript Maps SDK Questions

Selecting Point features within a buffered geomtries using gecoder widget

GaneshSolai_Sambandam — Tue, 17 Sep 2013 19:57:23 GMT

HI GiS folks,
Can anyone answer to problem with my code below. I am using Geocode widget to find locations around the world. Once I found the POI, then used the Buffer parameters to buffer around the POI. Up until here the code below work fine, when I further want to use buffered POI or region to query against my custom FeatureLayer service, to find out only points that fall within my buffered areas within distances, it can't identify the features that fall inside the buffered area. can anyone look into to this please to boost my energy levels.

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



        }

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

        // gsvc = new GeometryService("http://sampleserver1.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);
            //gsvc.buffer(bufferParameters);

        }

     /*    gsvc.on("buffer-complete", function(result) {

        var symbol = new SimpleFillSymbol(
            SimpleFillSymbol.STYLE_NULL,
            new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
              new Color([105, 105, 105]),
              2
            ), new Color([255, 255, 0, 0.25])
          );
        var bufferGeometry = result.geometries[0]
        var graphic = new Graphic(bufferGeometry, symbol);
        map.graphics.add(graphic);

        //Select features within the buffered polygon. To do so we'll create a query to use the buffer graphic
        //as the selection geometry.
        var mySBIquery = new Query();
        mySBIquery.geometry = bufferGeometry;
        flSBI.selectFeatures(mySBIquery, FeatureLayer.SELECTION_NEW);

    });*/

        // 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,
           mode: FeatureLayer.MODE_SNAPSHOT,
           outFields: ["BankName", "BankAddres", "Manager", "Time"],
           infoTemplate: infoSBITemplate
       });
     // flSBI.setSelectionSymbol(rsymbol);
       map.addLayer(flSBI);

       var mySBIQueryTask = new QueryTask(flSBIUrl);
       var mySBIQuery = new Query();
       mySBIQuery.returnGeometry = true;
       mySBIQuery.outFields = ["*"];


        // buffer - navigator point location

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

           mySBIQuery.geometry = graphic.geometry;
           mySBIQuery.spatialRelationship = esri.tasks.Query.SPATIAL_REL_WITHIN;
           mySBIQueryTask.execute(mySBIQuery);

         /* var mySBIQuery = new Query();
           mySBIQuery.geometry = geometries.geometries[0];
           flSBI.selectFeatures(mySBIQuery, FeatureLayer.SELECTION_NEW);*/



       }




       dojo.connect(mySBIQueryTask, "onComplete", function (fset) {

           alert("Finally Reached!!!");
           var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new

   esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.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(symbol);
               pt_graphic.setInfoTemplate(infoTemplate);
               map.graphics.add(pt_graphic);
           }
       });





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

});

Re: Selecting Point features within a buffered geomtries using gecoder widget

GaneshSolai_Sambandam — Wed, 18 Sep 2013 19:14:36 GMT

HI Guys,
Can you anyone help me with my more refined code. I am struggling to find why code isn't working. Any help would be much appreciated.

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,
                //   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"];
            mySBIQuery.outSpatialReference = { wkid: 102100 };

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

        }


    });
});