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", {

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.

  • 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 Jul 3 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 Jul 3 at 20:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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