IdentifyTask Multiple Sources 4.6 API

ClintonLunn · ‎04-02-2018

I am looking for a way to perform an identifytask for multiple services using verion 4.6 of the Javascript API.

I am trying to integrate this into an existing project where we can perform the same multiple source identify on a variety of different geometries (mapPoint, selected polygon/s).

My initial thought was to separate the identifyParameters, identifyTask execution and mapping layername to template, and showPopup into a series of promises. This would enable to me to change the parameters and source URL without needing to repeat myself. I also thought it might be a good idea to stick the resulting features into an array that I could then pass to my showPopup function. My current attempt is just trying to get both identifyTasks to work in any form. It doesn't work, but I don't want to come here with no work to show. Here is what I have, any help would be appreciated!

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>IdentifyTask - 4.6</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="https://js.arcgis.com/4.6/esri/css/main.css">
  <script src="https://js.arcgis.com/4.6/"></script>

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

      var identifyTask, params;

      var NGSpopupTemplate = {
    title: 'NGS Control Points: {objectid}',
    content: "<p>(Latitude, Longitude): {dec_lat}, {dec_long}</p>" +
      "<p>County: {county}</p>" +
      "<p>PID: {pid}</p>" +
      "<p>Data Source: <a target='_blank' href={data_srce}>here</a></p>" +
      "<p>Datasheet: <a href={datasheet2}>here</a></p>",
    actions: [{
      title: "Visit NGS website",
      id: "ngsWebsite",
      className: "esri-icon-launch-link-external"
    }]
  };

      // URL to the map service where the identify will be performed
      var soilURL =
        "https://services.arcgisonline.com/arcgis/rest/services/Specialty/Soil_Survey_Map/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 controlPointsURL = "https://admin205.ispa.fsu.edu/arcgis/rest/services/LABINS/Control_Lines_EPSG_3857/MapServer"
    var controlPointsLayer = new FeatureLayer({
      url: controlPointsURL,
      title: "NGS Control Points",
      visible: true,
      //listMode: "hide",
      popupTemplate: NGSpopupTemplate

    });

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

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

      var identifyElements = [];


      view.when(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(soilURL);

        // Set the parameters for the Identify
        params = new IdentifyParameters();
        params.tolerance = 3;
        params.layerIds = [0, 1, 2];
        params.layerOption = "all";
        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) {
          console.log(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 === 'Soil Survey Geographic') {
              feature.popupTemplate = { // autocasts as new PopupTemplate()
                title: "{Map Unit Name}",
                content: "<b>Dominant order:</b> {Dominant Order} ({Dom. Cond. Order %}%)" +
                  "<br><b>Dominant sub-order:</b> {Dominant Sub-Order} ({Dom. Cond. Suborder %}%)" +
                  "<br><b>Dominant Drainage Class:</b> {Dom. Cond. Drainage Class} ({Dom. Cond. Drainage Class %}%)" +
                  "<br><b>Farmland Class:</b> {Farmland Class}"
              };
            }
            else if (layerName === 'State Soil Geographic') {
              feature.popupTemplate = { // autocasts as new PopupTemplate()
                title: "{Map Unit Name}",
                content: "<b>Dominant order:</b> {Dominant Order} ({Dominant %}%)" +
                  "<br><b>Dominant sub-order:</b> {Dominant Sub-Order} ({Dominant Sub-Order %}%)"
              };
            }
            else if (layerName === 'Global Soil Regions') {
              feature.popupTemplate = { // autocasts as new PopupTemplate()
                title: layerName,
                content: "<b>Dominant order:</b> {Dominant Order}" +
                  "<br><b>Dominant sub-order:</b> {Dominant Sub-Order}"
              };
            }
            identifyElements.push(feature);
            return feature;
          });
        }).then(function(response) {
          console.log(identifyElements);
           // Create identify task for the specified map service
            identifyTask = new IdentifyTask(controlPointsURL);

            // Set the parameters for the Identify
            params = new IdentifyParameters();
            params.tolerance = 5;
            params.layerIds = [0];
            params.layerOption = "all";
            params.width = view.width;
            params.height = view.height;
            params.geometry = event.mapPoint;
            params.mapExtent = view.extent;
            console.log(params);
                       
            identifyTask.execute(params).then(function(response2) {

            //console.log(response2);
            var results = response2.results;
            //console.log(results)
            return arrayUtils.map(results, function(result) {
                var feature = result.feature;
                var layerName = result.layerName;

                feature.attributes.layerName = layerName;
                feature.popupTemplate = NGSpopupTemplate;
                //console.log(feature);
                identifyElements.push(feature);
                //console.log(feature);
                return feature;
            })
            })
        //return response2;
        }).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) {
          console.log(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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎04-02-2018

Clinton,

This should get you started. I added dojo promise all instead of the way you were trying to do them sequentially.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>IdentifyTask - 4.6</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="https://js.arcgis.com/4.6/esri/css/main.css">
  <script src="https://js.arcgis.com/4.6/"></script>

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

      var identifyTask, params;

      var NGSpopupTemplate = {
        title: 'NGS Control Points: {objectid}',
        content: "<p>(Latitude, Longitude): {dec_lat}, {dec_long}</p>" +
          "<p>County: {county}</p>" +
          "<p>PID: {pid}</p>" +
          "<p>Data Source: <a target='_blank' href={data_srce}>here</a></p>" +
          "<p>Datasheet: <a href={datasheet2}>here</a></p>",
        actions: [{
          title: "Visit NGS website",
          id: "ngsWebsite",
          className: "esri-icon-launch-link-external"
        }]
      };

      // URL to the map service where the identify will be performed
      var soilURL =
        "https://services.arcgisonline.com/arcgis/rest/services/Specialty/Soil_Survey_Map/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 controlPointsURL = "https://admin205.ispa.fsu.edu/arcgis/rest/services/LABINS/Control_Lines_EPSG_3857/MapServer"
      var controlPointsLayer = new FeatureLayer({
        url: controlPointsURL,
        title: "NGS Control Points",
        visible: true,
        //listMode: "hide",
        popupTemplate: NGSpopupTemplate

      });

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

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

      var identifyElements = [];

      view.when(function() {
        tasks = [];
        allParams = [];

        //Set the tasks array
        tasks.push(new IdentifyTask(soilURL));
        tasks.push(new IdentifyTask(controlPointsURL));

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

        // Set the parameters for the Identify
        params = new IdentifyParameters();
        params.tolerance = 5;
        params.layerIds = [0];
        params.layerOption = "all";
        params.width = view.width;
        params.height = view.height;
        params.returnGeometry = true;
        allParams.push(params);

        // executeIdentifyTask() is called each time the view is clicked
        on(view, "click", executeIdentifyTask);
      });

      // Executes each time the view is clicked
      function executeIdentifyTask(event) {
        promises = [];
        // Set the geometry to the location of the view click
        allParams[0].geometry = allParams[1].geometry = event.mapPoint;
        allParams[0].mapExtent = allParams[1].mapExtent = view.extent;
        for (i = 0; i < tasks.length; i++) {
          promises.push(tasks[i].execute(allParams[i]));
        }
        var iPromises = new all(promises);

        iPromises.then(function (rArray) {
          arrayUtils.map(rArray, 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 === 'Soil Survey Geographic') {
                feature.popupTemplate = { // autocasts as new PopupTemplate()
                  title: "{Map Unit Name}",
                  content: "<b>Dominant order:</b> {Dominant Order} ({Dom. Cond. Order %}%)" +
                    "<br><b>Dominant sub-order:</b> {Dominant Sub-Order} ({Dom. Cond. Suborder %}%)" +
                    "<br><b>Dominant Drainage Class:</b> {Dom. Cond. Drainage Class} ({Dom. Cond. Drainage Class %}%)" +
                    "<br><b>Farmland Class:</b> {Farmland Class}"
                };
              } else if (layerName === 'State Soil Geographic') {
                feature.popupTemplate = { // autocasts as new PopupTemplate()
                  title: "{Map Unit Name}",
                  content: "<b>Dominant order:</b> {Dominant Order} ({Dominant %}%)" +
                    "<br><b>Dominant sub-order:</b> {Dominant Sub-Order} ({Dominant Sub-Order %}%)"
                };
              } else if (layerName === 'Global Soil Regions') {
                feature.popupTemplate = { // autocasts as new PopupTemplate()
                  title: layerName,
                  content: "<b>Dominant order:</b> {Dominant Order}" +
                    "<br><b>Dominant sub-order:</b> {Dominant Sub-Order}"
                };
              }
              identifyElements.push(feature);
            });
          })
          showPopup(identifyElements);
        });

        // Shows the results of the Identify in a popup once the promise is resolved
        function showPopup(response) {
          console.log(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 · ‎04-02-2018

Clinton,

This should get you started. I added dojo promise all instead of the way you were trying to do them sequentially.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>IdentifyTask - 4.6</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="https://js.arcgis.com/4.6/esri/css/main.css">
  <script src="https://js.arcgis.com/4.6/"></script>

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

      var identifyTask, params;

      var NGSpopupTemplate = {
        title: 'NGS Control Points: {objectid}',
        content: "<p>(Latitude, Longitude): {dec_lat}, {dec_long}</p>" +
          "<p>County: {county}</p>" +
          "<p>PID: {pid}</p>" +
          "<p>Data Source: <a target='_blank' href={data_srce}>here</a></p>" +
          "<p>Datasheet: <a href={datasheet2}>here</a></p>",
        actions: [{
          title: "Visit NGS website",
          id: "ngsWebsite",
          className: "esri-icon-launch-link-external"
        }]
      };

      // URL to the map service where the identify will be performed
      var soilURL =
        "https://services.arcgisonline.com/arcgis/rest/services/Specialty/Soil_Survey_Map/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 controlPointsURL = "https://admin205.ispa.fsu.edu/arcgis/rest/services/LABINS/Control_Lines_EPSG_3857/MapServer"
      var controlPointsLayer = new FeatureLayer({
        url: controlPointsURL,
        title: "NGS Control Points",
        visible: true,
        //listMode: "hide",
        popupTemplate: NGSpopupTemplate

      });

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

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

      var identifyElements = [];

      view.when(function() {
        tasks = [];
        allParams = [];

        //Set the tasks array
        tasks.push(new IdentifyTask(soilURL));
        tasks.push(new IdentifyTask(controlPointsURL));

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

        // Set the parameters for the Identify
        params = new IdentifyParameters();
        params.tolerance = 5;
        params.layerIds = [0];
        params.layerOption = "all";
        params.width = view.width;
        params.height = view.height;
        params.returnGeometry = true;
        allParams.push(params);

        // executeIdentifyTask() is called each time the view is clicked
        on(view, "click", executeIdentifyTask);
      });

      // Executes each time the view is clicked
      function executeIdentifyTask(event) {
        promises = [];
        // Set the geometry to the location of the view click
        allParams[0].geometry = allParams[1].geometry = event.mapPoint;
        allParams[0].mapExtent = allParams[1].mapExtent = view.extent;
        for (i = 0; i < tasks.length; i++) {
          promises.push(tasks[i].execute(allParams[i]));
        }
        var iPromises = new all(promises);

        iPromises.then(function (rArray) {
          arrayUtils.map(rArray, 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 === 'Soil Survey Geographic') {
                feature.popupTemplate = { // autocasts as new PopupTemplate()
                  title: "{Map Unit Name}",
                  content: "<b>Dominant order:</b> {Dominant Order} ({Dom. Cond. Order %}%)" +
                    "<br><b>Dominant sub-order:</b> {Dominant Sub-Order} ({Dom. Cond. Suborder %}%)" +
                    "<br><b>Dominant Drainage Class:</b> {Dom. Cond. Drainage Class} ({Dom. Cond. Drainage Class %}%)" +
                    "<br><b>Farmland Class:</b> {Farmland Class}"
                };
              } else if (layerName === 'State Soil Geographic') {
                feature.popupTemplate = { // autocasts as new PopupTemplate()
                  title: "{Map Unit Name}",
                  content: "<b>Dominant order:</b> {Dominant Order} ({Dominant %}%)" +
                    "<br><b>Dominant sub-order:</b> {Dominant Sub-Order} ({Dominant Sub-Order %}%)"
                };
              } else if (layerName === 'Global Soil Regions') {
                feature.popupTemplate = { // autocasts as new PopupTemplate()
                  title: layerName,
                  content: "<b>Dominant order:</b> {Dominant Order}" +
                    "<br><b>Dominant sub-order:</b> {Dominant Sub-Order}"
                };
              }
              identifyElements.push(feature);
            });
          })
          showPopup(identifyElements);
        });

        // Shows the results of the Identify in a popup once the promise is resolved
        function showPopup(response) {
          console.log(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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

ClintonLunn · ‎04-04-2018

Robert,

With a little bit of tweaking, this worked perfectly. It is also easily expandable to 2+ sources.

Thank you very much!

RichardBuford · ‎05-20-2020

Robert Scheitlin, GISP‌, Clinton Lunn‌

I have a similar issue coming from jsapi 3.x to 4.x we need the search widget to select only one feature regardless of what is typed into the search box, we will be using two different locators. I have an example of a fiddle https://jsfiddle.net/timw1984/d93rzj8g/1/ and below the code from 3.x regardless if you search or click it fires two functions the executeIdentifyTaskClick is on map click and the other is on selection of search widget below you can see my 4.x working copy.

ArcGIS Javascript API 3.13

<!DOCTYPE html>
<html> 
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Identify with Popup</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.13/esri/css/esri.css">
    <style>
      html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
	        #search {
        display: block;
        position: absolute;
        z-index: 2;
        top: 20px;
        left: 75px;
      } 
    </style>

    <script src="https://js.arcgis.com/3.13/"></script>
    <script>
var map;

      require([
        "esri/map",
        "esri/arcgis/utils",
        "esri/InfoTemplate",
        "esri/layers/ArcGISDynamicMapServiceLayer", //add dynamic layer  
        "esri/layers/FeatureLayer", //add feature layer
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/tasks/IdentifyTask",
        "esri/tasks/IdentifyParameters",
        "esri/dijit/Popup",
        "dojo/_base/array",
        "esri/Color",
        "dojo/dom-construct",
        "esri/dijit/Geocoder",
        "dojo/domReady!"
      ], function (
        Map, arcgisUtils, InfoTemplate, ArcGISDynamicMapServiceLayer, FeatureLayer, SimpleFillSymbol,
        SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup,
        arrayUtils, Color, domConstruct,Geocoder
      ) {

        var identifyTask, identifyParams, NeededPoint; //what is NeededPoint? //Ignore, I used this for testing

        var popup = new Popup({
          fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
              new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))
        }, domConstruct.create("div"));

        map = new Map("map", {
          basemap: "gray",
          center: [-99, 31.5],
          zoom: 6,
          infoWindow: popup
        });

        map.on("load", mapReady);
                  
        //geocoder  
        geocoder = new Geocoder({
          map: map,
          autoComplete: true
          },"search");
          geocoder.startup();

        geocoder.on("select", executeIdentifyTask);
          
        //add dynamic layer
        var parcelsURL = "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer";  
        map.addLayer(new ArcGISDynamicMapServiceLayer(parcelsURL,  
          { opacity: 0.55 }));  
          
        //add feature layer  
        var CensusURL = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";  
        map.addLayer(new FeatureLayer(CensusURL,  
          { opacity: 0.55 }));  
  
          
          function mapReady () {  
          map.on("click", executeIdentifyTaskClick );  
          //create identify tasks and setup parameters  
          identifyTask = new IdentifyTask(CensusURL);  
    
          identifyParams = new IdentifyParameters();  
          identifyParams.tolerance = 3;  
          identifyParams.returnGeometry = true;  
          identifyParams.layerIds = [ 1, 2,3];  
          identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;  
          identifyParams.width = map.width;  
          identifyParams.height = map.height;  
        }  
  
  
        function executeIdentifyTask (event) {  
          identifyParams.geometry = event.result.feature.geometry;  
          identifyParams.mapExtent = event.result.extent;  
  
  
          var deferred = identifyTask  
            .execute(identifyParams)  
            .addCallback(function (response) {  
              // response is an array of identify result objects  
              // Let's return an array of features.  
              return arrayUtils.map(response, function (result) {  
                var feature = result.feature;  
                var layerName = result.layerName;  
  
  
                feature.attributes.layerName = layerName;  
                if (layerName === 'Census Block Group') {  
                  var CensusTemplate = new InfoTemplate("",  
                    "2000 Block population: ${POP2000} ");  
                  feature.setInfoTemplate(CensusTemplate);  
                }  
                else if (layerName === 'states') {  

                  var CensusTemplate = new InfoTemplate("",  
                     "2000 State population: ${POP2000} ");  
                  feature.setInfoTemplate(CensusTemplate);  
                }      else if (layerName === 'Detailed Counties') {  
 
                  var CensusTemplate = new InfoTemplate("",  
                     "2000 County population: ${POP2000} ");  
                  feature.setInfoTemplate(CensusTemplate);  
                }  
                return feature;  
              });  
            });  
  
  
          // InfoWindow expects an array of features from each deferred  
          // object that you pass. If the response from the task execution  
          // above is not an array of features, then you need to add a callback  
          // like the one above to post-process the response and return an  
          // array of features.  
          map.infoWindow.setFeatures([deferred]);  
          map.infoWindow.show(event.result.feature.geometry);  
        }  
          
          
          function executeIdentifyTaskClick (event) {  
                identifyParams.geometry = event.mapPoint;  
                identifyParams.mapExtent = map.extent;  
  
  
          var deferred = identifyTask  
            .execute(identifyParams)  
            .addCallback(function (response) {  
              // response is an array of identify result objects  
              // Let's return an array of features.  
              return arrayUtils.map(response, function (result) {  
                var feature = result.feature;  
                var layerName = result.layerName;  
  
  
                feature.attributes.layerName = layerName;  
                if (layerName === 'Census Block Group') {  
                  var CensusTemplate = new InfoTemplate("",  
                    "2000 Block population: ${POP2000} ");  
                  feature.setInfoTemplate(CensusTemplate);  
                }  
                else if (layerName === 'states') {  

                  var CensusTemplate = new InfoTemplate("",  
                     "2000 State population: ${POP2000} ");  
                  feature.setInfoTemplate(CensusTemplate);  
                }      else if (layerName === 'Detailed Counties') {  
 
                  var CensusTemplate = new InfoTemplate("",  
                     "2000 County population: ${POP2000} ");  
                  feature.setInfoTemplate(CensusTemplate);  
                }  
                return feature;  
              });  
            });  
  
  
          // InfoWindow expects an array of features from each deferred  
          // object that you pass. If the response from the task execution  
          // above is not an array of features, then you need to add a callback  
          // like the one above to post-process the response and return an  
          // array of features.  
          map.infoWindow.setFeatures([deferred]);  
          map.infoWindow.show(event.mapPoint);  
        }  
      });

    </script>
  </head>
  
  <body>
    <div id="search"></div>
    <div id="map"></div>
  </body>

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

ArcGIS Javascript API 4.15

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>IdentifyTask - 4.15</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="https://js.arcgis.com/4.15/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.15/"></script>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/tasks/IdentifyTask",
        "esri/tasks/support/IdentifyParameters",
        "esri/widgets/Search",
        "esri/tasks/Locator",
        "esri/layers/FeatureLayer",
        "dojo/_base/array",
        "dojo/on",
        "dojo/dom",
        "dojo/promise/all",
        "dojo/domReady!"
      ], function(
        Map,
        MapView,
        IdentifyTask,
        IdentifyParameters,
        Search,
        Locator,
        FeatureLayer,
        arrayUtils,
        on,
        dom,
        all
      ) {
        var identifyTask, params;

        // URL to the map service where the identify will be performed
        var soilURL =
          "https://jcgis.jacksongov.org/arcgis/rest/services/Cadastral/ParcelViewer/MapServer";

        var map = new Map({
          basemap: "streets"
        });
        
        var parcelsLayer = new FeatureLayer({
				url: "https://jcgis.jacksongov.org/portal/rest/services/Hosted/Parcels/FeatureServer/0",
				outFields: ["Name"],
				minScale: 5000,
				maxScale: 0,
				title: "Tax Parcels",
			});

        var view = new MapView({
          map: map,
          container: "viewDiv",
          center: [-94.24, 39.01],
				  zoom: 10
        });

        var searchWidget = new Search({
          view: view,
          allPlaceholder: "District or Senator",
          sources: [
            {
              locator: new Locator({
                url:
                  "https://jcgis.jacksongov.org/portal/rest/services/ParcelsTest/GeocodeServer"
              }),
              name: "Parcel",
              placeholder: "e.g. 123 Main St, City"
            },
            {
              locator: new Locator({
                url:
                  "https://jcgis.jacksongov.org/portal/rest/services/ParcelFabric/SitusAddresses_Locator/GeocodeServer"
              }),
              name: "Address",
              placeholder: "e.g. 123 Main St, City"
            }
          ]
        });
        
        map.add(parcelsLayer);

        searchWidget.on("select-result", executeIdentifyTask);

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

          // Create identify task for the specified map service
          identifyTask = new IdentifyTask(parcelsLayer);

          // Set the parameters for the Identify
          params = new IdentifyParameters();
          params.tolerance = 3;
          params.returnGeometry = true;
          params.layerIds = [18];
          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.result.feature.geometry;
          alert("1");
          params.mapExtent = event.result.extent;
          alert("2");
          alert("3");
  
          identifyTask  
            .execute(params)  
            .then(function(response) {
              
              // response is an array of identify result objects  
              // Let's return an array of features. 
              
              return arrayUtils.map(response, function (result) {  
                var feature = result.feature;  
                var layerName = result.layerName;  
                alert("1");
                feature.attributes.layerName = layerName;  
                if (layerName === "Tax") {
                  feature.popupTemplate = {
                    // autocasts as new PopupTemplate()
                    title: "{PropertyID}"
                  };
                }
                alert("I am an alert box!");
                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.result.feature.geometry
              });
            }
            document.getElementById("viewDiv").style.cursor = "auto";
            
          }
        }

        function executeIdentifyTaskClick(event) {
          // Set the geometry to the location of the view click
          params.geometry = event.mapPoint;
          params.mapExtent = view.extent;
          document.getElementById("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 results.map(function(result) {
                var feature = result.feature;
                var layerName = result.layerName;

                feature.attributes.layerName = layerName;
                if (layerName === "Tax") {
                  feature.popupTemplate = {
                    // autocasts as new PopupTemplate()
                    title: "{PropertyID}"
                  };
                }
                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
              });
            }
            document.getElementById("viewDiv").style.cursor = "auto";
          }
        }

        // Add the search widget to the top left corner of the view
        view.ui.add(searchWidget, {
          position: "top-right"
        });
      });
    </script>
  </head>

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

Any help would be much appreciated.

RobertScheitlin__GISP · ‎05-20-2020

Richard,

In your 4.x code you are passing a FeatureLayer class to the IdentifyTask constructor. There is no support for this. The IdentifyTask constructor is expecting a simple Object with a url property that point to a whole map service and not a specific layer of a service. Next in your identifyParameters you have params.layerIds = [18];. There is no 19 layer in parcelsLayer service...