goTo function zooming only to one geometry

1167
4
05-02-2022 04:18 AM
eyalj
by
New Contributor II

Hey,

Im trying to do the goto function for serval geometry but it seems it zooming only to the last geometry in the array,

not really sure why and how to handle it

that's the Array of Geometry im passing, in not getting any errors

eyalj_0-1651490084783.png

 

Tags (3)
0 Kudos
4 Replies
KenBuja
MVP Esteemed Contributor

What does your code look like? This modified sample works properly

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Intro to graphics | Sample | ArcGIS API for JavaScript 4.23</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.23/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.23/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require(["esri/Map", "esri/views/MapView", "esri/Graphic"], (
        Map,
        MapView,
        Graphic
      ) => {
        const map = new Map({
          basemap: "hybrid"
        });

        const view = new MapView({
          center: [-80, 35],
          container: "viewDiv",
          map: map,
          zoom: 3
        });

        /***************************
         * Create a polygon graphic
         ***************************/

        // Create a polygon geometry
        const polygon = {
          type: "polygon", // autocasts as new Polygon()
          rings: [
            [-64.78, 32.3],
            [-66.07, 18.45],
            [-80.21, 25.78],
            [-64.78, 32.3]
          ]
        };
        
        const polygon1 = {
          type: "polygon", // autocasts as new Polygon()
          rings: [
            [-84.78, 32.3],
            [-86.07, 18.45],
            [-90.21, 25.78],
            [-84.78, 32.3]
          ]
        };      

        // Create a symbol for rendering the graphic
        const fillSymbol = {
          type: "simple-fill", // autocasts as new SimpleFillSymbol()
          color: [227, 139, 79, 0.8],
          outline: {
            // autocasts as new SimpleLineSymbol()
            color: [255, 255, 255],
            width: 1
          }
        };

        // Add the geometry and symbol to a new graphic
        const polygonGraphic = new Graphic({
          geometry: polygon,
          symbol: fillSymbol
        });
        // Add the geometry and symbol to a new graphic
        const polygonGraphic1 = new Graphic({
          geometry: polygon1,
          symbol: fillSymbol
        });
        // Add the graphics to the view's graphics layer
        view.graphics.addMany([polygonGraphic, polygonGraphic1]);
        
        view.graphics.on("after-add",()=>{
          view.goTo({
            target: [polygonGraphic.geometry, polygonGraphic1.geometry]
          })
        });
        
        view.graphics.addMany([polygonGraphic, polygonGraphic1]);
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
eyalj
by
New Contributor II

 

view.goTo(geometryArr);

 

GeometryArry is the array in the first pictrue
And that's the view

 notice that it works it just zooming to one of the geometry in the array instead of all of them

0 Kudos
DimaY
by
New Contributor

No, you are not very right. Only this simple example works and that's it. I have exactly the same problem, I already opened a topic on this forum. So no one answered. There is a bug, some kind of malfunction, and this must be recognized. When a lot of graphs are added, the view.goTu gets lost where to go and shows everything incorrectly, and this is putting it mildly.

0 Kudos
ReneRubalcava
Frequent Contributor

Can you provide a codepen showing the issue?

https://codepen.io/

No way to tell without seeing it in action. It could be a bad geometry, spatial reference mismatch, or something else.

0 Kudos