Community

Error on creating mdule

5660
11
Jump to solution
04-06-2016 06:59 AM
jamesa
by
New Contributor III
‎04-06-2016 06:59 AM

I try to create a identify module from the fiddler code here:Edit fiddle - JSFiddle  but I got error message for Unexpected identifier and moduleI.executeIdentifyTask when try to click on the map. At this moment, I am trying to understand how to write a module.  Please help.  Thanks.

1. index.html

<!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.16/esri/css/esri.css">
 <style type="text/css">
  html, body {
   height:100%;
   width:100%;
   margin:0;
   padding:0;
   margin:0;
   font-family: "Open Sans";
  }
  #leftPane {
   width:20%;
   margin:0;
   border:none;
  }
  #map {
   padding:0;
  }
  .nav {
   padding: 5px 10px;
   background: #4479BA;
   color: #FFF;
   border-radius: 5px;
   border: solid 1px #20538D;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  }
  #header {
   text-align: center;
   height:60px;
   border-bottom: solid 1px #ccc;
  }
 </style>
 
  <script type="text/javascript">  
                var dojoConfig = {  
                    packages: [{  
                        name: 'myCustomModule',  
                        location: location.pathname.replace(/\/[^/]+$/, '') + '/myCustomModule'  
                    }]  
                };  
      </script>     
    <script src="https://js.arcgis.com/3.16/"></script>
 
 <script>
    require([
     "dojo/ready", 
        "dojo/on", 
        "dojo/dom",
        "dijit/registry",
        "dojo/dom-construct",
        "dojo/parser", 
        "dijit/layout/BorderContainer", 
        "dijit/layout/ContentPane", 
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/domUtils",
        "esri/dijit/Popup", "dojo/promise/all", 
        "dojo/_base/array",
        "esri/Color",
  "myCustomModule/moduleI",
        "dojo/domReady!"
    ], function(
        ready, 
        on, 
        dom,
        registry,
        domConstruct,
        parser, 
        BorderContainer, 
        ContentPane,
        Map, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,
        SimpleLineSymbol,  domUtils, Popup, All,
        arrayUtils, Color, moduleI
    ) {
 
       parser.parse();
   
        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
     });
     
  
        var landBaseLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer", { opacity: .55 });  
            map.addLayer(landBaseLayer);  
   
     
         //change in prod
  esriConfig.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
  
  
   
  map.on("click", function(evt){
    moduleI.executeIdentifyTask(evt);
   })
    });
</script>
</head>
 <body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" 
    data-dojo-props="design:'headline',gutters:false" 
    style="width:100%; height:100%;">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:false" 
        region="left" style="width: 20%;height:100%;">
        <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" 
            data-dojo-props="region:'center'"></div>
        <div id="header" data-dojo-type="dijit/layout/ContentPane" 
            data-dojo-props="region:'top'">
            <div id="featureCount" style="margin-bottom:5px;">Click to select feature(s)</div>
        </div>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>

2. module.js

define([
        "dojo/_base/connect", 
        "dojo/dom",
        "esri/map",
        "esri/InfoTemplate",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/tasks/IdentifyTask",
        "esri/tasks/IdentifyParameters", "esri/domUtils",
        "esri/dijit/Popup", "dojo/promise/all", 
        "dojo/_base/array",
        "esri/Color"
    ], function(
        connect,
        dom,
        Map, InfoTemplate, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,
        SimpleLineSymbol, IdentifyTask, IdentifyParameters, domUtils, Popup, All,
        arrayUtils, Color
){     
return{  
        executeIdentifyTask:function(evt){
   var identifyTask, identifyParams, content, identifyResults, idPoint;
    map.infoWindow.set("popupWindow", false);
       initializeSidebar(map);  
                identifyResults = [];  
                idPoint = evt.mapPoint;  
                var layers = dojo.map(map.layerIds, function (layerId) {  
                    return map.getLayer(layerId);  
                });  
                layers = dojo.filter(layers, function (layer) {  
                    if (layer.visibleLayers[0] !== -1) {  
                        return layer.getImageUrl && layer.visible  
                    }  
                }); //Only dynamic layers have the getImageUrl function. Filter so you only query visible dynamic layers  
                var tasks = dojo.map(layers, function (layer) {  
                    return new esri.tasks.IdentifyTask(layer.url);  
                }); //map each visible dynamic layer to a new identify task, using the layer url  
                var defTasks = dojo.map(tasks, function (task) {  
                    return new dojo.Deferred();  
                }); //map each identify task to a new dojo.Deferred  
                var params = createIdentifyParams(layers, evt);  

                var promises = [];  

                for (i = 0; i < tasks.length; i++) {  
                    promises.push(tasks.execute(params)); //Execute each task  
                }  

                var allPromises = new All(promises);  
                //allPromises.then(function (r) { showIdentifyResults(r, tasks); });  
    allPromises.then(function (r) {
     function showIdentifyResults(r, tasks){
        var results = [];  
                var taskUrls = [];  
                r = dojo.filter(r, function (result) {  
                    return r[0];  
                });  
                for (i = 0; i < r.length; i++) {  
                    results = results.concat(r);  
                    for (j = 0; j < r.length; j++) {  
                        taskUrls = taskUrls.concat(tasks.url);  
                    }  
                }  


   //combine content ------------------- 
     content = parcels = buildings ="";
          var parcelFeatures = [];  
     dojo.forEach(results, function(result) {      
      var feature = result.feature;
    var atts = feature.attributes;
    feature.attributes.layerName = result.layerName;
    if(result.layerName === 'Tax Parcels'){
      parcels += atts["Postal Address"] + "<br />";
      parcelFeatures[parcelFeatures.length] = result.feature;
    }
    else if (result.layerName === 'Building Footprints'){
      buildings += "Building/Parcel ID: " + atts.PARCELID + "<br />";
    }
    return feature;
     });
   if ( parcels ) {
    content += "<b>Parcels</b><br />" + parcels;
     }
     if ( buildings ) {
    content += "<b>Buildings</b><br />" + buildings;
     }
     console.log("content:  ", content);


      if (results.length === 0) {  
                    map.infoWindow.clearFeatures();  
                } else { 
                     map.infoWindow.setFeatures(parcelFeatures);     
         map.infoWindow.setContent(content); 
                }  
                map.infoWindow.show(idPoint);  
                return results; 

     }
    });  
            }  
          createIdentifyParams:function(layers, evt) {  
                var identifyParamsList = [];  
                identifyParamsList.length = 0;  
                dojo.forEach(layers, function (layer) {  
                    var idParams = new esri.tasks.IdentifyParameters();  
                    idParams.width = map.width;  
                    idParams.height = map.height;  
                    idParams.geometry = evt.mapPoint;  
                    idParams.mapExtent = map.extent;  
                    idParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;  
      idParams.tolerance = 3;  
                    idParams.returnGeometry = true;  
                    identifyParamsList.push(idParams); 
                });  
                return identifyParamsList;  
            } 
            initializeSidebar:function (map){
                var popup = map.infoWindow;
                //when the selection changes update the side panel to display the popup info for the 
                //currently selected feature. 
                connect.connect(popup, "onSelectionChange", function(){
                    displayPopupContent(popup.getSelectedFeature());
                });
                //when the selection is cleared remove the popup content from the side panel. 
                connect.connect(popup, "onClearFeatures", function(){
                    //dom.byId replaces dojo.byId
                    dom.byId("featureCount").innerHTML = "Click to select feature(s)";
                    //registry.byId replaces dijit.byId
                    registry.byId("leftPane").set("content", "");
                   // domUtils.hide(dom.byId("pager"));
                });
                //When features are associated with the  map's info window update the sidebar with the new content. 
                connect.connect(popup, "onSetContent", function(){
                    displayPopupContent(popup.getSelectedFeature());
                    dom.byId("featureCount").innerHTML = popup.features.length + " feature(s) selected";
                    //enable navigation if more than one feature is selected 
                   // popup.features.length > 1 ? domUtils.show(dom.byId("pager")) : domUtils.hide(dom.byId("pager"));
                });
            }
   
        displayPopupContent:function(feature){
          if(feature){
            registry.byId("leftPane").set("content", content);
          }
        }
}
 }); //define function ends.
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎04-06-2016 09:17 AM

James,

OK here is what I got working.

In the index.html make this change:

map.on("click", function(evt) {
  moduleI.executeIdentifyTask(evt, map);
});

Then Here is the updated moduleI.js:

define([
    "dojo/on",
    "dojo/Deferred",
    "dojo/dom",
    "esri/InfoTemplate",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/tasks/IdentifyTask",
    "esri/tasks/IdentifyParameters",
    "esri/domUtils",
    "esri/dijit/Popup",
    "dojo/promise/all",
    "dojo/_base/array",
    "esri/Color",
    "dijit/registry",
    "dojo/_base/lang"
], function(
    on, Deferred, dom, InfoTemplate, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,
    SimpleLineSymbol, IdentifyTask, IdentifyParameters, domUtils, Popup, All,
    arrayUtils, Color, registry, lang
) {
    return {
        map: null,
        content: null,
        executeIdentifyTask: function(evt, map) {
            this.map = map;
            var identifyResults, idPoint;
            this.map.infoWindow.set("popupWindow", false);
            this.initializeSidebar(this.map);
            identifyResults = [];
            idPoint = evt.mapPoint;
            var layers = arrayUtils.map(this.map.layerIds, function(layerId) {
                return this.map.getLayer(layerId);
            });
            layers = arrayUtils.filter(layers, function(layer) {
                if (layer.visibleLayers[0] !== -1) {
                    return layer.getImageUrl && layer.visible;
                }
            }); //Only dynamic layers have the getImageUrl function. Filter so you only query visible dynamic layers
            var tasks = arrayUtils.map(layers, function(layer) {
                return new IdentifyTask(layer.url);
            }); //map each visible dynamic layer to a new identify task, using the layer url
            arrayUtils.map(tasks, function(task) {
                return new Deferred();
            }); //map each identify task to a new dojo.Deferred
            var params = this.createIdentifyParams(layers, evt);

            var promises = [];

            for (var i = 0; i < tasks.length; i++) {
                promises.push(tasks.execute(params)); //Execute each task
            }

            var allPromises = new All(promises);
            //allPromises.then(function (r) { showIdentifyResults(r, tasks); });
            allPromises.then(lang.hitch(this, function(r) {
                var results = [],
                    taskUrls = [],
                    parcels = "",
                    buildings = "";
                r = arrayUtils.filter(r, function(result) {
                    return r[0];
                });
                for (i = 0; i < r.length; i++) {
                    results = results.concat(r);
                    for (var j = 0; j < r.length; j++) {
                        taskUrls = taskUrls.concat(tasks.url);
                    }
                }

                //combine content -------------------
                this.content = parcels = buildings = "";
                var parcelFeatures = [];
                arrayUtils.forEach(results, function(result) {
                    var feature = result.feature;
                    var atts = feature.attributes;
                    feature.attributes.layerName = result.layerName;
                    if (result.layerName === "Tax Parcels") {
                        parcels += atts["Postal Address"] + "<br />";
                        parcelFeatures[parcelFeatures.length] = result.feature;
                    } else if (result.layerName === "Building Footprints") {
                        buildings += "Building/Parcel ID: " + atts.PARCELID + "<br />";
                    }
                    return feature;
                });
                if (parcels) {
                    this.content += "<b>Parcels</b><br />" + parcels;
                }
                if (buildings) {
                    this.content += "<b>Buildings</b><br />" + buildings;
                }
                console.log("content:  ", this.content);

                if (results.length === 0) {
                    this.map.infoWindow.clearFeatures();
                } else {
                    this.map.infoWindow.setFeatures(parcelFeatures);
                    this.map.infoWindow.setContent(this.content);
                }
                this.map.infoWindow.show(idPoint);
                return results;
            }));
        },

        createIdentifyParams: function(layers, evt) {
            var identifyParamsList = [];
            identifyParamsList.length = 0;
            arrayUtils.forEach(layers, function(layer) {
                var idParams = new IdentifyParameters();
                idParams.width = this.map.width;
                idParams.height = this.map.height;
                idParams.geometry = evt.mapPoint;
                idParams.mapExtent = this.map.extent;
                idParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
                idParams.tolerance = 3;
                idParams.returnGeometry = true;
                identifyParamsList.push(idParams);
            });
            return identifyParamsList;
        },

        initializeSidebar: function(map) {
            var popup = this.map.infoWindow;
            //when the selection changes update the side panel to display the popup info for the
            //currently selected feature.
            on(popup, "selection-change", lang.hitch(this, function() {
                this.displayPopupContent(popup.getSelectedFeature());
            }));
            //when the selection is cleared remove the popup content from the side panel.
            on(popup, "clear-features", lang.hitch(this,function() {
                //dom.byId replaces dojo.byId
                dom.byId("featureCount").innerHTML = "Click to select feature(s)";
                //registry.byId replaces dijit.byId
                registry.byId("leftPane").set("content", "");
                // domUtils.hide(dom.byId("pager"));
            }));
            //When features are associated with the  map's info window update the sidebar with the new content.
            on(popup, "set-features", lang.hitch(this,function() {
                this.displayPopupContent(popup.getSelectedFeature());
                dom.byId("featureCount").innerHTML = popup.features.length + " feature(s) selected";
                //enable navigation if more than one feature is selected
                // popup.features.length > 1 ? domUtils.show(dom.byId("pager")) : domUtils.hide(dom.byId("pager"));
            }));
        },

        displayPopupContent: function(feature) {
            if (feature) {
                registry.byId("leftPane").set("content", this.content);
            }
        }
    };
}); //define function ends.

View solution in original post

0 Kudos
11 Replies
TyroneBiggums
by
Occasional Contributor III
‎04-06-2016 07:10 AM

Remove "/moduleI" from your require statement.

In your dojoConfig, you need to state the name of the js file unless it's "main.js".

Edit: So, your dojoConfig should look like this:

var dojoConfig = {    
    packages: [{    
        name: 'myCustomModule',    
        location: location.pathname.replace(/\/[^/]+$/, '') + '/myCustomModule',
        main: moduleI
    }]    
};   
thejuskambi
by
Occasional Contributor III
‎04-06-2016 07:26 AM

There are couple of things you need to ensure.

1) the path mentioned in the dojoConfig exist. In your case myCustomModule folder.

2) If the file name is module.js, than in the require you need to provide the same ie "myCustomModule/module" and not "myCustomModule/moduleI", the file name should match.

jamesa
by
New Contributor III
‎04-06-2016 07:50 AM

Sorry about that.  I just noticed that there was a typo on the file name I posted.  Actually is moduleI.js that is under folder of myCustomModule.  So the entire files structure look like this:

Sample4

    --index.html

              myCustomModule

                      --moduleI.js

When first loading the map shows up.  I try to modify my moduleI.js file again to include "," after each function.  Now when you click on the map, the error message change to "initializeSidebar is not defined".

moduleI.js

define([
        "dojo/_base/connect",
        "dojo/dom",
        "esri/map",
        "esri/InfoTemplate",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/tasks/IdentifyTask",
        "esri/tasks/IdentifyParameters", "esri/domUtils",
        "esri/dijit/Popup", "dojo/promise/all",
        "dojo/_base/array",
        "esri/Color"
    ], function(
        connect,
        dom,
        Map, InfoTemplate, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,
        SimpleLineSymbol, IdentifyTask, IdentifyParameters, domUtils, Popup, All,
        arrayUtils, Color
){   
return{
        executeIdentifyTask:function(evt){
  var identifyTask, identifyParams, content, identifyResults, idPoint;
  map.infoWindow.set("popupWindow", false);
    initializeSidebar(map);
                identifyResults = [];
                idPoint = evt.mapPoint;
                var layers = dojo.map(map.layerIds, function (layerId) {
                    return map.getLayer(layerId);
                });
                layers = dojo.filter(layers, function (layer) {
                    if (layer.visibleLayers[0] !== -1) {
                        return layer.getImageUrl && layer.visible
                    }
                }); //Only dynamic layers have the getImageUrl function. Filter so you only query visible dynamic layers
                var tasks = dojo.map(layers, function (layer) {
                    return new esri.tasks.IdentifyTask(layer.url);
                }); //map each visible dynamic layer to a new identify task, using the layer url
                var defTasks = dojo.map(tasks, function (task) {
                    return new dojo.Deferred();
                }); //map each identify task to a new dojo.Deferred
                var params = createIdentifyParams(layers, evt);

                var promises = [];

                for (i = 0; i < tasks.length; i++) {
                    promises.push(tasks.execute(params)); //Execute each task
                }

                var allPromises = new All(promises);
                //allPromises.then(function (r) { showIdentifyResults(r, tasks); });
  allPromises.then(function (r) {
  function showIdentifyResults(r, tasks){
  var results = [];
                var taskUrls = [];
                r = dojo.filter(r, function (result) {
                    return r[0];
                });
                for (i = 0; i < r.length; i++) {
                    results = results.concat(r);
                    for (j = 0; j < r.length; j++) {
                        taskUrls = taskUrls.concat(tasks.url);
                    }
                }
       

  //combine content -------------------
  content = parcels = buildings ="";
        var parcelFeatures = [];
  dojo.forEach(results, function(result) {   
    var feature = result.feature;
  var atts = feature.attributes;
  feature.attributes.layerName = result.layerName;
  if(result.layerName === 'Tax Parcels'){
  parcels += atts["Postal Address"] + "<br />";
  parcelFeatures[parcelFeatures.length] = result.feature;
  }
  else if (result.layerName === 'Building Footprints'){
  buildings += "Building/Parcel ID: " + atts.PARCELID + "<br />";
  }
  return feature;
  });
  if ( parcels ) {
  content += "<b>Parcels</b><br />" + parcels;
  }
  if ( buildings ) {
  content += "<b>Buildings</b><br />" + buildings;
  }
  console.log("content:  ", content);


    if (results.length === 0) {
                    map.infoWindow.clearFeatures();
                } else {
                    map.infoWindow.setFeatures(parcelFeatures);
      map.infoWindow.setContent(content);
                }
                map.infoWindow.show(idPoint);
                return results;

  }
  });
            },



          createIdentifyParams:function(layers, evt) {
                var identifyParamsList = [];
                identifyParamsList.length = 0;
                dojo.forEach(layers, function (layer) {
                    var idParams = new esri.tasks.IdentifyParameters();
                    idParams.width = map.width;
                    idParams.height = map.height;
                    idParams.geometry = evt.mapPoint;
                    idParams.mapExtent = map.extent;
                    idParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
  idParams.tolerance = 3;
                    idParams.returnGeometry = true;
                    identifyParamsList.push(idParams);
                });
                return identifyParamsList;
            },


            initializeSidebar:function (map){
                var popup = map.infoWindow;


                //when the selection changes update the side panel to display the popup info for the
                //currently selected feature.
                connect.connect(popup, "onSelectionChange", function(){
                    displayPopupContent(popup.getSelectedFeature());
                });


                //when the selection is cleared remove the popup content from the side panel.
                connect.connect(popup, "onClearFeatures", function(){
                    //dom.byId replaces dojo.byId
                    dom.byId("featureCount").innerHTML = "Click to select feature(s)";
                    //registry.byId replaces dijit.byId
                    registry.byId("leftPane").set("content", "");
                  // domUtils.hide(dom.byId("pager"));
                });


                //When features are associated with the  map's info window update the sidebar with the new content.
                connect.connect(popup, "onSetContent", function(){
                    displayPopupContent(popup.getSelectedFeature());
                    dom.byId("featureCount").innerHTML = popup.features.length + " feature(s) selected";


                    //enable navigation if more than one feature is selected
                  // popup.features.length > 1 ? domUtils.show(dom.byId("pager")) : domUtils.hide(dom.byId("pager"));
                });
            },



        displayPopupContent:function(feature){
          if(feature){
            registry.byId("leftPane").set("content", content);
          }
        },


}
}); //define function ends.
0 Kudos
TyroneBiggums
by
Occasional Contributor III
‎04-06-2016 08:00 AM

I skimmed, but it looks like you need to call it this way: this.initializeSidebar(map).

Since those objects are in the scope of the return, you'll possibly have to add "this." to other object references as well.

RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎04-06-2016 08:02 AM

James,

  You had several issues in your moduleI.js file. Compare my edited version to yours to see the changes:

define([
    "dojo/on",
    "dojo/Deferred",
    "dojo/dom",
    "esri/InfoTemplate",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/tasks/IdentifyTask",
    "esri/tasks/IdentifyParameters",
    "esri/domUtils",
    "esri/dijit/Popup",
    "dojo/promise/all",
    "dojo/_base/array",
    "esri/Color",
    "dijit/registry",
    "dojo/_base/lang"
], function(
    on, Deferred, dom, InfoTemplate, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,
    SimpleLineSymbol, IdentifyTask, IdentifyParameters, domUtils, Popup, All,
    arrayUtils, Color, registry, lang
) {
    return {
        map: null,
        content: null,
        executeIdentifyTask: function(evt) {
            this.map = event.target;
            var identifyResults, idPoint;
            this.map.infoWindow.set("popupWindow", false);
            this.initializeSidebar(this.map);
            identifyResults = [];
            idPoint = evt.mapPoint;
            var layers = arrayUtils.map(this.map.layerIds, function(layerId) {
                return this.map.getLayer(layerId);
            });
            layers = arrayUtils.filter(layers, function(layer) {
                if (layer.visibleLayers[0] !== -1) {
                    return layer.getImageUrl && layer.visible;
                }
            }); //Only dynamic layers have the getImageUrl function. Filter so you only query visible dynamic layers
            var tasks = arrayUtils.map(layers, function(layer) {
                return new IdentifyTask(layer.url);
            }); //map each visible dynamic layer to a new identify task, using the layer url
            arrayUtils.map(tasks, function(task) {
                return new Deferred();
            }); //map each identify task to a new dojo.Deferred
            var params = this.createIdentifyParams(layers, evt);


            var promises = [];


            for (var i = 0; i < tasks.length; i++) {
                promises.push(tasks.execute(params)); //Execute each task
            }


            var allPromises = new All(promises);
            //allPromises.then(function (r) { showIdentifyResults(r, tasks); });
            allPromises.then(lang.hitch(this, function(r) {
                var results = [],
                    taskUrls = [],
                    parcels = "",
                    buildings = "";
                r = arrayUtils.filter(r, function(result) {
                    return r[0];
                });
                for (i = 0; i < r.length; i++) {
                    results = results.concat(r);
                    for (var j = 0; j < r.length; j++) {
                        taskUrls = taskUrls.concat(tasks.url);
                    }
                }


                //combine content -------------------
                this.content = parcels = buildings = "";
                var parcelFeatures = [];
                arrayUtils.forEach(results, function(result) {
                    var feature = result.feature;
                    var atts = feature.attributes;
                    feature.attributes.layerName = result.layerName;
                    if (result.layerName === "Tax Parcels") {
                        parcels += atts["Postal Address"] + "<br />";
                        parcelFeatures[parcelFeatures.length] = result.feature;
                    } else if (result.layerName === "Building Footprints") {
                        buildings += "Building/Parcel ID: " + atts.PARCELID + "<br />";
                    }
                    return feature;
                });
                if (parcels) {
                    this.content += "<b>Parcels</b><br />" + parcels;
                }
                if (buildings) {
                    this.content += "<b>Buildings</b><br />" + buildings;
                }
                console.log("content:  ", this.content);


                if (results.length === 0) {
                    this.map.infoWindow.clearFeatures();
                } else {
                    this.map.infoWindow.setFeatures(parcelFeatures);
                    this.map.infoWindow.setContent(this.content);
                }
                this.map.infoWindow.show(idPoint);
                return results;
            }));
        },


        createIdentifyParams: function(layers, evt) {
            var identifyParamsList = [];
            identifyParamsList.length = 0;
            arrayUtils.forEach(layers, function(layer) {
                var idParams = new IdentifyParameters();
                idParams.width = this.map.width;
                idParams.height = this.map.height;
                idParams.geometry = evt.mapPoint;
                idParams.mapExtent = this.map.extent;
                idParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
                idParams.tolerance = 3;
                idParams.returnGeometry = true;
                identifyParamsList.push(idParams);
            });
            return identifyParamsList;
        },


        initializeSidebar: function(map) {
            var popup = map.infoWindow;
            //when the selection changes update the side panel to display the popup info for the
            //currently selected feature.
            on(popup, "onSelectionChange", function() {
                this.displayPopupContent(popup.getSelectedFeature());
            });
            //when the selection is cleared remove the popup content from the side panel.
            on(popup, "onClearFeatures", function() {
                //dom.byId replaces dojo.byId
                dom.byId("featureCount").innerHTML = "Click to select feature(s)";
                //registry.byId replaces dijit.byId
                registry.byId("leftPane").set("content", "");
                // domUtils.hide(dom.byId("pager"));
            });
            //When features are associated with the  map's info window update the sidebar with the new content.
            on(popup, "onSetContent", function() {
                this.displayPopupContent(popup.getSelectedFeature());
                dom.byId("featureCount").innerHTML = popup.features.length + " feature(s) selected";
                //enable navigation if more than one feature is selected
                // popup.features.length > 1 ? domUtils.show(dom.byId("pager")) : domUtils.hide(dom.byId("pager"));
            });
        },


        displayPopupContent: function(feature) {
            if (feature) {
                registry.byId("leftPane").set("content", this.content);
            }
        }
    };
}); //define function ends.
jamesa
by
New Contributor III
‎04-06-2016 08:50 AM

Robert,

Thank you for the modify code.

I replaced moduleI.js to yours.  I run it and now got different errors. I think I am pretty close to get this done.

1. I changed this line from event to evt:

this.map = evt.target;

2. Comment out this line:

this.map.infoWindow.set("popupWindow", false);  or else will have this error message:

Uncaught TypeError: Cannot read property 'set' of undefined

3. Message from initializeSidebar function - your changed from connect.connect to on

Uncaught TypeError: Cannot read property 'on' of undefined

if I use connect.connect then got this error message:

Uncaught ReferenceError: connect is not defined

Thank you.

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎04-06-2016 09:17 AM

James,

OK here is what I got working.

In the index.html make this change:

map.on("click", function(evt) {
  moduleI.executeIdentifyTask(evt, map);
});

Then Here is the updated moduleI.js:

define([
    "dojo/on",
    "dojo/Deferred",
    "dojo/dom",
    "esri/InfoTemplate",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/tasks/IdentifyTask",
    "esri/tasks/IdentifyParameters",
    "esri/domUtils",
    "esri/dijit/Popup",
    "dojo/promise/all",
    "dojo/_base/array",
    "esri/Color",
    "dijit/registry",
    "dojo/_base/lang"
], function(
    on, Deferred, dom, InfoTemplate, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,
    SimpleLineSymbol, IdentifyTask, IdentifyParameters, domUtils, Popup, All,
    arrayUtils, Color, registry, lang
) {
    return {
        map: null,
        content: null,
        executeIdentifyTask: function(evt, map) {
            this.map = map;
            var identifyResults, idPoint;
            this.map.infoWindow.set("popupWindow", false);
            this.initializeSidebar(this.map);
            identifyResults = [];
            idPoint = evt.mapPoint;
            var layers = arrayUtils.map(this.map.layerIds, function(layerId) {
                return this.map.getLayer(layerId);
            });
            layers = arrayUtils.filter(layers, function(layer) {
                if (layer.visibleLayers[0] !== -1) {
                    return layer.getImageUrl && layer.visible;
                }
            }); //Only dynamic layers have the getImageUrl function. Filter so you only query visible dynamic layers
            var tasks = arrayUtils.map(layers, function(layer) {
                return new IdentifyTask(layer.url);
            }); //map each visible dynamic layer to a new identify task, using the layer url
            arrayUtils.map(tasks, function(task) {
                return new Deferred();
            }); //map each identify task to a new dojo.Deferred
            var params = this.createIdentifyParams(layers, evt);

            var promises = [];

            for (var i = 0; i < tasks.length; i++) {
                promises.push(tasks.execute(params)); //Execute each task
            }

            var allPromises = new All(promises);
            //allPromises.then(function (r) { showIdentifyResults(r, tasks); });
            allPromises.then(lang.hitch(this, function(r) {
                var results = [],
                    taskUrls = [],
                    parcels = "",
                    buildings = "";
                r = arrayUtils.filter(r, function(result) {
                    return r[0];
                });
                for (i = 0; i < r.length; i++) {
                    results = results.concat(r);
                    for (var j = 0; j < r.length; j++) {
                        taskUrls = taskUrls.concat(tasks.url);
                    }
                }

                //combine content -------------------
                this.content = parcels = buildings = "";
                var parcelFeatures = [];
                arrayUtils.forEach(results, function(result) {
                    var feature = result.feature;
                    var atts = feature.attributes;
                    feature.attributes.layerName = result.layerName;
                    if (result.layerName === "Tax Parcels") {
                        parcels += atts["Postal Address"] + "<br />";
                        parcelFeatures[parcelFeatures.length] = result.feature;
                    } else if (result.layerName === "Building Footprints") {
                        buildings += "Building/Parcel ID: " + atts.PARCELID + "<br />";
                    }
                    return feature;
                });
                if (parcels) {
                    this.content += "<b>Parcels</b><br />" + parcels;
                }
                if (buildings) {
                    this.content += "<b>Buildings</b><br />" + buildings;
                }
                console.log("content:  ", this.content);

                if (results.length === 0) {
                    this.map.infoWindow.clearFeatures();
                } else {
                    this.map.infoWindow.setFeatures(parcelFeatures);
                    this.map.infoWindow.setContent(this.content);
                }
                this.map.infoWindow.show(idPoint);
                return results;
            }));
        },

        createIdentifyParams: function(layers, evt) {
            var identifyParamsList = [];
            identifyParamsList.length = 0;
            arrayUtils.forEach(layers, function(layer) {
                var idParams = new IdentifyParameters();
                idParams.width = this.map.width;
                idParams.height = this.map.height;
                idParams.geometry = evt.mapPoint;
                idParams.mapExtent = this.map.extent;
                idParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
                idParams.tolerance = 3;
                idParams.returnGeometry = true;
                identifyParamsList.push(idParams);
            });
            return identifyParamsList;
        },

        initializeSidebar: function(map) {
            var popup = this.map.infoWindow;
            //when the selection changes update the side panel to display the popup info for the
            //currently selected feature.
            on(popup, "selection-change", lang.hitch(this, function() {
                this.displayPopupContent(popup.getSelectedFeature());
            }));
            //when the selection is cleared remove the popup content from the side panel.
            on(popup, "clear-features", lang.hitch(this,function() {
                //dom.byId replaces dojo.byId
                dom.byId("featureCount").innerHTML = "Click to select feature(s)";
                //registry.byId replaces dijit.byId
                registry.byId("leftPane").set("content", "");
                // domUtils.hide(dom.byId("pager"));
            }));
            //When features are associated with the  map's info window update the sidebar with the new content.
            on(popup, "set-features", lang.hitch(this,function() {
                this.displayPopupContent(popup.getSelectedFeature());
                dom.byId("featureCount").innerHTML = popup.features.length + " feature(s) selected";
                //enable navigation if more than one feature is selected
                // popup.features.length > 1 ? domUtils.show(dom.byId("pager")) : domUtils.hide(dom.byId("pager"));
            }));
        },

        displayPopupContent: function(feature) {
            if (feature) {
                registry.byId("leftPane").set("content", this.content);
            }
        }
    };
}); //define function ends.
0 Kudos
thejuskambi
by
Occasional Contributor III
‎04-06-2016 08:04 AM

The function initializeSidebar is part of moduleI so, you need to use this.initializeSidebar, within the function executeIdentifyTask.

that should do the trick.

ChrisSmith7
by
Frequent Contributor
‎04-06-2016 07:44 AM

James,

A similar question came-up previously - if helpful, I have a complete example of how to write a module here:

how to call modules in arcgis javascript api

0 Kudos