Help with setting extent based on feature layer

ShannonDeArmond · ‎09-25-2015

Hi there. I'm a beginner in the realms of the javascript API. I'm trying to zoom to the extent of a feature layer I've added to my map. When I try to run the code (attached), I don't get an error but the map extent does not change to the extent of the layer. I've checked out the rest service for my feature layer and verified that it is in the same projection as the base map (3857) and that the extent coordinates are what I expect them to be. I can set up the extent manually to those same coordinates and spatial reference and all works fine, but I'd like to set it dynamically based on the layer. Can anyone point me in the right direction?

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Resource Loader Test</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">

  <script src="http://js.arcgis.com/3.8/"></script>
  <script>
    require([
      "esri/map",
      "esri/layers/FeatureLayer",
      "esri/geometry/Extent",
      "esri/SpatialReference",

      "dojo/ready",
      "dojo/parser",
      "dojo/on",],
    
    function (Map, FeatureLayer, Extent, SpatialReference, ready, parser, on) {

        ready(function () {

            parser.parse();
        
        var myLyr = new FeatureLayer("//data.farwestern.com/arcgis/rest/services/base/Environment/MapServer/0", {
        mode:FeatureLayer.MODE_ONDEMAND,
        autoGeneralize: true,
        visible: true,
        opacity: 0.5
        });
        
        var mapMain = new Map("mapDiv", {
            basemap: "streets",
        extent: myLyr.fullExtent,
        zoom: 5,
        });

        
        //var startExtent = new Extent(-13887750, 3371860, -10999990, 6275470, new SpatialReference({ wkid:3857 }))
        //mapMain.setExtent(startExtent);
        //mapMain.setZoom(5);
        
        mapMain.addLayer(myLyr);
        
        mapMain.on("extent-change", function(printExtent) {
          curExtent = mapMain.extent
          var extentString = "";
          extentString = "XMin: " + Math.round(curExtent.xmin) +
        ", YMin: " + Math.round(curExtent.ymin) +
        ", XMax: " + Math.round(curExtent.xmax) +
        ", YMax: " + Math.round(curExtent.ymax);
          dojo.byId("mapInfo").innerHTML = extentString;
        });
        
    })
      }
    )
  </script> 

</head>

<body class="claro"> 
  <div id="mapDiv" style="width:900px; height:600px;"></div>
  <div id="mapInfo"></div>
</body>

</html>

RobertScheitlin__GISP · ‎09-25-2015

Shannon,

The problem is that the FeatureLayer is not loaded before you try and get it's full extent. Try this code that loads the FL first and then inits the map:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Resource Loader Test</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">

  <script src="http://js.arcgis.com/3.14/"></script>
  <script>
    require([
      "esri/map",
      "esri/layers/FeatureLayer",
      "esri/geometry/Extent",
      "esri/SpatialReference",
      "dojo/on",
      "dojo/domReady!"
    ],

      function (Map, FeatureLayer, Extent, SpatialReference, on) {
        var myLyr = new FeatureLayer("//data.farwestern.com/arcgis/rest/services/base/Environment/MapServer/0", {
          mode: FeatureLayer.MODE_ONDEMAND,
          autoGeneralize: true,
          visible: true,
          opacity: 0.5
        });

        myLyr.on('load', initMap);

        function initMap() {
          var mapMain = new Map("mapDiv", {
            basemap: "streets",
            extent: myLyr.fullExtent,
            zoom: 5
          });

          mapMain.addLayer(myLyr);

          mapMain.on("extent-change", function (printExtent) {
            curExtent = mapMain.extent
            var extentString = "";
            extentString = "XMin: " + Math.round(curExtent.xmin) +
              ", YMin: " + Math.round(curExtent.ymin) +
              ", XMax: " + Math.round(curExtent.xmax) +
              ", YMax: " + Math.round(curExtent.ymax);
            dojo.byId("mapInfo").innerHTML = extentString;
          });
        }

      });
  </script>

</head>

<body class="claro">
  <div id="mapDiv" style="width:900px; height:600px;"></div>
  <div id="mapInfo"></div>
</body>

</html>

View solution in original post

RobertScheitlin__GISP · ‎09-25-2015

Shannon,

The problem is that the FeatureLayer is not loaded before you try and get it's full extent. Try this code that loads the FL first and then inits the map:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Resource Loader Test</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">

  <script src="http://js.arcgis.com/3.14/"></script>
  <script>
    require([
      "esri/map",
      "esri/layers/FeatureLayer",
      "esri/geometry/Extent",
      "esri/SpatialReference",
      "dojo/on",
      "dojo/domReady!"
    ],

      function (Map, FeatureLayer, Extent, SpatialReference, on) {
        var myLyr = new FeatureLayer("//data.farwestern.com/arcgis/rest/services/base/Environment/MapServer/0", {
          mode: FeatureLayer.MODE_ONDEMAND,
          autoGeneralize: true,
          visible: true,
          opacity: 0.5
        });

        myLyr.on('load', initMap);

        function initMap() {
          var mapMain = new Map("mapDiv", {
            basemap: "streets",
            extent: myLyr.fullExtent,
            zoom: 5
          });

          mapMain.addLayer(myLyr);

          mapMain.on("extent-change", function (printExtent) {
            curExtent = mapMain.extent
            var extentString = "";
            extentString = "XMin: " + Math.round(curExtent.xmin) +
              ", YMin: " + Math.round(curExtent.ymin) +
              ", XMax: " + Math.round(curExtent.xmax) +
              ", YMax: " + Math.round(curExtent.ymax);
            dojo.byId("mapInfo").innerHTML = extentString;
          });
        }

      });
  </script>

</head>

<body class="claro">
  <div id="mapDiv" style="width:900px; height:600px;"></div>
  <div id="mapInfo"></div>
</body>

</html>

ShannonDeArmond · ‎09-25-2015

That worked perfectly, Robert. Thanks so much!