5

I want to use the Identify Task with the ArcGIS JavaScript API, similar to this example. I am getting the following errors when I try to add my map service to the code.

Uncaught TypeError: Cannot read property 'lods' of null

and

Uncaught TypeError: Cannot read property 'pause' of null

I parsed down the code I am using to what is below.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Identify Task - 4.3</title>

<style>
html,
body,
#viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

</style>

<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
  <script>
  require([
    "esri/Map",
    "esri/views/MapView",
  "esri/layers/TileLayer",
  "esri/tasks/IdentifyTask",
  "esri/tasks/support/IdentifyParameters",
  "dojo/_base/array",
  "dojo/on",
  "dojo/dom",
  "dojo/domReady!"
], function(
  Map, MapView, TileLayer,
  IdentifyTask, IdentifyParameters,
  arrayUtils, on, dom
) {

  var identifyTask, params;

  // URL to the map service where the identify will be performed
  // in the stackexchange post I am using an ArcGIS map service that exhibits same behavior as my URL
  var soilURL =
    "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer";

  // Add the map service as a TileLayer for fast rendering
  // Tile layers are composed of non-interactive images. For that reason we'll
  // use IdentifyTask to query the service to add interactivity to the app
  var parcelsLyr = new TileLayer({
    url: soilURL,
    opacity: 0.85
  });

  var map = new Map({
    basemap: "osm"
  });
  map.add(parcelsLyr);

  var view = new MapView({
    map: map,
    container: "viewDiv",
    center: [-118.3, 34],
    zoom: 15,
   minZoom:12,
   maxZoom:18
  });


  });
</script>
</head>

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

Any ideas on how I can get the map service to display and not throw the errors?

Improve this question

1 Answer 1

Reset to default
8

The major problem I see is that you are trying to use a MapService as a TileLayer. Since the MapService you specified is not tiled, try using the MapImageLayer type. This will stop throwing the Uncaught TypeError: Cannot read property 'lods' of null (because tiles have Levels of Detail).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Identify Task - 4.3</title>

<style>
html,
body,
#viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

</style>

<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
  <script>
  require(["esri/config",
    "esri/Map",
    "esri/views/MapView",
  "esri/layers/MapImageLayer",
  "esri/tasks/IdentifyTask",
  "esri/tasks/support/IdentifyParameters",
  "dojo/_base/array",
  "dojo/on",
  "dojo/dom",
  "dojo/domReady!"
], function(
  esriConfig, Map, MapView, MapImageLayer,
  IdentifyTask, IdentifyParameters,
  arrayUtils, on, dom
) {
  esriConfig.request.corsEnabledServers.push("sampleserver1.arcgisonline.com:6443");
  var identifyTask, params;

  // URL to the map service where the identify will be performed
  // in the stackexchange post I am using an ArcGIS map service that exhibits same behavior as my URL
  var soilURL =
    "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer";

  // Add the map service as a TileLayer for fast rendering
  // Tile layers are composed of non-interactive images. For that reason we'll
  // use IdentifyTask to query the service to add interactivity to the app
  var soilsLyr = new MapImageLayer({
    url: soilURL,
    opacity: 0.85
  });

  var map = new Map({
    basemap: "osm"
  });
  map.add(soilsLyr);

  var view = new MapView({
    map: map,
    container: "viewDiv",
    center: [-118.3, 34],
    zoom: 15,
   minZoom:12,
   maxZoom:18
  });


  });
</script>
</head>

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

Try building your IdentifyTask against the soilsLyr

Improve this answer
1
  • I changed the TileLayer to MapImageLayer and made the call to new MapImageLayer and it works now. Thank you!
    – Patty Jula
    May 22, 2017 at 22:06

Your Answer

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

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