Hello,
I am hoping this will be a pretty easy fix. Not so easy for me.
In using the Search widget we can type in a Parcel Address and zoom to that parcel. I would like to modify the zoom level because it goes in way too far for us.
I am in the configure portion for the Search widget. Unfortunately there is no place to change the Zoom Scale for my Parcel Address search source. I can modify the Name, Placeholder Text, Search Fields, Display Field, Maximum Suggestions, Maximum Results, etc...but nothing concerning scale. Am I looking in the right place?
Thanks
Jeff
Solved! Go to Solution.
Jeff,
Based on the code you are showing me it looks correct.
Changing the C:\gis\Applications\WebAppBuilderforArcGIS_2.2\client\stemapp\widgets\Search\Widget.js will only affect newly created apps. If you are wanting to change an existing app then you have to change the Widget.js in that apps widget folder.
I'd be interested in any responses to this question as well. This might need to be added as an "Idea." You can control the zoom scale if the feature service referenced by the search is a Point. But not if it is a Line or Polygon.
I have answered this in the past. See this thread:
Robert,
Could you show me specifically where to place your code and how it should read? Please see below...
Thanks.
Jeff
_onSelectResult: function(e) {
var result = e.result;
if (!(result && result.name)) {
return;
}
var dataSourceIndex = e.sourceIndex;
var sourceResults = this.searchResults[dataSourceIndex];
var dataIndex = 0;
var that = this;
var getGraphics = function(layer, fid) {
var graphics = layer.graphics;
var gs = array.filter(graphics, function(g) {
return g.attributes[layer.objectIdField] === fid;
});
return gs;
};
var showPopupByFeatures = function(features) {
var location = null;
that.map.infoWindow.setFeatures(features);
if (features[0].geometry.type === "point") {
location = features[0].geometry;
} else {
location = features[0].geometry.getExtent().getCenter();
}
that.map.infoWindow.show(location, {
closetFirst: true
});
};
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 layer = this.map.getLayer(e.source._featureLayerId);
Jeff,
It is pretty straight forward (lines 51 and 52):
_onSelectResult: function(e) {
var result = e.result;
if (!(result && result.name)) {
return;
}
var dataSourceIndex = e.sourceIndex;
var sourceResults = this.searchResults[dataSourceIndex];
var dataIndex = 0;
var that = this;
var getGraphics = function(layer, fid) {
var graphics = layer.graphics;
var gs = array.filter(graphics, function(g) {
return g.attributes[layer.objectIdField] === fid;
});
return gs;
};
var showPopupByFeatures = function(features) {
var location = null;
that.map.infoWindow.setFeatures(features);
if (features[0].geometry.type === "point") {
location = features[0].geometry;
} else {
location = features[0].geometry.getExtent().getCenter();
}
that.map.infoWindow.show(location, {
closetFirst: true
});
};
for (var i = 0, len = sourceResults.length; i < len; i++) {
if (jimuUtils.isEqual(sourceResults[i], 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, 12); //Change this to suit your needs
Robert,
I've changed the "12" to different values (50, 500, etc...) but nothing seems to effect my zoom level. Please see code placement below. Ideally I would like to mimic the zoom level that illustrates using the ESRI World Geocoder. Not quite sure what that is.
Can you tell me what I am doing wrong?
Thanks.
Jeff
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, 12); //Change this to suit your needs
},
var layer = this.map.getLayer(e.source._featureLayerId);
if (layer) {
var gs = getGraphics(layer, e.result.feature.__attributes[layer.objectIdField]);
if (gs.length > 0) {
showPopupByFeatures(gs);
Jeff,
The 12 is a zoom level not a scale. The Basemap sets the maps LODs (scale levels) and those are what you set the number to. 1 is zoomed out a global scale and 16 or 21 is zoomed into building level depending on the basemap used.
Robert,
I've changed the value to both 1 and 2 in the Search Widget.js file and the zoom level remains up close and personal. You mentioned the basemap sets the maps scale levels. Is there something and/or somewhere else I need to modify besides editing the Search Widget.js file?
Thanks.
Jeff
Jeff,
When I tested this put in line 49 and 50 like I mentioned here:
https://community.esri.com/message/673763-re-customizing-zoom-level?commentID=673763#comment-673763
And I set the number to be 2 or 1 the zoom went to the world scale just fine. So i am not sure what you are doing wrong.
Robert,
Do I have the new code in the correct position? Any errors before or after the code?
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
},
var layer = this.map.getLayer(e.source._featureLayerId);
if (layer) {
var gs = getGraphics(layer, e.result.feature.__attributes[layer.objectIdField]);
if (gs.length > 0) {
showPopupByFeatures(gs);