I want to zoom in to my feature layer automatically from start without having to write the coordinates for it in view. Right now we get an error when doing queryExtent() and then view.goTo(response.extent) that says the following: undefined "TypeError" cannot read the property "TargetGeometry" of Null". Have searched all over this community but haven't found anyone with a similar problem. Would appreciate some help! 😄
Here is our code so far!
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS API for JavaScript Tutorials: Query a feature layer (spatial)</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#Zoom{
top: 240px;
right: 20px;
position: absolute;
z-index: 99;
background-color: white;
border-radius: 8px;
border-width: 2px;
border-style: solid;
border-color: black;
padding: 10px;
opacity: 1;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.18/"></script>
<script>
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/widgets/Sketch",
"esri/layers/GraphicsLayer",
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/widgets/Search",
"esri/renderers/ClassBreaksRenderer",
"esri/widgets/Legend","esri/views/SceneView",
], function(esriConfig,Map, MapView, Sketch, GraphicsLayer, FeatureLayer,Graphic,Search,ClassBreaksRenderer,Legend) {
esriConfig.apiKey = "AAPKac92afe710ec4db9bf8423343102b147tLzn_6tk50TFgDBNl63Tr-44V9blp4Njp8ffo7faiUeI0K_9qJpyVRV2xLm6y2Zc";
// Reference query layer
const parcelLayer = new FeatureLayer({
url: "https://services9.arcgis.com/S990USlhfgpUmWKm/ArcGIS/rest/services/L%c3%a4ggtillkarta/FeatureServer/0",
outFields: ["*"],
id: "incidentsLayer",
});
const map = new Map({
basemap: "arcgis-topographic" //Basemap layer service
});
const view = new MapView({
container: "viewDiv",
map: map,
layers: [parcelLayer],
extent: {
// autocasts as new Extent()
xmin: 524550,
ymin: 6474400,
xmax: 527600,
ymax: 6477200,
spatialReference: 102100
}
});
function zoomToLayer(layer) {
return layer.queryExtent().then(function(response) {
var opts = {duration: 5000};
response.outSpatialReference = view.spatialReference;
// go to point at LOD 15 with custom duration
view.goTo(response.extent, opts)
.catch(function(error){
if (error.name != "AbortError"){
console.log("===============================================");
console.error(
error.code,
error.name,
error.message
);
}
});
});
}
map.add(parcelLayer);
var ZoomToggle = document.getElementById("Zoom");
// Listen to the change event for the checkbox
ZoomToggle.addEventListener("click", function() {
zoomToLayer(parcelLayer)
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="viewDiv2"> <button id="Zoom" class="esri-widget"> Zoom to layer</button></div>
<p id="result"></p>
</body>
</html>
