Zoom To Layer using ArcGIS for Javascript API

Question

I am new to JS and I don't quite know how to integrate the Zoom to Layer functionality in my code snippet. I have tried several ways and have failed.

I assume the zoomToLayer function must be added when the query geometry is returned by the queryForWellGeometries() function.

The complete code can be found here -> https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=featurelayer-query and zoomToLayer() code can be found here -> https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=featurelayer-queryextent

When the option is selected from the dropdown menu, it would be useful to zoom to the extent of the queried feature. Right now, the code works but it does not zoom to the feature.

I have tried all sorts of permutations but because my knowledge is basic, I feel I am missing a link.

<script>
 require([
 "esri/Map",
 "esri/views/MapView",
 "esri/layers/FeatureLayer",
 "esri/layers/GraphicsLayer",
 "esri/geometry/geometryEngine",
 "esri/Graphic",
 "esri/widgets/Slider"
 ], function(
 Map,
 MapView,
 FeatureLayer,
 GraphicsLayer,
 geometryEngine,
 Graphic,
 Slider
 ) {
 var wellTypeSelect = document.getElementById("well-type");
 // set the definition expression on the wells
 // layer to reflect the selection of the user
 function setWellsDefinitionExpression(newValue) {
 wellsLayer.definitionExpression = "STATUS2 = '" + newValue + "'";
 if (!wellsLayer.visible) {
 wellsLayer.visible = true;
 }
 return queryForWellGeometries();
 }
 // Get all the geometries of the wells layer
 // the createQuery() method creates a query
 // object that respects the definitionExpression
 // of the layer
 function queryForWellGeometries() {
 var wellsQuery = wellsLayer.createQuery();
 return wellsLayer.queryFeatures(wellsQuery).then(function(response) {
 wellsGeometries = response.features.map(function(feature) {
 return feature.geometry;
 });
 return wellsGeometries;
 });
 }
 // set a new definitionExpression on the wells layer
 // and create a new buffer around the new wells
 wellTypeSelect.addEventListener("change", function() {
 var type = event.target.value;
 setWellsDefinitionExpression(type).then(queryForWellGeometries);
 });
 });
</script>

• Marcelo Villa: HTML and CSS code is irrelevant here. Also, taking a look at the JavaScript code and its comments, most of this is irrelevant too. How exactly are you expecting the Zoom to Layer to work? Is it by clicking on some button of the map, automatically when the map loads, etc...?

Answer 1

The easiest way to zoom to a set of features is to use the view.goTo() method. This method accepts a few different options and tries to figure out the intended geometry to zoom to. https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#goTo

In the https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=featurelayer-query sample, the createBuffer function is called any time wellTypeSelect is being changed. So within that function, you can zoom to the points using (a)

view.goTo(wellPoints);

anywhere inside the createBuffer function.

Or if you want to use the buffered points instead of just the points (b)

view.goTo(wellBuffer);

after the wellBuffer variable has been calculated (inside the createBuffer function).

Answer 2

Try the following:

 wellsLayer.when(function() {
 view.goTo(wellsLayer.fullExtent);
 });

Answer 3

Here is sample code that adds a new FeatureLayer, queries for the extent of the layer's features, and then zooms to the resulting extent.

const featureLayer = new FeatureLayer({
 url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0"
}); 
featureLayer.when(() => {
 return featureLayer.queryExtent();
})
.then((response) => {
 view.goTo(response.extent);
});

The queryExtent() method will factor in the definitionExpression filter while the fullExtent property will not.

Source: Zoom to extent of all features

Answer 4

I realized that there was a mismatch between the spatial reference of my base map and the layer I was rendering on it.

The following piece of code worked like a charm

wellsQuery.outSpatialReference = mapView.spatialReference;

The entire piece of code as follows

<script>
 require([
 "esri/Map",
 "esri/views/MapView",
 "esri/layers/FeatureLayer",
 "esri/layers/GraphicsLayer",
 "esri/geometry/geometryEngine",
 "esri/Graphic",
 "esri/widgets/Slider"
 ], function(
 Map,
 MapView,
 FeatureLayer,
 GraphicsLayer,
 geometryEngine,
 Graphic,
 Slider
 ) {
 var wellTypeSelect = document.getElementById("well-type");
 // set the definition expression on the wells
 // layer to reflect the selection of the user
 function setWellsDefinitionExpression(newValue) {
 wellsLayer.definitionExpression = "STATUS2 = '" + newValue + "'";
 if (!wellsLayer.visible) {
 wellsLayer.visible = true;
 }
 return queryForWellGeometries();
 }
 // Get all the geometries of the wells layer
 // the createQuery() method creates a query
 // object that respects the definitionExpression
 // of the layer
 function queryForWellGeometries() {
 var wellsQuery = wellsLayer.createQuery();
 wellsQuery.outSpatialReference = mapView.spatialReference;
 return wellsLayer.queryFeatures(wellsQuery).then(function(response) {
 wellsGeometries = response.features.map(function(feature) {
 wellsQuery.outSpatialReference = mapView.spatialReference;
 return feature.geometry;
 });
 mapView.goTo(WellsGeometries);
 return wellsGeometries;
 });
 }
 // set a new definitionExpression on the wells layer
 // and create a new buffer around the new wells
 wellTypeSelect.addEventListener("change", function() {
 var type = event.target.value;
 setWellsDefinitionExpression(type).then(queryForWellGeometries);
 });
 });
 </script>