AnsweredAssumed Answered

IdentifyTask Multiple Sources 4.6 API

Question asked by ClintonLT16 on Apr 2, 2018
Latest reply on Apr 4, 2018 by ClintonLT16

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>

Outcomes