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

[BehrouzHosseini]

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

  });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[Jean-MarcRoy1]

Hi @Bengi Geoca,

You can use GeometryEngine and more specifically the nearestCoordinate method to find the closest point of a Multipoint geometry.

Here is an example with the latest JS API 4.4 : Arcgis JS API 4.4 : nearest point - JSFiddle .

You can take inspiration from this code it would be very similar with 3.x version.

Hope it helps!

[RichardReinicke · Accepted solution]

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