How to trigger a click event within search widget?

YiqunChen · ‎09-07-2020

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!

RobertScheitlin__GISP · ‎09-08-2020

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

YiqunChen · ‎09-08-2020

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>

RobertScheitlin__GISP · ‎09-08-2020

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"

YiqunChen · ‎09-08-2020

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!

RobertScheitlin__GISP · ‎09-09-2020

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

YiqunChen · ‎09-09-2020

great, thank you!

anuragmittal · ‎12-29-2020

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