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

01-15-2022 01:45 AM
New Contributor

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({
      map: map,
      zoom: 4,
      center: [-97.63, 38.34],

      const myLocationLayer = new FeatureLayer({
              geometry: new Point({
                longitude: d.longitude,
                latitude: d.latitude
              attributes: {
                ObjectID: i,
      objectIdField: 'ObjectID',
      geometryType: "point",
      renderer: renderer,

  this.view = view;

.html file

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


0 Kudos
3 Replies
Esri Regular Contributor

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:


0 Kudos
Esri Regular Contributor

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:


New Contributor

Once you have a feature layer with the locations, you can use the mapView.goTo() method. It accepts multiple input options. See

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


0 Kudos