List Existing Graphics Points Based On Closest Distance To a Click Event

Question

Can you please take a look at this Demo and code and let me know how I can get a list of point graphics based on the closest distance to the click event position? require([ "esri/map", "esri/SpatialReference", "esri/graphic", "esri/layers/GraphicsLayer", "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleFillSymbol", "dojo/domReady!" ], function( Map, SpatialReference, Graphic, GraphicsLayer, Point, SimpleMarkerSymbol, SimpleFillSymbol ) { var map = new Map("map", { basemap: "streets", center: [-122.4, 37.785], zoom: 14, }); var graphicsLayer = new GraphicsLayer(); var Symbol = new SimpleMarkerSymbol(); graphicsLayer.add(new Graphic(new Point(-122.4, 37.777, new SpatialReference({ wkid: 4326 })), Symbol)); graphicsLayer.add(new Graphic(new Point(-122.4, 37.785, new SpatialReference({ wkid: 4326 })), Symbol)); graphicsLayer.add(new Graphic(new Point(-122.39,37.785, new SpatialReference({ wkid: 4326 })), Symbol)); graphicsLayer.add(new Graphic(new Point(-122.41,37.785, new SpatialReference({ wkid: 4326 })), Symbol)); graphicsLayer.add(new Graphic(new Point(-122.4, 37.793, new SpatialReference({ wkid: 4326 })), Symbol)); map.addLayer(graphicsLayer); map.on("click", function(evt){ }); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RichardReinicke · Accepted Answer

Hi Bengi Geoca‌, the above mentioned answer should work fine. Just as an alternative if you don`t want to generate further web requests or you`re looking on a more client side solution then please have a look at this code: require([ "esri/map", "esri/SpatialReference", "esri/graphic", "esri/layers/GraphicsLayer", "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleFillSymbol", "esri/geometry/webMercatorUtils", "esri/geometry/geometryEngine", "dojo/domReady!" ], function( Map, SpatialReference, Graphic, GraphicsLayer, Point, SimpleMarkerSymbol, SimpleFillSymbol, WebMercatorUtils, GeometryEngine ) { var map = new Map("map", { basemap: "streets", center: [-122.4, 37.785], zoom: 14 }); map.on("click", function(evt) { var distances = []; var graphicsLayer = this.getLayer('graphicsLayer1'); var highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255,0,0])); for (var i = 0; i < graphicsLayer.graphics.length; i++) { distances.push({ index: i, distance: GeometryEngine.distance( evt.mapPoint, WebMercatorUtils.geographicToWebMercator(graphicsLayer.graphics[i].geometry), "meters") }); } var sortedDistances = distances.sort(function(a, b) { return a.distance - b.distance; }); graphicsLayer.graphics[sortedDistances[0].index].setSymbol(highlightSymbol); }); var graphicsLayer = new GraphicsLayer(); var Symbol = new SimpleMarkerSymbol(); graphicsLayer.add(new Graphic(new Point(-122.4, 37.777, new SpatialReference({ wkid: 4326 })), Symbol)); graphicsLayer.add(new Graphic(new Point(-122.4, 37.785, new SpatialReference({ wkid: 4326 })), Symbol)); graphicsLayer.add(new Graphic(new Point(-122.39,37.785, new SpatialReference({ wkid: 4326 })), Symbol)); graphicsLayer.add(new Graphic(new Point(-122.41,37.785, new SpatialReference({ wkid: 4326 })), Symbol)); graphicsLayer.add(new Graphic(new Point(-122.4, 37.793, new SpatialReference({ wkid: 4326 })), Symbol)); map.addLayer(graphicsLayer); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍