Identify Task on multiple layers- return all results to one InfoWindow

Den-GIS · ‎02-10-2019

Hi everyone

I try to show all results of several layers immediately in an InfoWindow without navigating over the arrow in the top right corner of InfoWindow (next / previous feature layer). Is that possible?
As a test, I use the following example

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
 <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.27/esri/css/esri.css">
 <style>
 html, body, #map {
 height:100%;
 width:100%;
 margin:0;
 padding:0;
 }
 </style>
<script src="https://js.arcgis.com/3.27/"></script>
 <script>
 var map;
require([
 "esri/map",
 "esri/InfoTemplate",
 "esri/layers/ArcGISDynamicMapServiceLayer",
 "esri/symbols/SimpleFillSymbol",
 "esri/symbols/SimpleLineSymbol",
 "esri/tasks/IdentifyTask",
 "esri/tasks/IdentifyParameters",
 "esri/dijit/Popup",
 "dojo/_base/array",
 "esri/Color",
 "dojo/dom-construct",
 "dojo/domReady!"
 ], function (
 Map, InfoTemplate, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,
 SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup,
 arrayUtils, Color, domConstruct
 ) {
var identifyTask, identifyParams;
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: "satellite",
 center: [-83.275, 42.573],
 zoom: 18,
 infoWindow: popup
 });
map.on("load", mapReady);
var parcelsURL = "https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer";
 map.addLayer(new ArcGISDynamicMapServiceLayer(parcelsURL,
 { opacity: 0.55 }));
function mapReady () {
 map.on("click", executeIdentifyTask);
 //create identify tasks and setup parameters
 identifyTask = new IdentifyTask(parcelsURL);
identifyParams = new IdentifyParameters();
 identifyParams.tolerance = 3;
 identifyParams.returnGeometry = true;
 identifyParams.layerIds = [0, 2];
 identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
 identifyParams.width = map.width;
 identifyParams.height = map.height;
 }
function executeIdentifyTask (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 === 'Tax Parcels') {
 var taxParcelTemplate = new InfoTemplate("",
 "${Postal Address} <br/> Owner of record: ${First Owner Name}");
 feature.setInfoTemplate(taxParcelTemplate);
 }
 else if (layerName === 'Building Footprints') {
 console.log(feature.attributes.PARCELID);
 var buildingFootprintTemplate = new InfoTemplate("",
 "Parcel ID: ${PARCELID}");
 feature.setInfoTemplate(buildingFootprintTemplate);
 }
 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="map"></div>
 </body>
</html>

Thanks in advance

RobertScheitlin__GISP · ‎02-19-2019

Denis,

You have to manually set the infoWindows content:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <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.27/esri/css/esri.css">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  </style>

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

    require([
      "esri/map",
      "esri/InfoTemplate",
      "esri/layers/ArcGISDynamicMapServiceLayer",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/tasks/IdentifyTask",
      "esri/tasks/IdentifyParameters",
      "esri/dijit/Popup",
      "dojo/_base/array",
      "esri/Color",
      "dojo/dom-construct",
      "dojo/domReady!"
    ], function(
      Map, InfoTemplate, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,
      SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup,
      arrayUtils, Color, domConstruct
    ) {

      var identifyTask, identifyParams;

      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: "satellite",
        center: [-83.275, 42.573],
        zoom: 18,
        infoWindow: popup
      });

      map.on("load", mapReady);

      var parcelsURL = "https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer";
      map.addLayer(new ArcGISDynamicMapServiceLayer(parcelsURL, {
        opacity: 0.55
      }));

      function mapReady() {
        map.on("click", executeIdentifyTask);
        //create identify tasks and setup parameters
        identifyTask = new IdentifyTask(parcelsURL);

        identifyParams = new IdentifyParameters();
        identifyParams.tolerance = 3;
        identifyParams.returnGeometry = true;
        identifyParams.layerIds = [0, 2];
        identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
        identifyParams.width = map.width;
        identifyParams.height = map.height;
      }

      function executeIdentifyTask(event) {
        identifyParams.geometry = event.mapPoint;
        identifyParams.mapExtent = map.extent;

        identifyTask
          .execute(identifyParams)
          .addCallback(function(response) {
            // response is an array of identify result objects
            // Let's return an array of features.
            var tpcontent = "<ul>";
            var bfcontent = "<ul>";
            arrayUtils.map(response, function(result) {
              var feature = result.feature;
              var layerName = result.layerName;

              feature.attributes.layerName = layerName;
              if (layerName === 'Tax Parcels') {
                var taxParcelTemplate = new InfoTemplate("",
                  "${Postal Address} <br/> Owner of record: ${First Owner Name}");
                feature.setInfoTemplate(taxParcelTemplate);
                tpcontent += "<li>" + feature.attributes["Postal Address"] + "<br/> Owner of record: " + feature.attributes["First Owner Name"]  + "</li>";
              } else if (layerName === 'Building Footprints') {
                var buildingFootprintTemplate = new InfoTemplate("",
                  "Parcel ID: ${PARCELID}");
                feature.setInfoTemplate(buildingFootprintTemplate);
                bfcontent += "<li>" + "Parcel ID: " + feature.attributes.PARCELID + "</li>";
              }
            });

            //build the content info
            var fContent = "";
            if(bfcontent !== "<ul>"){
              fContent = "<u><strong>Tax Parcels</strong></u><br/>" + tpcontent + "</ul><br/><u><strong>Building Footprints</strong></u><br/>" + bfcontent + "</ul>";
            }else{
              fContent = "<u><strong>Tax Parcels</strong></u><br/>" + tpcontent + "</ul>";
            }
            map.infoWindow.setContent(fContent);
            map.infoWindow.show(event.mapPoint);
          });
      }
    });
  </script>
</head>

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

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

View solution in original post

RobertScheitlin__GISP · ‎02-19-2019

Denis,

You have to manually set the infoWindows content:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <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.27/esri/css/esri.css">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  </style>

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

    require([
      "esri/map",
      "esri/InfoTemplate",
      "esri/layers/ArcGISDynamicMapServiceLayer",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/tasks/IdentifyTask",
      "esri/tasks/IdentifyParameters",
      "esri/dijit/Popup",
      "dojo/_base/array",
      "esri/Color",
      "dojo/dom-construct",
      "dojo/domReady!"
    ], function(
      Map, InfoTemplate, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,
      SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup,
      arrayUtils, Color, domConstruct
    ) {

      var identifyTask, identifyParams;

      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: "satellite",
        center: [-83.275, 42.573],
        zoom: 18,
        infoWindow: popup
      });

      map.on("load", mapReady);

      var parcelsURL = "https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer";
      map.addLayer(new ArcGISDynamicMapServiceLayer(parcelsURL, {
        opacity: 0.55
      }));

      function mapReady() {
        map.on("click", executeIdentifyTask);
        //create identify tasks and setup parameters
        identifyTask = new IdentifyTask(parcelsURL);

        identifyParams = new IdentifyParameters();
        identifyParams.tolerance = 3;
        identifyParams.returnGeometry = true;
        identifyParams.layerIds = [0, 2];
        identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
        identifyParams.width = map.width;
        identifyParams.height = map.height;
      }

      function executeIdentifyTask(event) {
        identifyParams.geometry = event.mapPoint;
        identifyParams.mapExtent = map.extent;

        identifyTask
          .execute(identifyParams)
          .addCallback(function(response) {
            // response is an array of identify result objects
            // Let's return an array of features.
            var tpcontent = "<ul>";
            var bfcontent = "<ul>";
            arrayUtils.map(response, function(result) {
              var feature = result.feature;
              var layerName = result.layerName;

              feature.attributes.layerName = layerName;
              if (layerName === 'Tax Parcels') {
                var taxParcelTemplate = new InfoTemplate("",
                  "${Postal Address} <br/> Owner of record: ${First Owner Name}");
                feature.setInfoTemplate(taxParcelTemplate);
                tpcontent += "<li>" + feature.attributes["Postal Address"] + "<br/> Owner of record: " + feature.attributes["First Owner Name"]  + "</li>";
              } else if (layerName === 'Building Footprints') {
                var buildingFootprintTemplate = new InfoTemplate("",
                  "Parcel ID: ${PARCELID}");
                feature.setInfoTemplate(buildingFootprintTemplate);
                bfcontent += "<li>" + "Parcel ID: " + feature.attributes.PARCELID + "</li>";
              }
            });

            //build the content info
            var fContent = "";
            if(bfcontent !== "<ul>"){
              fContent = "<u><strong>Tax Parcels</strong></u><br/>" + tpcontent + "</ul><br/><u><strong>Building Footprints</strong></u><br/>" + bfcontent + "</ul>";
            }else{
              fContent = "<u><strong>Tax Parcels</strong></u><br/>" + tpcontent + "</ul>";
            }
            map.infoWindow.setContent(fContent);
            map.infoWindow.show(event.mapPoint);
          });
      }
    });
  </script>
</head>

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

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

Den-GIS · ‎02-19-2019

Great ,

That's it. Helped again.

Thanks a lot Robert!!!