topic How to trigger a click event within search widget? in ArcGIS JavaScript Maps SDK Questions

How to trigger a click event within search widget?

YiqunChen — Mon, 07 Sep 2020 22:54:35 GMT

Hi,

I wrote a function before which is to check whether a point where a user clicks intersects with a layer, like:

view.on("click", function(event)
{
   ... //my handling of the event inside
 queryEarthquakeLayer(event).then(function(y)
 ...
}
I recently added a search widget so that a user can type in the coordinates/address. How to mimic a mouse
click event inside the function handling the returned results from search:
search.on('search-complete', function(result){
 ...
 //how to trigger a click event here so that I can use my previous function directly by just 
 //feeding the click event?
}

I found this in our community but it doesn't work:

map.emit('click', {mapPoint: new esri.geometry.Point(myLong,myLat, esri.SpatialReference({wkid:102100}))

Any idea? Thank you!

Re: How to trigger a click event within search widget?

RobertScheitlin__GISP — Sun, 12 Dec 2021 04:00:54 GMT

search.on('search-complete', function(result){
  map.emit('click', {mapPoint: results[0].results[0].feature.geometry});
});‍‍‍

Re: How to trigger a click event within search widget?

YiqunChen — Tue, 08 Sep 2020 18:00:07 GMT

Hi Robert, thanks for your reply! I tried it but it doesn't work. I just show you a simple version with your suggestion. How to catch the click event from the map layer? Could you take a look at the sample code here? I cannot get that event if I use view.on().

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS API for JavaScript Tutorials: Create a JavaScript starter app</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
</head>
<body>
    <div id="viewDiv"></div>
</body>
</html>

    var view = new MapView({
        container: "viewDiv",
          center: [-168, 30],
          zoom: 3,
          map: map
    });

    var search = new Search({
            view: view
    });
    view.ui.add(search, "top-right");

    // search.on('search-complete', function(result){
    //     map.emit('click', {mapPoint: results[0].results[0].feature.geometry});
    // });

    search.on('search-complete', function(result)
    {
        map.emit('click', {mapPoint: result.results[0].results[0].feature.geometry});
        view.on("click", function(event)
        {
            console.log(event.mapPoint);
        });
    });

});
</script>

Re: How to trigger a click event within search widget?

RobertScheitlin__GISP — Tue, 08 Sep 2020 19:14:43 GMT

Yiqun,

A couple of things about your code does not make sense. You are adding the event listener "view on click" inside the listener for search complete so this would not take affect until you do your second search.

Why are you wanting to emit a view click event? What is your goal?

Also you had in your code map.emit("click". I forgot to change that to view.emit("click"

Re: How to trigger a click event within search widget?

YiqunChen — Tue, 08 Sep 2020 23:42:36 GMT

Hi Robert,

I did change it to view.emit() before I replied to you. You are right that I didn't realize that I added the event listener "view on click" inside the listener for search complete.

I wrote some functions before to listen to user click (view.on("onlick", ...)) on the map so that I can double check whether the clicked point on the map intersects some graphics in another feature layer. Later my user (actually my colleague) wants to check whether an address/latlon intersects with that layer by typing coordinates. So I added the search widget and want to call my previous view.on("click",...) without any modifications. This is why I just want to mimic a kind of mouse click when the search is complete. Any better idea?

Thanks!

Re: How to trigger a click event within search widget?

RobertScheitlin__GISP — Sun, 12 Dec 2021 04:00:57 GMT

The better route would be to have a function that is called from the view on click.

      view.on("click", clickListener);

      function clickListener(evt){
        let pnt = evt.mapPoint;
        // the rest of your on click code
      }

...

      search.on('search-complete', function (result) {
        const mp = result.results[0].results[0].feature.geometry;
        clickListener({mapPoint: mp});
      });‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to trigger a click event within search widget?

YiqunChen — Wed, 09 Sep 2020 16:18:43 GMT

great, thank you!

Re: How to trigger a click event within search widget?

anuragmittal — Tue, 29 Dec 2020 19:03:03 GMT

Hi Robert,

I am trying to do the same to emit click event on search-complete event of search widget. I am using JS 4.16 API. But its not working for me. I am not getting an error.

search.on('search-complete', function(event){ let lat, longt; if(event.results[0].results[0].feature.geometry.type == 'point') { lat = event.results[0].results[0].feature.geometry.latitude; longt = event.results[0].results[0].feature.geometry.longitude; } else if(event.results[0].results[0].feature.geometry.type == 'polygon') { lat = event.results[0].results[0].feature.geometry.centroid.latitude; longt = event.results[0].results[0].feature.geometry.centroid.longitude; } let pointVar = new Point({ latitude:lat, longitude:longt }); var scrPt = view.toScreen(pointVar); view.emit("click", {bubbles: true, cancelable: true,mapPoint: pointVar,screenPoint: scrPt}); });