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