Zoom to layer extent from start

810
4
Jump to solution
04-14-2021 02:21 AM
WilliamHepp
New Contributor II

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! :D

 

 

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/...",
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>

0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Honored Contributor

There's something wrong with that feature layer (using "0" instead of "..."). I substituted another feature layer in the URL and it worked properly.

View solution in original post

4 Replies
KenBuja
MVP Honored Contributor

There's something wrong with that feature layer (using "0" instead of "..."). I substituted another feature layer in the URL and it worked properly.

WilliamHepp
New Contributor II

Ok thank you. What do you mean with using "0" instead of "..."? Do you know why my feature layer is not working because I created that feature layer and would like for it to work on it.

0 Kudos
KenBuja
MVP Honored Contributor

You're correct in the URL worked properly in your original code, since the layer is drawn on your map. If you don't specify a layer, it defaults to the first layer in your service.

However, I'm not sure why yours isn't working properly in the code. How did you create it?

WilliamHepp
New Contributor II

I create it from a TIF file in ArcGIS pro and then converted it to a shapefile and published it as a web layer. is there some setting I have forgotten to turn on? 

0 Kudos