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

4753
23
Jump to solution
09-01-2017 06:00 AM
Occasional Contributor III

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!

1 Solution

Accepted Solutions
MVP Esteemed Contributor

Andrew,

   OK, I see that is your case the first result returned in the results is not zero all the time. Here is the updated code then for the _onSearchResults: function(evt) {

        if (results && evt.numResults > 0) {
          var mpPt;
          for (var i in results) {
            if(results[i][0].feature.geometry.type === "point"){
              mpPt = results[i][0].feature.geometry;
            }else{
              mpPt = results[i][0].feature.geometry.getExtent().getCenter();
            }
            var scrPt = this.map.toScreen(mpPt);
            this.map.emit("click", { bubbles: true, cancelable: true, mapPoint: mpPt ,screenPoint: scrPt });
            break;
          }
        }

View solution in original post

23 Replies
MVP Esteemed Contributor

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.

Reply
0 Kudos
Occasional Contributor III

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

Reply
0 Kudos
MVP Esteemed Contributor

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 });
Occasional Contributor III

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

Reply
0 Kudos
MVP Esteemed Contributor

Nope wrong function. It's _onSelectResult 

Reply
0 Kudos
Occasional Contributor III

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?

Reply
0 Kudos
MVP Esteemed Contributor

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 });
Reply
0 Kudos
Occasional Contributor III

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 

Reply
0 Kudos
MVP Esteemed Contributor

Andrew,

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

Reply
0 Kudos