IdentifyTask on MapImageLayer in 4.2 without success promise

LoriEmerson_McCormack · ‎01-12-2017

I am using the IdentifyTask sample for 4.2 at https://developers.arcgis.com/javascript/latest/sample-code/tasks-identify/index.html

However, I am using a MapImageLayer as my URL and when I try to perform the identifyTask.execute(identifyParams), the success promise isn't working. All I get is the "wait" cursor.

I also tried defining my sublayers within my new MapImageLayer with id: values set as the same index values from the map service.

The map service is in a different spatial reference than the ESRI basemap, if that makes any difference.

Does identifyTask work with a MapImageLayer?

RobertScheitlin__GISP · ‎01-12-2017

Lori,

Here is the sample using a MapImageLayer and it work fine:

<!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.2</title>

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

    .esri-popup .esri-popup-header .esri-title {
      font-size: 18px;
      font-weight: bolder;
    }

    .esri-popup .esri-popup-body .esri-popup-content {
      font-size: 14px;
    }
  </style>

  <link rel="stylesheet" href="http://js.arcgis.com/4.2/esri/css/main.css">
  <script src="http://js.arcgis.com/4.2/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/TileLayer",
      "esri/layers/MapImageLayer",
      "esri/tasks/IdentifyTask",
      "esri/tasks/support/IdentifyParameters",
      "dojo/_base/array",
      "dojo/on",
      "dojo/dom",
      "dojo/domReady!"
    ], function(
      Map, MapView, TileLayer, MapImageLayer,
      IdentifyTask, IdentifyParameters,
      arrayUtils, on, dom
    ) {

      var identifyTask, params;

      var layer = new MapImageLayer({
        url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
        sublayers: [
        {
          id: 2,
          visible: true
        }, {
          id: 1,
          visible: true
        }, {
          id: 0,
          visible: true
        }]
      });

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

      var view = new MapView({
        map: map,
        container: "viewDiv",
        center: [-120.174, 47.255],
        zoom: 7
      });

      view.then(function() {
        // executeIdentifyTask() is called each time the view is clicked
        on(view, "click", executeIdentifyTask);

        // Create identify task for the specified map service
        identifyTask = new IdentifyTask("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer");

        // Set the parameters for the Identify
        params = new IdentifyParameters();
        params.tolerance = 3;
        params.layerIds = [0, 1, 2];
        params.layerOption = "visible";
        params.width = view.width;
        params.height = view.height;
      });

      // Executes each time the view is clicked
      function executeIdentifyTask(event) {
        // Set the geometry to the location of the view click
        params.geometry = event.mapPoint;
        params.mapExtent = view.extent;
        dom.byId("viewDiv").style.cursor = "wait";

        // This function returns a promise that resolves to an array of features
        // A custom popupTemplate is set for each feature based on the layer it
        // originates from
        identifyTask.execute(params).then(function(response) {

          var results = response.results;

          return arrayUtils.map(results, function(result) {

            var feature = result.feature;
            var layerName = result.layerName;

            feature.attributes.layerName = layerName;
            if (layerName === 'Cities') {
              feature.popupTemplate = { // autocasts as new PopupTemplate()
                title: "{AREANAME}",
                content: "<b>{AREANAME},{ST}</b>" +
                  "<br><b>Population in 2000:</b> {POP2000}" +
                  "<br><b>Capital:</b> {CAPITAL}"
              };
            }
            else if (layerName === 'Highways') {
              feature.popupTemplate = { // autocasts as new PopupTemplate()
                title: "{ADMN_CLASS}",
                content: "<b>Name:</b> {ROUTE}" +
                  "<br><b>Type:</b> {TYPE}" +
                  "<br><b>Toll Road:</b> {TOLL_RD}" +
                  "<br><b>Length:</b> {LENGTH}"
              };
            }
            else if (layerName === 'States') {
              feature.popupTemplate = { // autocasts as new PopupTemplate()
                title: "{STATE_NAME}",
                content: "<b>Sub Region:</b> {SUB_REGION}" +
                  "<br><b>Population in 2000:</b> {POP2000}" +
                  "<br><b>Sq Miles:</b> {POP00_SQMI}"
              };
            }
            return feature;
          });
        }).then(showPopup); // Send the array of features to showPopup()

        // Shows the results of the Identify in a popup once the promise is resolved
        function showPopup(response) {
          if (response.length > 0) {
            view.popup.open({
              features: response,
              location: event.mapPoint
            });
          }
          dom.byId("viewDiv").style.cursor = "auto";
        }
      }
    });
  </script>
</head>

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

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

View solution in original post

RobertScheitlin__GISP · ‎01-12-2017

Lori,

Here is the sample using a MapImageLayer and it work fine:

<!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.2</title>

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

    .esri-popup .esri-popup-header .esri-title {
      font-size: 18px;
      font-weight: bolder;
    }

    .esri-popup .esri-popup-body .esri-popup-content {
      font-size: 14px;
    }
  </style>

  <link rel="stylesheet" href="http://js.arcgis.com/4.2/esri/css/main.css">
  <script src="http://js.arcgis.com/4.2/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/TileLayer",
      "esri/layers/MapImageLayer",
      "esri/tasks/IdentifyTask",
      "esri/tasks/support/IdentifyParameters",
      "dojo/_base/array",
      "dojo/on",
      "dojo/dom",
      "dojo/domReady!"
    ], function(
      Map, MapView, TileLayer, MapImageLayer,
      IdentifyTask, IdentifyParameters,
      arrayUtils, on, dom
    ) {

      var identifyTask, params;

      var layer = new MapImageLayer({
        url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
        sublayers: [
        {
          id: 2,
          visible: true
        }, {
          id: 1,
          visible: true
        }, {
          id: 0,
          visible: true
        }]
      });

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

      var view = new MapView({
        map: map,
        container: "viewDiv",
        center: [-120.174, 47.255],
        zoom: 7
      });

      view.then(function() {
        // executeIdentifyTask() is called each time the view is clicked
        on(view, "click", executeIdentifyTask);

        // Create identify task for the specified map service
        identifyTask = new IdentifyTask("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer");

        // Set the parameters for the Identify
        params = new IdentifyParameters();
        params.tolerance = 3;
        params.layerIds = [0, 1, 2];
        params.layerOption = "visible";
        params.width = view.width;
        params.height = view.height;
      });

      // Executes each time the view is clicked
      function executeIdentifyTask(event) {
        // Set the geometry to the location of the view click
        params.geometry = event.mapPoint;
        params.mapExtent = view.extent;
        dom.byId("viewDiv").style.cursor = "wait";

        // This function returns a promise that resolves to an array of features
        // A custom popupTemplate is set for each feature based on the layer it
        // originates from
        identifyTask.execute(params).then(function(response) {

          var results = response.results;

          return arrayUtils.map(results, function(result) {

            var feature = result.feature;
            var layerName = result.layerName;

            feature.attributes.layerName = layerName;
            if (layerName === 'Cities') {
              feature.popupTemplate = { // autocasts as new PopupTemplate()
                title: "{AREANAME}",
                content: "<b>{AREANAME},{ST}</b>" +
                  "<br><b>Population in 2000:</b> {POP2000}" +
                  "<br><b>Capital:</b> {CAPITAL}"
              };
            }
            else if (layerName === 'Highways') {
              feature.popupTemplate = { // autocasts as new PopupTemplate()
                title: "{ADMN_CLASS}",
                content: "<b>Name:</b> {ROUTE}" +
                  "<br><b>Type:</b> {TYPE}" +
                  "<br><b>Toll Road:</b> {TOLL_RD}" +
                  "<br><b>Length:</b> {LENGTH}"
              };
            }
            else if (layerName === 'States') {
              feature.popupTemplate = { // autocasts as new PopupTemplate()
                title: "{STATE_NAME}",
                content: "<b>Sub Region:</b> {SUB_REGION}" +
                  "<br><b>Population in 2000:</b> {POP2000}" +
                  "<br><b>Sq Miles:</b> {POP00_SQMI}"
              };
            }
            return feature;
          });
        }).then(showPopup); // Send the array of features to showPopup()

        // Shows the results of the Identify in a popup once the promise is resolved
        function showPopup(response) {
          if (response.length > 0) {
            view.popup.open({
              features: response,
              location: event.mapPoint
            });
          }
          dom.byId("viewDiv").style.cursor = "auto";
        }
      }
    });
  </script>
</head>

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

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