nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

WilsonLee

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

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

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

All comments

RobertScheitlin__GISP

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

WilsonLee

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")

}))

}

RobertScheitlin__GISP

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

WilsonLee

thank you so much!

I will give it a try

RobertScheitlin__GISP

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

CraigPrisland2

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

RobertScheitlin__GISP

Craig,

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

(change those two lines to):

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> ext <SPAN class="operator token">=</SPAN> result<SPAN class="punctuation token">.</SPAN>feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getExtent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setExtent</SPAN><SPAN class="punctuation token">(</SPAN>ext<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

CraigPrisland2

Robert,

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

Craig

CCWeedcontrol

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

RobertScheitlin__GISP

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

CCWeedcontrol

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 &&
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; result.name &&
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title === result.name.toString() &&
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dIdx === dataIndex.toString() &&
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dsIndex === dataSourceIndex.toString()) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; html.addClass(li, 'result-item-selected');
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }));

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //var layer = this.map.getLayer(sourceLayerId);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var layerInfo = this.layerInfosObj.getLayerInfoById(sourceLayerId);<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

To this.

<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>result <SPAN class="operator token">&</SPAN><SPAN class="operator token">&</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; result<SPAN class="punctuation token">.</SPAN>name <SPAN class="operator token">&</SPAN><SPAN class="operator token">&</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title <SPAN class="operator token">==</SPAN><SPAN class="operator token">=</SPAN> result<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">.</SPAN>toString<SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">&</SPAN><SPAN class="operator token">&</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dIdx <SPAN class="operator token">==</SPAN><SPAN class="operator token">=</SPAN> dataIndex<SPAN class="punctuation token">.</SPAN>toString<SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">&</SPAN><SPAN class="operator token">&</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dsIndex <SPAN class="operator token">==</SPAN><SPAN class="operator token">=</SPAN> dataSourceIndex<SPAN class="punctuation token">.</SPAN>toString<SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; html<SPAN class="punctuation token">.</SPAN>addClass<SPAN class="punctuation token">(</SPAN>li<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'result-item-selected'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var pt <SPAN class="operator token">=</SPAN> result<SPAN class="punctuation token">.</SPAN>feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">.</SPAN>getCentroid<SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>centerAndZoom<SPAN class="punctuation token">(</SPAN>pt<SPAN class="punctuation token">,</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="operator token">//</SPAN>Change this to suit your needs
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token">//</SPAN>var layer <SPAN class="operator token">=</SPAN> this<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>getLayer<SPAN class="punctuation token">(</SPAN>sourceLayerId<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var layerInfo <SPAN class="operator token">=</SPAN> this<SPAN class="punctuation token">.</SPAN>layerInfosObj<SPAN class="punctuation token">.</SPAN>getLayerInfoById<SPAN class="punctuation token">(</SPAN>sourceLayerId<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

RobertScheitlin__GISP

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.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.