How to customize Search Widget to show feature pop-up?

[Anonymous User]

Hey Team!

What I'm trying to do is fairly straight forward (conceptually), but I'm unsure about how to put it into practice. 

If you go to a Web Map or App (ArcGIS Web Application) and use the Search Widget to find an address (2003 Union St), you'll get a pop-up that just identifies the location. I'm looking for the functionality of: a user searches for 2003 Union St (or whatever street) and the pop-up returned corresponds to the Parcel feature. 

Some of the concepts were touched here: Configure Popup for Search Results and here: Program search widget to pop up window from intersecting polygon layer , but there was no answer that addressed how to modify the Search Widget code to achieve this functionality. 

Any help is much appreciated!

[RobertScheitlin__GISP]

Andrew,

   If you add your parcel layer as a Featurelayer to the search widget then it will show the configured popup when using the search widget. If that does not work for you then I can show you the code changes to make to the seach widget.js _onSelectResult function to fire off a click event on your parcel layer based on the search result geometry centroid.

[Anonymous User]

Having the parcel as a feature layer would be a nice solution, but unfortunately the locator using a geocode service that is rebuilt every 24 hours and republished to have the most up-to-date data 

Modifying the source code is probably the only path forward barring some ETL rewrites

[RobertScheitlin__GISP]

Andrew,

   If you set the Search widgets config to 

"showInfoWindowOnSelect": false,‍

to ensure that the geocode popup does not show then you make this change to the _onSelectResult function.

Add this code to the bottom of the function:

        var mpPt;
        if(result.feature.geometry.type === "point"){
          mpPt = result.feature.geometry;
        }else{
          mpPt = result.feature.geometry.getExtent().getCenter();
        }
        var scrPt = this.map.toScreen(mpPt);
        this.map.emit("click", { bubbles: true, cancelable: true, mapPoint: mpPt ,screenPoint: scrPt });‍‍‍‍‍‍‍‍

[Anonymous User]

Thanks Robert! So I just plop this code into the widget.js around line 655 like so:

_onSelectSearchResult: function(evt) {
var target = evt.target;
while(!(html.hasAttr(target, 'data-source-index') && html.getAttr(target, 'data-index'))) {
target = target.parentNode;
}
var result = null;
var dataSourceIndex = html.getAttr(target, 'data-source-index');
var dataIndex = parseInt(html.getAttr(target, 'data-index'), 10);
// var sources = this.searchDijit.get('sources');

if (dataSourceIndex !== 'all') {
dataSourceIndex = parseInt(dataSourceIndex, 10);
}
if (this.searchResults && this.searchResults[dataSourceIndex] &&
this.searchResults[dataSourceIndex][dataIndex]) {
result = this.searchResults[dataSourceIndex][dataIndex];
this.searchDijit.select(result);
}
var mpPt;
if(result.feature.geometry.type === "point"){
mpPt = result.feature.geometry;
}else{
mpPt = result.feature.geometry.getExtent().getCenter();
}
var scrPt = this.map.toScreen(mpPt);
this.map.emit("click", { bubbles: true, cancelable: true, mapPoint: mpPt ,screenPoint: scrPt });
},

[RobertScheitlin__GISP]

Nope wrong function. It's _onSelectResult 

[Anonymous User]

Welp that's embarrassing haha

So it is ~half~ working.

The new site: ArcGIS Web Application 

The old site: ArcGIS Web Application 

In the new one, if you search for an address (2003 Union St) now if you click on the first result (sometimes double click?) it will load the proper pop-up. Is there a way to do this automatically? In other words, take out the step of 'clicking' the result and just have the widget return the first result in the pop-up? Does that make sense?

[RobertScheitlin__GISP]

Andrew,

   In that case you need to add this code to the end of the _onSearchResults function:

        var mpPt;
        if(results[0][0].feature.geometry.type === "point"){
          mpPt = results[0][0].feature.geometry;
        }else{
          mpPt = results[0][0].feature.geometry.getExtent().getCenter();
        }
        var scrPt = this.map.toScreen(mpPt);
        this.map.emit("click", { bubbles: true, cancelable: true, mapPoint: mpPt ,screenPoint: scrPt });‍‍‍‍‍‍‍‍

[Anonymous User]

Hmmm, it's not liking that -- I'm getting a console error of 'results is not defined' --> behavior can be seen here: ArcGIS Web Application 

[RobertScheitlin__GISP]

Andrew,

   You don't seem to be paying very close attention to the instructions given. The new code is for the _onSearchResults function.