identify all & highlight in 4.1

1095
4
Jump to solution
11-09-2016 07:04 AM
jamesa
by
New Contributor III

Hello All,

For identify sample here, can you combine all the identify results in one content page? Also, just highlight the layer 0?

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/sandbox.html?sample=tasks-identi...

Thank you.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

James,

   Here is the sample modified to have all results in the popup without paging (not sure about the only highlighting layer 0):

<!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.1</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.1/esri/css/main.css">
  <script src="https://js.arcgis.com/4.1/"></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
      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 map = new Map({
        basemap: "osm"
      });
      map.add(parcelsLyr);

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

        // Set the parameters for the Identify
        params = new IdentifyParameters();
        params.tolerance = 3;
        params.layerIds = [0, 1, 2];
        params.layerOption = "top";
        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;
          var retVal = {};

          var rsltContent = arrayUtils.map(results, function(result) {
            var contentString;
            var feature = result.feature;
            var layerName = result.layerName;

            feature.attributes.layerName = layerName;
            if (layerName === 'Soil Survey Geographic') {
              contentString = "<h3>" + feature.attributes["Map Unit Name"] + "</h3><strong>Dominant order:</strong> " + feature.attributes["Dominant Order"] + " (" + feature.attributes["Dom. Cond. Order %"] + "%)" + "<br><strong>Dominant sub-order:</strong> " + feature.attributes["Dominant Sub-Order"] + " (" + feature.attributes["Dom. Cond. Suborder %"] + "%)<br><strong>Dominant Drainage Class:</strong> " +
              feature.attributes["Dom. Cond. Drainage Class"] + " (" + feature.attributes["Dom. Cond. Drainage Class %"] + "%)" + "<br><strong>Farmland Class:</strong> " + feature.attributes["Farmland Class"];
            }
            else if (layerName === 'State Soil Geographic') {
              contentString = "<h3>" + feature.attributes["Map Unit Name"] + "</h3><strong>Dominant order:</strong> " + feature.attributes["Dominant Order"] + " (" + feature.attributes["Dominant %"] + "%)" + "<br><strong>Dominant sub-order:</strong> " + feature.attributes["Dominant Sub-Order"] + " (" + feature.attributes["Dominant Sub-Order %"] + "%)";
            }
            else if (layerName === 'Global Soil Regions') {
              contentString = "<h3>" + layerName + "</h3><strong>Dominant order:</strong> " + feature.attributes["Dominant Order"] + "<br><strong>Dominant sub-order:</strong> " + feature.attributes["Dominant Sub-Order"];
            }
            return contentString;
          }).join("<br><br>");
          retVal.content = rsltContent;
          retVal.count = results.length;
          return retVal;
        }).then(showPopup);

        // Shows the results of the Identify in a popup once the promise is resolved
        function showPopup(results) {
          view.popup.content = results.content;
          view.popup.title = "All Soil Data: (" + results.count + " results)";
          view.popup.open({location: event.mapPoint});
          dom.byId("viewDiv").style.cursor = "auto";
        }
      }
    });
  </script>
</head>

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

</html>

View solution in original post

4 Replies
KenBuja
MVP Esteemed Contributor

You can change the layerOption property of the IdentifyParameters to return the results from all the layers rather than the top layer.

params.layerOption = "all"; (line 85 in the sample)

To return the results from a specific layer, change the layerIds property

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

James,

   Here is the sample modified to have all results in the popup without paging (not sure about the only highlighting layer 0):

<!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.1</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.1/esri/css/main.css">
  <script src="https://js.arcgis.com/4.1/"></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
      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 map = new Map({
        basemap: "osm"
      });
      map.add(parcelsLyr);

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

        // Set the parameters for the Identify
        params = new IdentifyParameters();
        params.tolerance = 3;
        params.layerIds = [0, 1, 2];
        params.layerOption = "top";
        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;
          var retVal = {};

          var rsltContent = arrayUtils.map(results, function(result) {
            var contentString;
            var feature = result.feature;
            var layerName = result.layerName;

            feature.attributes.layerName = layerName;
            if (layerName === 'Soil Survey Geographic') {
              contentString = "<h3>" + feature.attributes["Map Unit Name"] + "</h3><strong>Dominant order:</strong> " + feature.attributes["Dominant Order"] + " (" + feature.attributes["Dom. Cond. Order %"] + "%)" + "<br><strong>Dominant sub-order:</strong> " + feature.attributes["Dominant Sub-Order"] + " (" + feature.attributes["Dom. Cond. Suborder %"] + "%)<br><strong>Dominant Drainage Class:</strong> " +
              feature.attributes["Dom. Cond. Drainage Class"] + " (" + feature.attributes["Dom. Cond. Drainage Class %"] + "%)" + "<br><strong>Farmland Class:</strong> " + feature.attributes["Farmland Class"];
            }
            else if (layerName === 'State Soil Geographic') {
              contentString = "<h3>" + feature.attributes["Map Unit Name"] + "</h3><strong>Dominant order:</strong> " + feature.attributes["Dominant Order"] + " (" + feature.attributes["Dominant %"] + "%)" + "<br><strong>Dominant sub-order:</strong> " + feature.attributes["Dominant Sub-Order"] + " (" + feature.attributes["Dominant Sub-Order %"] + "%)";
            }
            else if (layerName === 'Global Soil Regions') {
              contentString = "<h3>" + layerName + "</h3><strong>Dominant order:</strong> " + feature.attributes["Dominant Order"] + "<br><strong>Dominant sub-order:</strong> " + feature.attributes["Dominant Sub-Order"];
            }
            return contentString;
          }).join("<br><br>");
          retVal.content = rsltContent;
          retVal.count = results.length;
          return retVal;
        }).then(showPopup);

        // Shows the results of the Identify in a popup once the promise is resolved
        function showPopup(results) {
          view.popup.content = results.content;
          view.popup.title = "All Soil Data: (" + results.count + " results)";
          view.popup.open({location: event.mapPoint});
          dom.byId("viewDiv").style.cursor = "auto";
        }
      }
    });
  </script>
</head>

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

</html>
KenBuja
MVP Esteemed Contributor

Nice...I interpreted the question totally differently!

0 Kudos
jamesa
by
New Contributor III

Thank you Robert.  This is what I am looking.

0 Kudos