Query Widget zoom to polygon code help

1273
10
Jump to solution
03-15-2023 06:24 AM
Labels (1)
JustinSharp
New Contributor II

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

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
BrianLeroux
Occasional Contributor III

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

View solution in original post

10 Replies
BrianLeroux
Occasional Contributor III
0 Kudos
JustinSharp
New Contributor II

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.

0 Kudos
BrianLeroux
Occasional Contributor III

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.

0 Kudos
JustinSharp
New Contributor II

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

0 Kudos
BrianLeroux
Occasional Contributor III

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

0 Kudos
JustinSharp
New Contributor II

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.

0 Kudos
BrianLeroux
Occasional Contributor III

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. 

0 Kudos
BrianLeroux
Occasional Contributor III

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

JustinSharp
New Contributor II

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

 

This worked! Thanks Brian!

0 Kudos