Can I have the filter widget zoom to features ? Thanks.
Helen,
OK so I found the difference between your data and mine that I was testing. Mine was using wkid 102100 like the maps wkid.
So make this change (line 6):
<SPAN class="comment token">//Add RJS Now zoom to the results</SPAN> <SPAN class="keyword token">var</SPAN> qt <SPAN class="operator token">=</SPAN> <SPAN class="token function">QueryTask</SPAN><SPAN class="punctuation token">(</SPAN>layerInfo<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getUrl</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> q <SPAN class="operator token">=</SPAN> <SPAN class="token function">Query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> q<SPAN class="punctuation token">.</SPAN>returnGeometry <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN> q<SPAN class="punctuation token">.</SPAN>where <SPAN class="operator token">=</SPAN> layerFilterExpr<SPAN class="punctuation token">;</SPAN> q<SPAN class="punctuation token">.</SPAN>outSpatialReference <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>spatialReference<SPAN class="punctuation token">;</SPAN> qt<SPAN class="punctuation token">.</SPAN><SPAN class="token function">execute</SPAN><SPAN class="punctuation token">(</SPAN>q<SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>fs<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <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>graphicsUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">graphicsExtent</SPAN><SPAN class="punctuation token">(</SPAN>fs<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//End RJS</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>
David did you see this reply:
https://community.esri.com/thread/184442-filter-widget-zoom-to-features#comment-725003
The code changed slightly and the query is Null in the queryTask, causing it to fail, so then map.setExtent has no feature. Any ideas?
Hi Robert,
Thanks again for the reply. Ok I'll look into this. I'm using points at the lowest zoom level so all I get is the map moving so the filtered point is in the center of the base map at the lowest zoom level.
I still don't quite understand why this functionality is not built into the Filter widget as standard.
Anyway thank you for the help. Very useful.
Regards
Jeremy.
Jeremy,
The provided code zooms to the extent of the filtered results. If you need to zoom in more then you would have to adjust the extent using Extent.expand method but that may mean all of your features will not be inside the extent.
Good Morning Robert,
Thank you for the reply. I think that did the trick. Although I'm wondering where the zoom function can be changed to zoom in as well as over to the point of interest. But it is moving the map to center the point I am filtering on the map.
So where can I change the code to zoom inward.
Regards.
Jeremy
You missed the other additions at the start of the widget:
<SPAN class="" style="color: #0077aa; border: 0px; font-weight: inherit;">function</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">(</SPAN>declare<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">,</SPAN> array<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">,</SPAN> html<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">,</SPAN> lang<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">,</SPAN> query<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">,</SPAN> on<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">,</SPAN><BR /> _WidgetsInTemplateMixin<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">,</SPAN><BR /> BaseWidget<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">,</SPAN> FilterUtils<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">,</SPAN> FilterParameters<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">,</SPAN> LayerInfos<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">,</SPAN> FilterManager<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">,</SPAN><BR /> esriRequest<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">,</SPAN> <STRONG>QueryTask<SPAN class="" style="color: #999999; border: 0px;">,</SPAN> Query<SPAN class="" style="color: #999999; border: 0px;">,</SPAN> graphicsUtils<SPAN class="" style="color: #999999; border: 0px;">)</SPAN> <SPAN class="" style="color: #999999; border: 0px;">{</SPAN> <SPAN class="" style="color: slategray; border: 0px;">//Added , QueryTask, Query, graphicsUtils</SPAN></STRONG>
The reason the widget.js is replaced when you remove and re-add it is the whole concept of WAB is the stemApp is what is cloned to a new apps folders when a new add is made and when widgets are added the widget is cloned from the stemApps widget folder. So you are making changes in the apps widgets folder which is correct, but if you want those changes to be cloned into new apps then you have to also add your changes to the stemApp.
I have tried to update the Filter Widget to apply a zoom function with little success here is my Filter Widget.js file.
Which should be edited as you have shown, however it does not zoom to the location when the filter is applied. I too am running this in portal 10.5
Is this the only file that needs to be updated ?
If you remove the filter and then re-apply it the Filter widget folder is removed and the original re-written without the edit, why is this the case ?
Look forward to your reply,
Regards,
Melissa,
You are going to have a REALLY hard time adding this code to a minified version of the widget.js like you are attempting to do.
Hi Robert, I am trying to apply this same functionality using web app builder filter widget. I added your code above but I'm not getting any results.
That's what it is. Thank you so much!
Strange! I created new clean app with filter widget, tested with different layers, did text compare: identical
Attached is my widget.js. Much appreciated!
I just tested the code again and it zoomed for me after the filter was applied. Maybe you should attach your filter widget with your changes for me to look at.
It doesn't work on my end. No error, just not zoom to the desired extent. I tested on all different browsers, same results.
I debugged but I guess I don't know enough to see anything wrong with the codes. Attached is the screen shot. The number of features returned is correct. Thanks.
This has been MINIMALLY tested:
Widget.js
<SPAN class="token function">define</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN> <SPAN class="string token">'dojo/_base/declare'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'dojo/_base/array'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'dojo/_base/html'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'dojo/_base/lang'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'dojo/query'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'dojo/on'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'dijit/_WidgetsInTemplateMixin'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'jimu/BaseWidget'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'jimu/filterUtils'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'jimu/dijit/FilterParameters'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'jimu/LayerInfos/LayerInfos'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'jimu/FilterManager'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'esri/request'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">//Add RJS</SPAN> <SPAN class="string token">'esri/tasks/QueryTask'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'esri/tasks/query'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'esri/graphicsUtils'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">//end RJS</SPAN> <SPAN class="string token">'dojo/NodeList'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'dojo/NodeList-dom'</SPAN> <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>declare<SPAN class="punctuation token">,</SPAN> array<SPAN class="punctuation token">,</SPAN> html<SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">,</SPAN> query<SPAN class="punctuation token">,</SPAN> on<SPAN class="punctuation token">,</SPAN> _WidgetsInTemplateMixin<SPAN class="punctuation token">,</SPAN> BaseWidget<SPAN class="punctuation token">,</SPAN> FilterUtils<SPAN class="punctuation token">,</SPAN> FilterParameters<SPAN class="punctuation token">,</SPAN> LayerInfos<SPAN class="punctuation token">,</SPAN> FilterManager<SPAN class="punctuation token">,</SPAN> esriRequest<SPAN class="punctuation token">,</SPAN> QueryTask<SPAN class="punctuation token">,</SPAN> Query<SPAN class="punctuation token">,</SPAN> graphicsUtils<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">//Added , QueryTask, Query, graphicsUtils</SPAN> <SPAN class="keyword token">return</SPAN> <SPAN class="token function">declare</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>BaseWidget<SPAN class="punctuation token">,</SPAN> _WidgetsInTemplateMixin<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></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><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
applyFilterValues<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">,</SPAN> filterObj<SPAN class="punctuation token">,</SPAN> evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> expr <SPAN class="operator token">=</SPAN> node<SPAN class="punctuation token">.</SPAN>filterParams <SPAN class="operator token">&&</SPAN> <SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">.</SPAN>expr <SPAN class="operator token">||</SPAN> node<SPAN class="punctuation token">.</SPAN>filterParams<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getFilterExpr</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>expr<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> node<SPAN class="punctuation token">.</SPAN>expr <SPAN class="operator token">=</SPAN> expr<SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// getFilterExpr</SPAN> <SPAN class="keyword token">var</SPAN> layerId <SPAN class="operator token">=</SPAN> filterObj<SPAN class="punctuation token">.</SPAN>layerId<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> idx <SPAN class="operator token">=</SPAN> html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getAttr</SPAN><SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'data-index'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> layerInfo <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>layerInfosObj<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayerInfoById</SPAN><SPAN class="punctuation token">(</SPAN>layerId<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>layerInfo<SPAN class="punctuation token">.</SPAN><SPAN class="token function">isShowInMap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">&&</SPAN> layerInfo<SPAN class="punctuation token">.</SPAN><SPAN class="token function">isInScale</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">_bindMapUpdateEvents</SPAN><SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN> html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addClass</SPAN><SPAN class="punctuation token">(</SPAN>node<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'applied'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">_setItemFilter</SPAN><SPAN class="punctuation token">(</SPAN>layerId<SPAN class="punctuation token">,</SPAN> idx<SPAN class="punctuation token">,</SPAN> node<SPAN class="punctuation token">.</SPAN>expr<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> layerFilterExpr <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">_getExpr</SPAN><SPAN class="punctuation token">(</SPAN>layerId<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>filterManager<SPAN class="punctuation token">.</SPAN><SPAN class="token function">applyWidgetFilter</SPAN><SPAN class="punctuation token">(</SPAN>layerId<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">,</SPAN> layerFilterExpr<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//Add RJS Now zoom to the results </SPAN> <SPAN class="keyword token">var</SPAN> qt <SPAN class="operator token">=</SPAN> <SPAN class="token function">QueryTask</SPAN><SPAN class="punctuation token">(</SPAN>layerInfo<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getUrl</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> q <SPAN class="operator token">=</SPAN> <SPAN class="token function">Query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> q<SPAN class="punctuation token">.</SPAN>returnGeometry <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN> q<SPAN class="punctuation token">.</SPAN>where <SPAN class="operator token">=</SPAN> layerFilterExpr<SPAN class="punctuation token">;</SPAN> qt<SPAN class="punctuation token">.</SPAN><SPAN class="token function">execute</SPAN><SPAN class="punctuation token">(</SPAN>q<SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>fs<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <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>graphicsUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">graphicsExtent</SPAN><SPAN class="punctuation token">(</SPAN>fs<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//End RJS </SPAN> <SPAN class="punctuation token">}</SPAN> evt<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stopPropagation</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><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></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><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
