topic Re: How to customize Search Widget to show feature pop-up? in ArcGIS Web AppBuilder Questions

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

Anonymous User — Fri, 01 Sep 2017 13:00:56 GMT

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!

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

RobertScheitlin__GISP — Fri, 01 Sep 2017 13:22:18 GMT

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.

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

Anonymous User — Fri, 01 Sep 2017 13:24:54 GMT

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

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

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:35:38 GMT

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

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

Anonymous User — Fri, 01 Sep 2017 14:53:42 GMT

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

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

RobertScheitlin__GISP — Fri, 01 Sep 2017 15:17:05 GMT

Nope wrong function. It's _onSelectResult

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

Anonymous User — Fri, 01 Sep 2017 15:30:57 GMT

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?

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

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:35:41 GMT

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

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

Anonymous User — Fri, 01 Sep 2017 15:53:43 GMT

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

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

RobertScheitlin__GISP — Fri, 01 Sep 2017 16:03:15 GMT

Andrew,

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

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

RobertScheitlin__GISP — Fri, 01 Sep 2017 16:19:59 GMT

Sorry didn't mean that to sound rude.

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

Anonymous User — Mon, 04 Sep 2017 15:27:08 GMT

No you're totally right -- was being a little sloppy

So the three changes I should make are:

Change the Search widget config file to showInfoWidgetOnSelect to 'false'
Append the first code sample to the _onSelectResult in the widget.js file
1. Should be around line ~744
Append the second code sample to the _onSearchResults in the widget.js file
1. Should be around line ~628

ArcGIS Web Application seems to still be throwing the error.

If you're cool inspecting my widget.js file, I have it attached here (hopefully that works!). Thanks for all the help!

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

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:35:43 GMT

Andrew,

So you just need some error checking in the _onSearchResults: function(evt) {

        if (results && evt.numResults > 0) {
          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 });
        }‍‍‍‍‍‍‍‍‍‍

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

Anonymous User — Sat, 11 Dec 2021 23:35:46 GMT

Hmmmm, still getting the same error: ArcGIS Web Application

      _onSearchResults: function(evt) {
        var sources = this.searchDijit.get('sources');
        var activeSourceIndex = this.searchDijit.get('activeSourceIndex');
        var value = this.searchDijit.get('value');
        var htmlContent = "";
        var results = evt.results;
        var _activeSourceNumber = null;
        if (results && evt.numResults > 0) {
          html.removeClass(this.searchDijit.containerNode, 'showSuggestions');

          this.searchResults = results;
          htmlContent += '<div class="show-all-results jimu-ellipsis" title="' +
            this.nls.showAll + '">' +
            this.nls.showAllResults + '<strong >' + value + '</strong></div>';
          htmlContent += '<div class="searchMenu" role="menu">';
          for (var i in results) {
            if (results[i] && results[i].length) {
              var name = sources[parseInt(i, 10)].name;
              if (sources.length > 1 && activeSourceIndex === 'all') {
                htmlContent += '<div title="' + name + '" class="menuHeader">' + name + '</div>';
              }
              htmlContent += "<ul>";
              var partialMatch = value;
              var r = new RegExp("(" + partialMatch + ")", "gi");
              var maxResults = sources[i].maxResults;

              for (var j = 0, len = results[i].length; j < len && j < maxResults; j++) {
                var text = esriLang.isDefined(results[i][j].name) ?
                  results[i][j].name : this.nls.untitled;

                htmlContent += '<li title="' + text + '" data-index="' + j +
                  '" data-source-index="' + i + '" role="menuitem" tabindex="0">' +
                  text.toString().replace(r, "<strong >$1</strong>") + '</li>';
              }
              htmlContent += '</url>';

              if (evt.numResults === 1) {
                _activeSourceNumber = i;
              }
            }
          }
          htmlContent += "</div>";
          this.searchResultsNode.innerHTML = htmlContent;

          this._showResultMenu();

          this._resetSelectorPosition('.searchMenu');
        } else {
          this._onClearSearch();
        }
        // publish search results to other widgets
        this.publishData({
          'searchResults': evt
        });
        if (results && evt.numResults > 0) {
          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 });
        }
      }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Still getting this error:

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

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:35:49 GMT

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

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

Anonymous User — Tue, 05 Sep 2017 16:19:18 GMT

Huzzah! We have it sort-of working even better.

ArcGIS Web Application

When invoking the search widget, it now will go to the location and display the default pop-up, but if you click the search icon again, it will execute properly. Any ideas on that one?

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

RobertScheitlin__GISP — Sun, 12 Dec 2021 16:36:31 GMT

Andrew,

Your app still has:

"showInfoWindowOnSelect": true,
When it is suppose to be false.

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

Anonymous User — Tue, 05 Sep 2017 17:09:34 GMT

Does that exist somewhere else besides the app's config.json that should be edited? I have that set to false in

D:\applications\VirtChar\VirtChar\InDevelopment\Beta\widgets\Search\config.json

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

RobertScheitlin__GISP — Tue, 05 Sep 2017 17:21:04 GMT

Andrew,

Yes, the D:\applications\VirtChar\VirtChar\InDevelopment\Beta\widgets\Search\config.json is only used if you di not make any settings changes to a widget. Once you have made a settings change then the json that is used will be in the apps configs folder D:\applications\VirtChar\VirtChar\InDevelopment\Beta\configs\search\search_config.json.

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

Anonymous User — Tue, 23 Oct 2018 17:51:21 GMT

Greetings Robert Scheitlin, GISP ... Your method from a corresponding thread works perfectly.Modify Search Widget to use Popup from Web Map -> pops up the result, after clicking the second time, on the actual Result. Here is my example: SAGIS Property Map Viewer

It would be complete, if it can trigger the popup in one click, upon a user clicking the Suggestion's result item. (In addition to clicking the final result like the first thread).

So, next I modified the widget as you describe in the thread here. Works perfect. SAGIS Property Map Viewer

Sort of. I realized an issue.

I was like, hey, cool, works. Then I noticed it wasn't the right parcel in the popup. It was the popup from a few blocks away! It highlights the other parcel far away as well. I think I know the why. Just not the 'how' to fix. So, I have the parcel layer in my web map twice. One parcel layer, is the regular parcel layer where the lines are green. It turns off at the Streets level of detail. I then cut over to the parcel layer where the symbology is transparent at Streets scale and above. Thus, it will give a popup but not obscure the county in parcel symbology when out at a broad scale. I thought this was nice, kind of mirroring how when you click Google Maps it identifies by default. I hid the transparent layer in my Layer List fyi. Now, this second transparent parcel layer is what your code in this thread hits. I noticed this, because initially it was giving 1,000 results each time. Of course. Because it fires at broad county scale, loads the popup, then and only then, it zooms. Therefore, I went to the service and ratched the Max Records count down to 1. So, it works, in that now it only returns one record's popup, except it clicks the wrong parcel.

Also, I noticed it does in fact work and selects the right parcel if it's already zoomed down to block level. But not when zoomed out, which I believe, is due to this odd sequencing of events in the widget logic.

For example I test "1 E Bay St" when still at the full home extent of the county. It displays the popup for 5 W Broughton St. In F12, mpPt and scrPt were -9027017.497, 3773899.188 and 682, 207 respectively. mpPt has the correct wkid 102100.

I looked around to see if there was some sort of pixel or map unit tolerance to ratchet down to as close to zero as possible but didn't see anything. Nor could I see why the sequence of events was kind of odd. I would have thought the widget would want to fire the popup only after zooming in, but apparently it doesn't, and I couldn't see how I could make it do that in that order.

Thoughts? Would you advise continuing to look for a tolerance setting? Or perhaps make your modification here triggered only after zoom-to?

Also, I tried putting in _zoomToScale and others, no effect, in fact even an alert('test') didn't trigger in that func. Also I noticed sometimes this stops working, with both methods. After searching a few addresses, clicking and panning around a bit, sometimes it won't display the popup just the little black graphic point.

webmap: https://sagis.maps.arcgis.com/home/webmap/viewer.html?webmap=320d9ad1de214afba0d378ff659a8558

Locators: Folder: Locators