How to automatically show a zoomed in view of the location in ArcGIS Esri Map?

Question

I have integrated a ArcGIS Esri map in a Angular application and I have some locations feeded into a feature layer and those locations are displayed on the Map now as Pinpoints.

But now what I want is ,When user go in to the map page I want to show the zoomed in view of that location on the map.

How can I achieve this?

.ts file

    const map = new Map({
      basemap: 'topo-vector',
      layers: esriLayers
  });

    const view = new MapView({
      container,
      map: map,
      zoom: 4,
      center: [-97.63, 38.34],
    });

      const myLocationLayer = new FeatureLayer({
        source: locationData.map((d,i)=>(
          {
              geometry: new Point({
                longitude: d.longitude,
                latitude: d.latitude
              }),
              attributes: {
                ObjectID: i,
                ...d
              }
          }
        )),
      objectIdField: 'ObjectID',
      geometryType: "point",
      renderer: renderer,
    });
    map.add(dataFeedLayer);

  this.view = view;

.html file

<!-- Map Div -->
<div #mapViewNode></div>

Answer 1

In this case you need to use an extent that includes all your geometries to initialize the view parameters, or after calculating zoom to that extent. For that you need to calculate the extent.

The particularity here is that your geometries are points, so you will not be able to use extent methods, because points have no extent.

But, not worries, to calculate the result extent (ie. the "full extent" of your geometries), is not difficult.

Here is a small function I put for you that can achieve that,

export function addPointToExtent(
    pto: __esri.Point,
    ext: __esri.geometry.Extent
): __esri.geometry.Extent {
    if (!pto) {
        return ext;
    }
    let e;
    if (!ext) {
        e = new Extent({
            xmin: pto.x,
            xmax: pto.x,
            ymin: pto.y,
            ymax: pto.y,
            spatialReference: {
                wkid: 102100
            }
        });
    } else {
        e = ext.clone();
        if (pto.x < e.xmin) {
            e.xmin = pto.x;
        }
        if (pto.x > e.xmax) {
            ext.xmax = pto.x;
        }
        if (pto.y < e.ymin) {
            e.ymin = pto.y;
        }
        if (pto.y > e.ymax) {
            ext.ymax = pto.y;
        }
    }
    return e;
}

You can use it like this,

let ext = addPointToExtent(geoms[0] as Point, null);
for (let i = 1; i < geoms.length; i++) {
    ext = addPointToExtent(geoms[i], ext);
}

where geoms is your list of points, and ext is the result extent.

After you get your result extent, just make the view zoom to it,

view.goTo({ target: ext.expand(1.1) })

the expand is just a plus, to make it a bit bigger.