Zoom to layer extent from start

Jump to solution
04-14-2021 02:21 AM
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! 😄



Here is our code so far!
<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>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
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;
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.18/"></script>


], 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)
if (error.name != "AbortError"){

var ZoomToggle = document.getElementById("Zoom");
// Listen to the change event for the checkbox
ZoomToggle.addEventListener("click", function() {

<div id="viewDiv"></div>
<div id="viewDiv2"> <button id="Zoom" class="esri-widget"> Zoom to layer</button></div>
<p id="result"></p>

0 Kudos
1 Solution

Accepted Solutions
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
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.

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
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?

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