View goTo target, looking for the best solution if there are many polygons and graphics.

[DimaY]

At a certain user's choice, I draw the necessary polygons at the given coordinates from the given object and add them to the map in the form of graph figures. Then I want to show the selection on the map and use method GOTO.  Polygons are added in a loop.  I've already tried all sorts of ways. And zoomed in. And changed in a cycle. And after the cycle. And in the end, it's still kind of clumsy. That's not in the right place. Either too small or too large. If, for example, the United States, then it is not in the middle at all. How best to use To zoom the user on the map to the right place? Is there a better optimal solution? Has anyone encountered similar problems?

my code is something like this :

const map = new Map({
ground: "world-elevation",
basemap: grayBasemap
});

const view = new SceneView({
container,
map: map,
qualityProfile: "high",
zoom: 4
});

this.view.graphics.removeAll();

for (var i = 0; i < objCoordinates.length; i++) {
var coordinates = objCoordinates[0];
var polygon = new Polygon();
polygon.addRing(coordinates);

var polygonGraphic = new Graphic({
geometry: polygon,
symbol: fillSymbol
});

this.view.graphics.add(polygonGraphic);
}

this.view.goTo({
target: this.view.graphics
}).catch(this.catchAbortError);

[DimaY]

I already see 441 views, but so no one could suggest anything? 

Sadly. 😞

[JoelBennett]

I see the first line in your loop is:

var coordinates = objCoordinates[0];

This would definitely throw off your results, and I think you would rather intend:

var coordinates = objCoordinates[i];

[DimaY]

if (objGeoJSON.type == "Polygon") {
var coordinates = objCoordinates[0];
}
else {
var coordinates = objCoordinates[i][0];
}

No. It's not a mistake. I just didn't show all the code, because that's not the problem at all.  

The problem is right here. When I add many countries. Or a lot of polygons. view GOTO to geometries or goto  to all graphs don't work, as in this case.  for example

this.view.goTo({
target: this.view.graphics
}).catch(this.catchAbortError);

[JoelBennett]

Regarding this code:

this.view.goTo({
	target: this.view.graphics
}).catch(this.catchAbortError);

this.view.graphics is a Collection, but the documentation for goTo does not specify that a Collection is supported.  I would recommend passing a value specified in the documentation, like an array of Graphics:

this.view.goTo(this.view.graphics.toArray()).catch(this.catchAbortError);

[DimaY]

Thanks for your reply. Alas, but it does not help. I already tried both array of geometries and array of graphs. What I just did not do when there are a lot of polygons and graphs, it does not work correctly.

[JoelBennett]

At this point, I'd probably just recommend calculating the extent manually and zooming to that:

var extent = null;

for (var i = 0; i < objCoordinates.length; i++) {
	//etc...

	if (extent === null)
		extent = polygon.extent.clone();
	else
		extent.union(polygon.extent);
}

this.view.goTo(extent).catch(this.catchAbortError);

[DimaY]

Thank you very much again! It's nice to read a thinking person and understanding what he is talking about.

If I understood you correctly, then another idea is to collect not arrays of geometries or graphs, as a target, namely, to collect the sum of extent each polygon?

[DimaY]

Thanks. I tried it and this solution really looks much better in many cases. But there is one case and I attached files with a picture, where it is shown how I would like it to be in reality and for some reason how it turns out. I do not understand why it turns out away from the created polygons. For example, in the case where there are many multipolygons, as in the case of the USA and the islands around.  There is no even understanding why this is so?

[JoelBennett]

It looks like in this case, the issue is because the full extent is crossing the international dateline.  Therefore, a single extent object will have 'x' values that go beyond the boundaries of what's defined for the coordinate system.  You may be able to solve this easily by using Extent.normalize.  In that case, the final line would be:

this.view.goTo(extent.normalize()).catch(this.catchAbortError);

Although this post is from a completely different API, the images used in the post marked as a solution help to illustrate what you're seeing.