topic Re: Search Widget - Zoom to result is too close, is there a way to customize it? in ArcGIS Web AppBuilder Questions

Search Widget - Zoom to result is too close, is there a way to customize it?

WilsonLee — Fri, 22 Apr 2016 01:06:41 GMT

Hi All,

I have a search widget and it's using our own layer source (feature service, polygon). When I click the search result it will zoom to the selected polygon extent and the polygon occupied the whole map content screen. Can the search result not to zoom in too close? is there anyway to customize it?

thanks,

Wilson

Re: Search Widget - Zoom to result is too close, is there a way to customize it?

RobertScheitlin__GISP — Sat, 11 Dec 2021 06:52:50 GMT

Wilson,

Sure, if you add two lines to the search widgets Widget.js _onSelectResult function (lines 29 and 30):

_onSelectResult: function(e) {
        var result = e.result;
        if (!(result && result.name)) {
          return;
        }
        var dataSourceIndex = e.sourceIndex;
        var sourceResults = this.searchResults[dataSourceIndex];
        var dataIndex = 0;
        for (var i = 0, len = sourceResults.length; i < len; i++) {
          if (jimuUtils.isEqual(sourceResults, result)) {
            dataIndex = i;
            break;
          }
        }
        query('li', this.searchResultsNode)
          .forEach(lang.hitch(this, function(li) {
            html.removeClass(li, 'result-item-selected');
            var title = html.getAttr(li, 'title');
            var dIdx = html.getAttr(li, 'data-index');
            var dsIndex = html.getAttr(li, 'data-source-index');


            if (title === result.name &&
              dIdx === dataIndex.toString() &&
              dsIndex === dataSourceIndex.toString()) {
              html.addClass(li, 'result-item-selected');
            }
          }));
          var pt = result.feature.geometry.getCentroid();
          this.map.centerAndZoom(pt, 2); //Change this to suit your needs
      },

Re: Search Widget - Zoom to result is too close, is there a way to customize it?

WilsonLee — Fri, 22 Apr 2016 15:12:09 GMT

Hi Robert,

thank you : )

However, I couldn't find your exact codes in the Search/Widget.js

These are the closet codes I found. May I ask where to insert those 2 lines?

Best,

Wilson

_onSelectResult: function(b) {

var c = b.result;

if (c && c.name) {

var h = b.sourceIndex;

b = this.searchResults;

for (var m = 0, r = 0, t = b.length; r < t; r++)

if (l.isEqual(b, c)) {

m = r;

break

}

p("li", this.searchResultsNode).forEach(n.hitch(this, function(b) {

q.removeClass(b, "result-item-selected");

var l = q.getAttr(b, "title"),

n = q.getAttr(b, "data-index"),

p = q.getAttr(b, "data-source-index");

l === c.name && (n === m.toString() && p === h.toString()) && q.addClass(b, "result-item-selected")

}))

}

Re: Search Widget - Zoom to result is too close, is there a way to customize it?

RobertScheitlin__GISP — Sat, 11 Dec 2021 06:52:52 GMT

Wilson,

So it looks like you are using minified code (so you must have downloaded this from AGOL). In that case then the code would be:

_onSelectResult: function(b) {
            var c = b.result;
            if (c && c.name) {
                var h = b.sourceIndex;
                b = this.searchResults;
                for (var m = 0, r = 0, t = b.length; r < t; r++)
                    if (l.isEqual(b, c)) {
                        m = r;
                        break
                    }
                p("li", this.searchResultsNode).forEach(n.hitch(this, function(b) {
                    q.removeClass(b, "result-item-selected");
                    var l = q.getAttr(b, "title"),
                        n = q.getAttr(b, "data-index"),
                        p = q.getAttr(b, "data-source-index");
                    l === c.name && (n === m.toString() && p === h.toString()) && q.addClass(b, "result-item-selected")
                }))
            }
            var pt = c.feature.geometry.getCentroid(); 
            this.map.centerAndZoom(pt, 2); //Change this to suit your needs
        },

Re: Search Widget - Zoom to result is too close, is there a way to customize it?

WilsonLee — Fri, 22 Apr 2016 16:15:32 GMT

thank you so much!

I will give it a try

Re: Search Widget - Zoom to result is too close, is there a way to customize it?

RobertScheitlin__GISP — Fri, 22 Apr 2016 16:23:50 GMT

Don't forget to mark the question as answered by clicking on the "Correct Answer" link for the rely that answered your question.

Re: Search Widget - Zoom to result is too close, is there a way to customize it?

CraigPrisland2 — Thu, 07 Dec 2017 21:00:34 GMT

Hi all,

I have a question similar to the one posted by Wilson. The code that Robert provided above works great, however I am searching by parcels in my app and the actual size of each parcel polygon can very greatly. Having a set extent for all parcels being searched either results in the zoom extent being too far in for large parcels or too far out for smaller parcels. I have noticed that when I search for a parcel and then click on the Zoom to link on the bottom right hand side of the popup (see following screenshot), the zoom extent goes to the best fit cache scale. Is there anyway to have this be the default in the Search widget? I have been playing around with code some but cannot get it to work correctly.

Thanks in advance,

Craig

Re: Search Widget - Zoom to result is too close, is there a way to customize it?

RobertScheitlin__GISP — Sat, 11 Dec 2021 06:52:55 GMT

Craig,

For that you can just get the extent of the polygon and set the maps extent to that.

(change those two lines to):

          var ext = result.feature.geometry.getExtent();  
          this.map.setExtent(ext, true);‍‍

Of course you will want to put some code in there to verify that the geometry type is actually a polygon.

Re: Search Widget - Zoom to result is too close, is there a way to customize it?

CraigPrisland2 — Tue, 12 Dec 2017 18:05:05 GMT

Robert,

Thanks again, this is exactly what I was looking for.

Craig

Re: Search Widget - Zoom to result is too close, is there a way to customize it?

CCWeedcontrol — Thu, 25 Jan 2018 19:41:42 GMT

I tried add the two lines but i get "Create Widget Error". ?

I am on WAB 2.7

if (result &&
              result.name &&
              title === result.name.toString() &&
              dIdx === dataIndex.toString() &&
              dsIndex === dataSourceIndex.toString()) {
              html.addClass(li, 'result-item-selected');
            }
          }));
          var pt = result.feature.geometry.getCentroid();
          this.map.centerAndZoom(pt, 2); //Change this to suit your needs
      },
        //var layer = this.map.getLayer(sourceLayerId);
        var layerInfo = this.layerInfosObj.getLayerInfoById(sourceLayerId);

Re: Search Widget - Zoom to result is too close, is there a way to customize it?

RobertScheitlin__GISP — Thu, 25 Jan 2018 19:59:56 GMT

Normally that means you have introduced a syntax error in the changes you made.

Re: Search Widget - Zoom to result is too close, is there a way to customize it?

CCWeedcontrol — Sat, 11 Dec 2021 06:52:59 GMT

that's what i figured but i can't see to figure out where. All i did was add these two lines.

Went from

if (result &&
              result.name &&
              title === result.name.toString() &&
              dIdx === dataIndex.toString() &&
              dsIndex === dataSourceIndex.toString()) {
              html.addClass(li, 'result-item-selected');
            }
          }));

        //var layer = this.map.getLayer(sourceLayerId);
        var layerInfo = this.layerInfosObj.getLayerInfoById(sourceLayerId);‍‍‍‍‍‍‍‍‍‍‍

To this.

if (result &&
              result.name &&
              title === result.name.toString() &&
              dIdx === dataIndex.toString() &&
              dsIndex === dataSourceIndex.toString()) {
              html.addClass(li, 'result-item-selected');
            }
          }));
          var pt = result.feature.geometry.getCentroid();
          this.map.centerAndZoom(pt, 2); //Change this to suit your needs
      },
        //var layer = this.map.getLayer(sourceLayerId);
        var layerInfo = this.layerInfosObj.getLayerInfoById(sourceLayerId);‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Search Widget - Zoom to result is too close, is there a way to customize it?

RobertScheitlin__GISP — Fri, 26 Jan 2018 13:39:03 GMT

CC Weedcontrol,

So the issue is this line 10 in your new code then. notice that "}," was not at that location in you original code.