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

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

Anonymous User

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!

Encuentra más publicaciones etiquetadas con

Accepted answers

RobertScheitlin__GISP

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

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>results <SPAN class="operator token">&&</SPAN> evt<SPAN class="punctuation token">.</SPAN>numResults <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> mpPt<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">var</SPAN> i <SPAN class="keyword token">in</SPAN> results<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>results<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">.</SPAN>type <SPAN class="operator token">===</SPAN> <SPAN class="string token">"point"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mpPt <SPAN class="operator token">=</SPAN> results<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="keyword token">else</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mpPt <SPAN class="operator token">=</SPAN> results<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><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><SPAN class="token function">getCenter</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; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> scrPt <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toScreen</SPAN><SPAN class="punctuation token">(</SPAN>mpPt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&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">emit</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> bubbles<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> cancelable<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> mapPoint<SPAN class="punctuation token">:</SPAN> mpPt <SPAN class="punctuation token">,</SPAN>screenPoint<SPAN class="punctuation token">:</SPAN> scrPt <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; <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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>

All comments

AustinKolar

Robert-

I have only been working with ArcGIS for a couple of months and I have very little to no experience in Javascript. I am wanting to get this exact situation accomplished in one of my WAB. However, when I attempt to edit the Search widget.js file it is not changing any results on my WAB search results (no errors nor change from original popup). I was wondering if there is any methods to adjust the search results in a GUI framework or if can only be done via Javascript? If only done in Javascript can you help dumb down these steps directions for a non experienced javascripter wanting to learn?

Anonymous User

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

RobertScheitlin__GISP

Andrew,

Yes, the \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 \applications\VirtChar\VirtChar\InDevelopment\Beta\configs\search\search_config.json.

Anonymous User

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

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

RobertScheitlin__GISP

Andrew,

Your app still has:

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

Anonymous User

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

RobertScheitlin__GISP

Andrew,

If you set the Search widgets config to

<SPAN class="string token">"showInfoWindowOnSelect"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

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:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> mpPt<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>result<SPAN class="punctuation token">.</SPAN>feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">.</SPAN>type <SPAN class="operator token">===</SPAN> <SPAN class="string token">"point"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mpPt <SPAN class="operator token">=</SPAN> result<SPAN class="punctuation token">.</SPAN>feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="keyword token">else</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mpPt <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><SPAN class="token function">getCenter</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> scrPt <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toScreen</SPAN><SPAN class="punctuation token">(</SPAN>mpPt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&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">emit</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> bubbles<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> cancelable<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> mapPoint<SPAN class="punctuation token">:</SPAN> mpPt <SPAN class="punctuation token">,</SPAN>screenPoint<SPAN class="punctuation token">:</SPAN> scrPt <SPAN class="punctuation token">}</SPAN><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>

Anonymous User

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

RobertScheitlin__GISP

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.

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

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