1

I'm trying to get an extent to work on a web map app but keep getting an error when trying to pass the extent parameter:

<!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>Simple Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="https://js.arcgis.com/3.28/"></script>
    <script>
      var map;

      require([
              "esri/map",
              "esri/layers/FeatureLayer",
              "dojo/domReady!",
              "esri/geometry/Extent", 
              "esri/SpatialReference"], 
      function(
              Map,
              FeatureLayer,
              Extent,
              SpatialReference
              ) {

      var extent = new esri.geometry.Extent(-121.467,37.454,-122.3737,37.9067, new SpatialReference({ wkid:4326 }));

        map = new Map("map", {
          extent: extent,
          basemap: "topo",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
          center: [-121.91, 37.65], // longitude, latitude 
          zoom: 10
        });

      var countyBoundary = new FeatureLayer("https://services5.arcgis.com/ROBnTHSNjoZ2Wm1P/arcgis/rest/services/County_Boundary/FeatureServer/0");
      map.addLayer(countyBoundary);


      });
    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>

The error returned is:

a.equals is not a function

And is happening right at map = new Map("map", {

Improve this question

1 Answer 1

Reset to default
2

You have a problem in the order of the dojo require statements.

The following order is the right one, putting the domReady at the end: 

   require([
      "esri/map",
      "esri/layers/FeatureLayer",                 
      "esri/geometry/Extent", 
      "esri/SpatialReference",
      "dojo/domReady!",], 
  function(
      Map,
      FeatureLayer,
      Extent,
      SpatialReference
  ) {

And your code will be the following:

<!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>Simple Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="https://js.arcgis.com/3.28/"></script>
    <script>
      var map;

      require([
              "esri/map",
              "esri/layers/FeatureLayer",                 
              "esri/geometry/Extent", 
              "esri/SpatialReference",
              "dojo/domReady!",], 
      function(
              Map,
              FeatureLayer,
              Extent,
              SpatialReference
              ) {

      var extent = new Extent(-121.467,37.454,-122.3737,37.9067, new SpatialReference({ wkid:4326 }));

        map = new Map("map", {
          extent: extent,
          basemap: "topo",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
          center: [-121.91, 37.65], // longitude, latitude 
          zoom: 10
        });

      var countyBoundary = new FeatureLayer("https://services5.arcgis.com/ROBnTHSNjoZ2Wm1P/arcgis/rest/services/County_Boundary/FeatureServer/0");
      map.addLayer(countyBoundary);


      });
    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>

Note: Also consider to remove the center and the zoom if you are passing an extent to the Map constructor.

Improve this answer
2
  • 1
    Thanks Katah. It seems that this only loads the map on the extent specified and doesn't actually bound the map to that extent. I'm trying to find a way to implement a bounding box so users cannot pan beyond the extents of a county border. The code, however, is working with your solution, that is, I'm not getting any errors. Unfortunately it's not the right code to implement a bounding box.
    – geoJshaun
    Commented Jul 3, 2019 at 16:06
  • I think you cannot avoid that directly. An Idea is to connect to the onExtentChange event and modify the extent accordingly. There is also a map property called GeographicExtent, but I didn't test it.
    – Katah
    Commented Jul 3, 2019 at 20:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.