Hi folks,
I am trying to zoom out on my map when drawing rectangle sketch. I can zoom out, but it does only from the center of the map, not from the rectangle, view.goTo() does not work, only zoom Out. Any idea what is wrong?
sketchViewModellZoom.on("create", async (event) => {
if (event.state === "complete") {
var ext = view.extent;
view.goTo({
target: event.graphic,
extent: ext.expand(1.75),
});
polygonGraphicsLayerrZoom.remove(event.graphic);
}
});
Solved! Go to Solution.
When zooming out by rectangle, it's really expected that you zoom out by a ratio of the size of the drawn rectangle versus the size of the map. However, you have a fixed ratio (1.75) of the view's extent, so you may as well just have the user click a point as opposed to drawing a rectangle. Below is the code for proportionally zooming out (and centering) based on a user-drawn rectangle:
sketchViewModellZoom.on("create", async (event) => {
if (event.state === "complete") {
var extent = event.graphic.geometry.extent;
if ((extent.width > 0) && (extent.height > 0)) {
var mapExtent = view.extent;
var ratio = Math.max(mapExtent.width / extent.width, mapExtent.height / extent.height);
view.goTo(mapExtent.clone().expand(ratio).centerAt(extent.center));
}
polygonGraphicsLayerrZoom.remove(event.graphic);
}
});
It looks like it is using the map extent which is being provided in the code and just updating the view extent (extent doesn't look like a property inside the GoTo method). Thinking you could just use the target event graphic and get that graphic's geometry extent (with expand) as you don't need the view.extent for this call.
When zooming out by rectangle, it's really expected that you zoom out by a ratio of the size of the drawn rectangle versus the size of the map. However, you have a fixed ratio (1.75) of the view's extent, so you may as well just have the user click a point as opposed to drawing a rectangle. Below is the code for proportionally zooming out (and centering) based on a user-drawn rectangle:
sketchViewModellZoom.on("create", async (event) => {
if (event.state === "complete") {
var extent = event.graphic.geometry.extent;
if ((extent.width > 0) && (extent.height > 0)) {
var mapExtent = view.extent;
var ratio = Math.max(mapExtent.width / extent.width, mapExtent.height / extent.height);
view.goTo(mapExtent.clone().expand(ratio).centerAt(extent.center));
}
polygonGraphicsLayerrZoom.remove(event.graphic);
}
});
Thanks @JoelBennett , exactly it what needed.