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]);
}
Solved! Go to Solution.
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);
This might be helpful. setting-zoom-extent-for-attribute-table-zoom-to/
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.
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.
so where do you put the map.centerAndZoom code? I tried that as well in various places but did nothing.
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);
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.
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.
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);
jimuUtils.zoomToFeatureSet(this.map, featureSet);
console.log(centerPoint);
this.map.centerAndZoom(centerPoint,20);
This worked! Thanks Brian!