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

Solution 1:

As @cabesuon explained, 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#goTo.

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

Solution 2:

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.