Modify Search Widget to use Popup from Web Map

2433
2
Jump to solution
08-28-2018 07:45 AM
TracyGarrison1
New Contributor II

Need to modify Search Widget to use popup from Web Map.

Background:

I am working on an application using WAB The web map used in this application has a feature layer with 3 Polygons. Menard SMART service Area, Sangamon SMART service Area and SMTD service area. The Information Lookup template is close but not quite what I need.  I realize I need to modify the Search widget to add a click at the location of the "found" address. I searched GeoNET and found a couple similar questions with Answers. The newest answer I found was located here:  which is providing the needed functionality but there are a few quirks.

1) For some reason addresses located within a half mile of the polygon boundary is returning two choices for the popup instead of only 1 when zoomed to out to limits of web map. 

2) After performing one search if you x out of the search and type another address to search, the popup won't be displayed. This also happens anytime you are zoomed in even after you first start the application. Zoom in to like neighborhood area somewhere and perform a search anywhere. The point will plot but the pop up won't display.

3) Probably related to number 2 above. Using developer tools in chrome, Refresh app to start it new. Type in address: 11998 Catholic Cemetery Rd, Glenarm, Illinois clear popup then click on "show search results for 11998..." and the click on the address that shows up under the Search tool. You will see error exceptions.

My test application is called SMART Service Test App and can be accessed  by following that link.


Addresses to try:

119 Rhodes Ave Glenarm, Illinois (shows popup without any additions, correct)
11998 Catholic Cemetery Rd, Glenarm, Illinois (shows popup with '1 of 2', incorrect)

It seems that if the address is a little farther than half a mile from another polygon it works. But if the address plots within a half mile it always has (1 of 2) in the popup with the wrong result being the 2nd one).  It as if the click is utilizing a buffer of half a mile.

I attached screenshots of examples and the screenshot of the error.

I modified the Search  Widget.js file as follows

_onSearchResults:  (added the following to end of onSearchResult function):


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

----------------------------------------------


_onSelectResult:  (added the following to end of onSelectResult function):


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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Tracy,

   Remove the code from the _onSearchResults portion (that part was really not need) and change the _onSelectResult to this:

        setTimeout(lang.hitch(this, function(){
          // added by me
                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 });
          // end of added by me
        }), 1000);

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Emeritus

Tracy,

   Remove the code from the _onSearchResults portion (that part was really not need) and change the _onSelectResult to this:

        setTimeout(lang.hitch(this, function(){
          // added by me
                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 });
          // end of added by me
        }), 1000);
TracyGarrison1
New Contributor II

Perfect!  That did it.  So, I was getting two answers because I had that the code in the onSearch function as well?   The error I was getting had something to do with a timeout issue?

Thank you for the help!