Setting Map Extent Based on Layer Extent

deleted-user-1_r2dgYuILKY · ‎01-04-2018

I want to set my map's extent to the extent of a feature layer. This layer will be updated regularly and the extent will be different every time. I'm following this example, and substituted my layer. It's not showing up, and the extent is far to the north of my feature. I'm getting this error in the console: Map: Geometry (wkid: 3395) cannot be converted to spatial reference of the map (wkid: 102100). I've tried setting the spatial reference of the map and the layer, to no avail.

<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.23/dijit/themes/claro/claro.css">  
  <link rel="stylesheet" href="http://js.arcgis.com/3.23/esri/css/esri.css">  
  
  <script src="http://js.arcgis.com/3.23/"></script>  
  <script>  
    require([  
      "esri/map",  
      "esri/layers/FeatureLayer",            
      "esri/geometry/Extent",  
      "esri/SpatialReference",  
      "dojo/on",  
      "dojo/domReady!"  
    ],  
  
      function (Map, FeatureLayer, Extent, SpatialReference, on) {  
       
       var typhoonOutlineURL = "http://<ourserver>/arcgis/rest/services/typhoon_outlines/MapServer/0";
       
        var myLyr = new FeatureLayer(typhoonOutlineURL, {  
          mode: FeatureLayer.MODE_ONDEMAND,  
           
        });  
  
        myLyr.on('load', initMap);  
          
          
  
        function initMap() {  
          var mapMain = new Map("mapDiv", {  
            basemap: "dark-gray",  
            extent: myLyr.fullExtent,  
            zoom: 3
          
          });  
  
          mapMain.addLayer(myLyr);  
  
            
        }  
  
      });  
  </script>  
  
</head>  
  
<body class="claro">  
  <div id="mapDiv" style="width:900px; height:600px;"></div>  
  <div id="mapInfo"></div>  
</body>  
  
</html>  ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎01-05-2018

Levi,

Here is the Sample again using a different map service layer and it still works for me:

<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.23/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.23/esri/css/esri.css">

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

      function(Map, FeatureLayer, Extent, SpatialReference, Query, on) {
        var typhoonOutlineURL = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/MtBaldy_BaseMap/MapServer/0";
        var myLyr = new FeatureLayer(typhoonOutlineURL, {
          mode: FeatureLayer.MODE_ONDEMAND
        });

        myLyr.on('load', initMap);

        function initMap() {
          var query = new Query();
          query.where = "1=1";
          query.outSpatialReference = new SpatialReference(102100);
          myLyr.queryExtent(query, function(result){
            var mapMain = new Map("mapDiv", {
              basemap: "dark-gray",
              extent: result.extent
            });
            mapMain.addLayer(myLyr);
          })
        }
      });
  </script>

</head>

<body class="claro">
  <div id="mapDiv" style="width:100%; height:100%;"></div>
  <div id="mapInfo"></div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎01-04-2018

Levi,

The maps extent will only take a WGS84 or WebMercator extent if you are using an esri basemap (thus the warning). You can use queryExtent to get the layers extent in 102100 though:

<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.23/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.23/esri/css/esri.css">

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

      function(Map, FeatureLayer, Extent, SpatialReference, Query, on) {
        var typhoonOutlineURL = "http://sampleserver6.arcgisonline.com/ArcGIS/rest/services/Water_Network/MapServer/20";
        var myLyr = new FeatureLayer(typhoonOutlineURL, {
          mode: FeatureLayer.MODE_ONDEMAND,
          minScale: 0
        });

        myLyr.on('load', initMap);

        function initMap() {
          var query = new Query();
          query.where = "1=1";
          query.outSpatialReference = new SpatialReference(102100);
          myLyr.queryExtent(query, function(result){
            var mapMain = new Map("mapDiv", {
              basemap: "dark-gray",
              extent: result.extent
            });
            mapMain.addLayer(myLyr);
          })
        }
      });
  </script>

</head>

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

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

deleted-user-1_r2dgYuILKY · ‎01-04-2018

OK, this works, but the layer is still not visible. I can also just change the projection to web mercator before I publish, no?

RobertScheitlin__GISP · ‎01-04-2018

Levi,

No that layer had a min scale so I have updated the code to override the minScale.

deleted-user-1_r2dgYuILKY · ‎01-04-2018

I did the same with my layer and still can't see it.

RobertScheitlin__GISP · ‎01-04-2018

Strange. What is the layer minScale and maxScale in the Rest directory?

deleted-user-1_r2dgYuILKY · ‎01-04-2018

It was set before publishing to show at all scale levels, so there isn't a min or max scale. There is just an extent

Extent:

XMin: 5029414.594027907

YMin: -3514203.489426465

XMax: 6130364.357942293

YMax: -1622093.9552736997

Spatial Reference: 3395 (3395)

RobertScheitlin__GISP · ‎01-04-2018

Then that is not the issue... Hmm

EvelynHernandez · ‎01-05-2018

What u cannot see? i see this:

RobertScheitlin__GISP · ‎01-05-2018

Levi,

Here is the Sample again using a different map service layer and it still works for me:

<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.23/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.23/esri/css/esri.css">

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

      function(Map, FeatureLayer, Extent, SpatialReference, Query, on) {
        var typhoonOutlineURL = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/MtBaldy_BaseMap/MapServer/0";
        var myLyr = new FeatureLayer(typhoonOutlineURL, {
          mode: FeatureLayer.MODE_ONDEMAND
        });

        myLyr.on('load', initMap);

        function initMap() {
          var query = new Query();
          query.where = "1=1";
          query.outSpatialReference = new SpatialReference(102100);
          myLyr.queryExtent(query, function(result){
            var mapMain = new Map("mapDiv", {
              basemap: "dark-gray",
              extent: result.extent
            });
            mapMain.addLayer(myLyr);
          })
        }
      });
  </script>

</head>

<body class="claro">
  <div id="mapDiv" style="width:100%; height:100%;"></div>
  <div id="mapInfo"></div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍