topic Re: Query Widget zoom to polygon code help in ArcGIS Web AppBuilder Questions

Query Widget zoom to polygon code help

JustinSharp — Wed, 15 Mar 2023 13:24:11 GMT

Hey all,

Im trying to configure the Query Widget in WAB Dev Edition so that when you click on a result of the query it will zoom to the shape of the polygon. Right now it zooms to a default zoom level but it too far out and I cannot figure out where to change the code to zoom to the shape.

Ive found the following code affects the zoom level because when i comment the code out it no longer zooms. Ive tried to enter different zoomfactors into the geometry.getExtent() and extent.expand() but nothing changes.

html.addClass(tr, 'jimu-state-active');
var feature = tr.feature;
var geometry = feature.geometry;
if (geometry) {
var geoType = geometry.type;
var centerPoint, extent;
if (geoType === 'point') {
centerPoint = geometry;
} else if (geoType === 'multipoint') {
if (geometry.points.length === 1) {
centerPoint = geometry.getPoint(0);
} else if (geometry.points.length > 1) {
centerPoint = geometry.getPoint(0);
}

} else if (geoType === 'polyline') {
extent = geometry.getExtent();
extent = extent.expand(1.4);
centerPoint = extent.getCenter();
} else if (geoType === 'polygon') {
extent = geometry.getExtent();
extent = extent.expand(1.4);
centerPoint = extent.getCenter();
} else if (geoType === 'extent') {
extent = geometry;
extent = extent.expand(1.4);
centerPoint = extent.getCenter();
}
var featureSet = jimuUtils.toFeatureSet(feature);
jimuUtils.zoomToFeatureSet(this.map, featureSet);
if (typeof this.map.infoWindow.setFeatures === 'function') {
this.map.infoWindow.setFeatures([feature]);
}

Re: Query Widget zoom to polygon code help

BrianLeroux — Wed, 15 Mar 2023 13:37:11 GMT

This might be helpful. setting-zoom-extent-for-attribute-table-zoom-to/

Re: Query Widget zoom to polygon code help

BrianLeroux — Wed, 15 Mar 2023 13:42:13 GMT

I should also mention that it seems like the if sections in the code you posted are just getting a center point of and extent and not performing a zoom. The zooming looks to be handled on this line - jimuUtils.zoomToFeatureSet(this.map, featureSet);

Personally I zoom in my widgets using map.centerAndZoom (result.features[0].geometry,13); so I can set a zoom level.

Re: Query Widget zoom to polygon code help

JustinSharp — Wed, 15 Mar 2023 13:44:01 GMT

Thanks Brian I saw that post as well and tried that in the zoomToUtils.js but since its a polygon and not a point i couldnt get it to work.

Re: Query Widget zoom to polygon code help

JustinSharp — Wed, 15 Mar 2023 13:50:29 GMT

so where do you put the map.centerAndZoom code? I tried that as well in various places but did nothing.

Re: Query Widget zoom to polygon code help

BrianLeroux — Wed, 15 Mar 2023 14:00:14 GMT

Here are a couple things to try. One I noteced that there is a extentFactor you can set on the zoomToFeatureSet function as seen here mo.zoomToFeatureSet = function(map, featureSet, /*optional*/extentFactor). So you could try playing with values there. For example try jimuUtils.zoomToFeatureSet(this.map, featureSet, 0.8);

To try center and zoom I would comment out jimuUtils.zoomToFeatureSet(this.map, featureSet); and add a new line of this.map.centerAndZoom (geometry,13);

Re: Query Widget zoom to polygon code help

JustinSharp — Wed, 15 Mar 2023 15:13:45 GMT

unfortunately commenting out jimuUtils.zoomToFeatureSet(this.map, featureSet); breaks the code and does not pan or zoom and adding the extent factor to jimuUtils.zoomToFeatureSet(this.map, featureSet, #.#) does not change anything no matter what factor i put in.

Re: Query Widget zoom to polygon code help

BrianLeroux — Wed, 15 Mar 2023 15:42:24 GMT

That is strange. I just tested with jimuUtils.zoomToFeatureSet(this.map, featureSet,0.5); and it zoomed me in closer to the selected polygon feature. To the point where I couldn't see all edges of my polygon. I also tried using a value of 10 and it zoomed way out. Try using a lower value like 0.25 or even down to 0.1.

Re: Query Widget zoom to polygon code help

BrianLeroux — Wed, 15 Mar 2023 15:57:41 GMT

I was able to test with map.centerAndZoon as well and that works. i did have to tweak what I initially put though as that function needs a single point. so this is what you would need. I do think using the other method above is a bit better though.

//jimuUtils.zoomToFeatureSet(this.map, featureSet,0.5);
//console.log(centerPoint);
this.map.centerAndZoom(centerPoint,15);

Re: Query Widget zoom to polygon code help

JustinSharp — Wed, 15 Mar 2023 19:35:01 GMT

jimuUtils.zoomToFeatureSet(this.map, featureSet);
console.log(centerPoint);
this.map.centerAndZoom(centerPoint,20);

This worked! Thanks Brian!

Re: Query Widget zoom to polygon code help

BrianLeroux — Wed, 15 Mar 2023 19:30:24 GMT

Yes I am. I am testing on a basic feature service of zip codes.