Zoom to layer via ArcGIS JS API

2756
3
Jump to solution
08-17-2021 01:04 PM
Amadeus111
Occasional Contributor II

I created a map and a layer. I would like to zoom to the layer's extent as soon as MapView loaded. 

I found this reference from the API https://totalapis.github.io/api-reference/esri-layers-FeatureLayer.html#fullExtent

but could not work it out. Do you have any idea?

 

 

<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: Add a feature layer</title>
        <style>
            html, body, #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;

            }

        </style>
        <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.20/"></script>
        <script>
            require([
                "esri/config",
                "esri/Map",
                "esri/views/MapView",
                "esri/layers/FeatureLayer"
            ], function(esriConfig,Map,MapView,FeatureLayer)
            {
                esriConfig.apiKey = "MyAPIKey";

                const map = new Map({
                    basemap: "arcgis-topographic"
                });

                var view = new MapView({
                    map: map,  // References a Map instance
                    container: "viewDiv"  // References the ID of a DOM element
                });
                
                //data needs to be public to access them without authorization
                var fl = new FeatureLayer({
                    url: url });

                map.add(fl);  // adds the layer to the map

                view.extent = fl.fullExtent; //this doesn't work
            });
        </script>
    </head>
    <body>
        <div id="viewDiv"></div>
    </body>
</html>

 

 

  

0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor

Is this what you are looking for?

https://codepen.io/odoe/pen/MWmdNOY?editors=0010

Issue with snippet you have is the layer has not loaded, so the full extent is not known yet. If you wait for view.when(), the layer will be loaded and the fullExtent will be available.

View solution in original post

3 Replies
ReneRubalcava
Frequent Contributor

Is this what you are looking for?

https://codepen.io/odoe/pen/MWmdNOY?editors=0010

Issue with snippet you have is the layer has not loaded, so the full extent is not known yet. If you wait for view.when(), the layer will be loaded and the fullExtent will be available.

Amadeus111
Occasional Contributor II

Awesome! it works now. I tried

function setExtent(layer){
                    view.extent = layer.fullExtent;
                };

view.then(setExtent(layer))

previously but did not work. Do you know the difference between .then and .when? 

0 Kudos
ReneRubalcava
Frequent Contributor

view.when() is the preferred async method. view.then() was deprecated some time ago when the Promise spec was finalized and we had to make some changes in the API.