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>