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

[SheikhImranJaffry]

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>

[Noah-Sager]

Hi @SheikhImranJaffry, here is a sample that demonstrates how to zoom to the extent of the all the features on the map, hope this helps: https://developers.arcgis.com/javascript/latest/sample-code/featurelayer-queryextent/

[UndralBatsukh]

Hi there, 

If the features are added when the client-side layer is created then you can just zoom to the fullExtent of the layer. If you add or remove features from your client-side FeatureLayer then you can call queryExtent method with `1=1` where clause.

This app shows both approaches: https://codepen.io/U_B_U/pen/mdBQQRY?editors=1000

[MinahilMalik]

Once you have a feature layer with the locations, you can use the mapView.goTo() method. It accepts multiple input options. See https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html

As For getting an extent of the features, you don't have to calculate that yourself if they are already in a layer.

view.goTo(dataFeedLayer.source); // without the extra zoom outpadding

If you set the source when you create the FeatureLayer, you could use:

    view.whenLayerView(dataFeedLayer).then(() => {
        view.goTo({ target: dataFeedLayer.fullExtent.expand(1.2) })
    });

If you want to reset after the feature layer has changed:

    dataFeedLayer.queryExtent().then((results) => {
        view.goTo({ target: results.extent.expand(1.2) })
    });