ArcGIS JavaScript 3.28 extent not working

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

Question 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.

Question 3

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.

Question 4

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 Katah 1,0707 silver badges12 bronze badges · Accepted Answer · 2019-07-03 08:49:00Z

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.

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.
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.

Stack Exchange Network

ArcGIS JavaScript 3.28 extent not working

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

ArcGIS JavaScript 3.28 extent not working

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions