ZoomOut when drawing rectangle

439
3
Jump to solution
03-17-2023 01:15 AM
Vakhtang_Zubiashvili
Occasional Contributor III

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?

 @Sage_Wall

 

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

 

0 Kudos
1 Solution

Accepted Solutions
JoelBennett
MVP Regular Contributor

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

 

View solution in original post

3 Replies
BryanMc
Occasional Contributor

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.

0 Kudos
JoelBennett
MVP Regular Contributor

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

 

Vakhtang_Zubiashvili
Occasional Contributor III

Thanks @JoelBennett , exactly it what needed. 

0 Kudos