nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Can you specify an OnClick event specific to a Layer to identify two different Popups

KristenJones1

I'm trying to figure out how to create a different InfoWindow (template) popup for each of my feature layers, since each have a different set of fields and data. I have not been able to find any examples yet, but I figured that I could start by creating a different OnClick event. So for example dojo.connect(map, "onClick", myClickHandler); can I do something like

dojo.connect(map(FeatureLayer1), "onClick", myClickHandler);

dojo.connect(map(FeatureLayer2), "onClick", myClickHandler);

or am I way off on how to proceed with this?

THANKS!

Find more posts tagged with

Accepted answers

All comments

evtguy

It certainly is possible. First, you'll need to define infoTemplates for each feature layer:

 var template1 = new esri.InfoTemplate();
 template1.setContent(SetFeatureLayer1PopupInfo); //call function to set the content
 template1.setTitle('Some generic title or another function');

 var template2 = new esri.InfoTemplate();
 template2.setContent(SetFeatureLayer2PopupInfo); //call function to set the content
 template2.setTitle('Some generic title or another function');

Now, when you create your feature layers, you just choose the appropriate infoTemplate and then do the dojo.connect as usual:

theFeatureLayer1 = new esri.layers.FeatureLayer("REST Url", {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
infoTemplate: template1,
outFields: ["*"],
visible: true
});

theFeatureLayer2 = new esri.layers.FeatureLayer("REST Url", {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
infoTemplate: template2,
outFields: ["*"],
visible: true
});


dojo.connect(theFeatureLayer1, "onClick", function(evt) {
     var query = new esri.tasks.Query();
     query.geometry = pointToExtent(map,evt.mapPoint,10);
     
     var deferred = theFeatureLayer1.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW);
     map.infoWindow.resize(550,350);
     map.infoWindow.setFeatures([deferred]);
     map.infoWindow.show(evt.mapPoint);
});

Later in your code will be the function to create the popup content:

function SetFeatureLayer1PopupInfo(graphic) {
     fullAttr = graphic.attributes;
     someval = fullAttr.FIELDNAME;

     content = '<table><tr><td>Field Name:</td><td>' + someval + '</td><tr></table>';

     return content;
}

KristenJones1

That was the same line of thinking I had, however the dojo.connect event does not work changing it from "map" to the Layer name

If you see line 118 dojo.connect(map, 'onClick', function (e) {

If I change this to dojo.connect(permits, 'onClick', function (e) {

It does not work. I was thinking I could do a "map.permits" but that does not work either..

<!DOCTYPE html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
    <!--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>Permit Locator</title>

    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
    <style>
      html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        padding:0;
      }
    </style>

    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("esri.dijit.Popup");
      
      var map;
      var permits;
      var properties;
      
      function init() {
      
      var sfs = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([111, 0, 255]), 2), new dojo.Color([111, 0, 255, 0.15]));
      
       
       var popup = new esri.dijit.Popup({
          fillSymbol: sfs
        }, dojo.create("div"));
        

        map = new esri.Map("map",{
          basemap: "streets",
          center: [-84.183, 39.734],
          zoom: 13,
          infoWindow: popup
        });
        
        dojo.addClass(map.infoWindow.domNode, "myTheme");

       
      //Add all the permits and parcels to see on load   
      var operationalLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://map.miamiconservancy.org:6080/arcgis/rest/services/MCDPropertiesGeoDB/MapServer", {"opacity":0.9});
      map.addLayer(operationalLayer);
         
        
      //apply a popup template to the permits layer to format popup info 
      var popupTemplate = new esri.dijit.PopupTemplate({
          title: "{Permits.MASTERUSER.%PERMIT.ISSUEDTO}",
          fieldInfos: [{
            fieldName: "Permits.MASTERUSER.%PERMIT.MCDNUM",
            label: 'Permit Number (MCDNUM):',
            visible: true
          }, {
            fieldName: "Permits.MASTERUSER.%PERMIT.LOCATION",
            label: "Location:",
            visible: true
          }]
        });
        
        
        
        //apply a popup template to the MCD Parcels layer to format popup info 
        var popupTemplateParcels = new esri.dijit.PopupTemplate({
          title: "{MCDID}",
          fieldInfos: [{
            fieldName: "MCDID",
            label: 'MCD ID:',
            visible: true
          }, {
            fieldName: "PARCELID",
            label: "Parcel ID:",
            visible: true
          }]
        });

            

       //add the permits layer to the map as a feature layer in selection mode we'll use this layer to query and display the selected permits
        permits = new esri.layers.FeatureLayer("http://map.miamiconservancy.org:6080/arcgis/rest/services/MCDPropertiesJOINToSQL/MapServer/2", {
          outFields: ["*"],
          infoTemplate: popupTemplate,
          mode: esri.layers.FeatureLayer.MODE_SELECTION
        });
        
        
        //add the Properties layer to the map as a feature layer in selection mode
        properties = new esri.layers.FeatureLayer("http://map.miamiconservancy.org:6080/arcgis/rest/services/MCDPropertiesJOINToSQL/MapServer/0", {
          outFields: ["*"],
          infoTemplate: popupTemplateParcels,
          mode: esri.layers.FeatureLayer.MODE_SELECTION
        });




          permits.setSelectionSymbol(sfs);
          
          properties.setSelectionSymbol(sfs);


        //when users click on the map select the permit using the map point and update the url parameter
        dojo.connect(map, 'onClick', function (e) {
          var query = new esri.tasks.Query();
          query.geometry = e.mapPoint;
          var deferred = permits.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function (selection) {
            //update the url param if a permit was located
            if (selection.length > 0) {
              var mcdnum = selection[0].attributes["Permits.MASTERUSER.%PERMIT.MCDNUM"];
              //Refresh the URL with the currently selected permit
              if (typeof history.pushState !== 'undefined') {
                window.history.pushState(null, null, "?mcdnum=" + selection[0].attributes["Permits.MASTERUSER.%PERMIT.MCDNUM"]);
              }
            }
          });
          map.infoWindow.setFeatures([deferred]);
          map.infoWindow.show(e.mapPoint);
        });




       dojo.connect(map, 'onLayersAddResult', function (result) {
          // Add a link into the InfoWindow Actions panel       
          var emailLink = dojo.create("a", {
            "class": "action",
            "innerHTML": "Email Map",
            "href": "javascript:void(0);"
          }, dojo.query(".actionList", map.infoWindow.domNode)[0]);


          // Register a function to be called when the user clicks on
          // the above link
          dojo.connect(emailLink, "onclick", function (evt) {
            var feature = map.infoWindow.getSelectedFeature();
            var url = window.location;
            var emailLink = "mailto:?subject=Permit Map of :" + feature.attributes["Permits.MASTERUSER.%PERMIT.MCDNUM"]+ "&body=Check out this permit: %0D%0A " + window.location;
            window.location.href = emailLink;
          });

          //When users navigate through the history using the browser back/forward buttons select appropriate permit  
          //https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
          window.onpopstate = function (event) {
            var mcdnum = getPermitFromUrl(document.location.href);
            if (mcdnum) {
              selectPermit(mcdnum);
            } else {
              permits.clearSelection();
              map.infoWindow.hide();
            }
          };

          //if a mcdnum is specified in url param select that feature 
          var mcdnum = getPermitFromUrl(document.location.href);
          selectPermit(mcdnum);
        });

        map.addLayers([permits]);
        map.addLayers([properties]);
      }

      //extract the permit id from the url
      function getPermitFromUrl(url) {
        var urlObject = esri.urlToObject(url);
        if (urlObject.query && urlObject.query.mcdnum) {
          return urlObject.query.mcdnum;
        } else {
          return null;
        }
      }

      //select permit from the feature layer by creating a query to look for the input mcdnum id 
      function selectPermit(mcdnum) {
        if (mcdnum) {
          var query = new esri.tasks.Query();
          query.where = "Permits.MASTERUSER.%PERMIT.MCDNUM = " + mcdnum + "";
          //query.where = "Permits.MASTERUSER.%PERMIT.MCDNUM = 2963";
          var deferred = permits.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function (selection) {
            var center = esri.graphicsExtent(selection).getCenter();
            var extHandler = dojo.connect(map, 'onExtentChange', function () {
              dojo.disconnect(extHandler);
              //zoom to the center then display the popup 
              map.infoWindow.setFeatures(selection);
              map.infoWindow.show(center);
            });
            map.centerAt(center);
          });
        }
      }









      
      dojo.ready(init);
          </script>
  </head>
  
  <body class="claro">
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" 
    style="width: 100%; height: 100%; margin: 0;">
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="border:1px solid #000;padding:0;"></div>
    </div>
  </body>
</html>

evtguy

Try using a function outside of the dojo.connect code block instead of an inline function? Maybe the code is "running over" the deferred part.

I've had this happen to me with other aspects of using the javascript API. At any rate, I'm using this technique in the apps I'm working on and it works for me.

[EDIT] Noticed that you're using popup templates. My example and my background has been with infoTemplates so I don't know if that's making any difference..

DianaBenedict

You need to change the code below:

var deferred = permits.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function (selection) {
            //update the url param if a permit was located
            if (selection.length > 0) {
              var mcdnum = selection[0].attributes["Permits.MASTERUSER.%PERMIT.MCDNUM"];
              //Refresh the URL with the currently selected permit
              if (typeof history.pushState !== 'undefined') {
                window.history.pushState(null, null, "?mcdnum=" + selection[0].attributes["Permits.MASTERUSER.%PERMIT.MCDNUM"]);
              }
            }
          });
          map.infoWindow.setFeatures([deferred]);
          map.infoWindow.show(e.mapPoint);
        });

To something like this:

var deferred = permits.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW);

deferred.then(function (results) {
//add all you code here that you want to run after the selectFeatures async call is done...
//in your case, I believe that results is what you will want to pass to the map.infoWindow.setFeatures method, but I would step through the code and eval the results object to make sure!
}

Note that the dojo documentation has a pretty good explanation of using deffered.then, you can even hook up a call when the deffered call fails/errors

If you don't want to mess with deffereds then you could do something like this (I think though I haven't tested)

       permits.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function (selection) {
            //update the url param if a permit was located
            if (selection.length > 0) {
              var mcdnum = selection[0].attributes["Permits.MASTERUSER.%PERMIT.MCDNUM"];
              //Refresh the URL with the currently selected permit
              if (typeof history.pushState !== 'undefined') {
                window.history.pushState(null, null, "?mcdnum=" + selection[0].attributes["Permits.MASTERUSER.%PERMIT.MCDNUM"]);
              }
              map.infoWindow.setFeatures(selection); //you may or may not need the brakets as so [selection]
              map.infoWindow.show(e.mapPoint);
            }
          });
        });

You just have to be sure that you defer any action until you get a callback from the server indicating that the selection is complete and you have gotten the results (just as the previous person said).

Diana

KristenJones1

Thank you both for taking the time to look at my problem!

I'm still getting my feet wet with this API and Javascript for that matter, so bare with me.

So Diana, are you saying I should try the two separate click events based on the Layer name but adding your code to the "PErmits" layer? or maintain the Dojo.connect(map, .... and plug your code in? I'd rather plug code snippits that try to figure out the correct syntax right now, and learn as I go along.

How does this look (complete) ? Since I have two layers with different fields and data, I'm thinking I need to still seperate the OnClick based on the Layer

dojo.connect(permits, 'onClick', function (e) 
 {
          var query = new esri.tasks.Query();
          query.geometry = e.mapPoint;

          permits.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function (selection) 
      {
          //update the url param if a permit was located

          if (selection.length > 0) 
            {
            var mcdnum = selection[0].attributes["Permits.MASTERUSER.%PERMIT.MCDNUM"];
             //Refresh the URL with the currently selected permit
               if (typeof history.pushState !== 'undefined') 
                {
                 window.history.pushState(null, null, "?mcdnum=" + selection[0].attributes["Permits.MASTERUSER.%PERMIT.MCDNUM"]);
                }
       map.infoWindow.setFeatures(selection);
       map.infoWindow.show(e.mapPoint);
            }
      }
 });

// Now for the Properties layer



    dojo.connect(properties, 'onClick', function (e) 
{
          var query = new esri.tasks.Query();
          query.geometry = e.mapPoint;
          map.infoWindow.setFeatures(selection);  
          map.infoWindow.show(e.mapPoint);
});

Thanks again for taking your time to help!

Jason

DianaBenedict

Jason, from a quick glance it looks like your sample code should work. I guess it really depends on how you want to manage your code and what the business logic is. If the business logic implies that when a user clicks on the map they should be able to select from either feature layer then you might want to consider a map onClick event by where you create 1 query object uisng the point geometry and then query both feature layers. I actually do this in my code so that users can click or draw a bounding rectangle around the aerea of interest and perform multiple async queries to the server, gather up the results and process as needed. Implementing this method can complicate matters and makes the learning curve a little more difficult however it can make the code a little cleaner and less redundant.

With that said, you also need to evaluate what happens if a user clicks on the map and it is close to both feature layers? Do both events get called? Does one callback overwrite the results of the other? I have not researched this possiblity when it comes to hooking up multiple callbacks to featurelayer onClick events. Connecting callbacks and managing them correctly tends to be a pain, but once it is done successfully, can make your job much easier.
Are you able to debug put breaks in your code so that you can see when events fire? doing this will help you determine the best approach and eval where potential bugs could be introduced.

I would suggest you start of by putting in a break or alert within each one of the dojo.connect(layer1, onClick,...) and dojo.connect(layer1, onClick,...) anonymous functions to see how it all plays out when you click on the map. If both are getting fired then you might want to consider using the map onClick event instead and manage selecting from both featurelayers and then process the selections seperately.

Let me know how it all plays out and then we can discuss the best approach. I hope it all makes sense

KevinMacLeod1

I actually have the same question. I want to use popupTemplate for to create an "Identify" for all our layers, like in ArcMap. Only when they are visible of course. For all features, all layers. Or at least top feature of all layers would do for now. But so that it has that little "arrow" next to the close button in the popup Infowindow that lets us page through all the layers (example would be 1 of 3, where there are 3 coincident points that Identify finds and puts in the popup.)

Hopefully this method can be extended for not just Feature Layers (most of our layers are Feature) but also Dynamic Layers. But based on a few other threads with samples it seems like we have to handle Dynamic differently than Feature?

I just want popups like ArcGIS.com viewer provides. They "just work"! Identifies all features, any type of layer. It seems like all the various samples here have to be "glued" together to make this "Identify" functionality or tool.

I recommend to ESRI they consider including this in the next Basic Viewer template: a robust, configurable Identify tool. (And hierarchical Table of Contents (like ArcMap or AGSTOC) and Query Widget.)

For now, I've just coded in a popup InfoWindow for every layer manually and enabled it with over a dozen blocks of the following:

dojo.connect(LayerName, "onClick", function (evt) {
            map.infoWindow.setFeatures([evt.graphic]);
            map.infoWindow.show(evt.mapPoint);
        });

This doesn't provide the little arrow that pages through multiple layers (should it, out of the box, with popup dijit?) that are coincident and doesn't work on Dynamic layers. Also there is a better way with some looping code I have not implemented yet.

I will experiment with the code examples above soon. Thank you Diana, dcastano and evtguy for posting!

DianaBenedict

Jason forgot to mention a couple of other things:

1) make sure to read the topic on popups and templateInfo in the help docs
http://help.arcgis.com/en/webapi/javascript/arcgis/jshelp/#intro_popuptemplate also look up the one for InfoTemplates
2) check out the samples on popups and InfoTemplates - note that you might only really need InfoTemplates to start of with and then work your way to popups as needed. It looks like you will want to set up the templateInfo for each feature layer in the portion of the code where you intantiate each feature layer (as suggested by Steve). Note that the template Info object allows you to specifiy a place holder for the fields by using something like: "here I will add some text about " {yourfieldname} " and then I can add more custum text here that also appends the info from " {anotherfield} ...etc...
3) I noticed that you are using SelectionMode for the feature layer so the layer onClick event may not even ever fire since the layer is just an image not a dowloaded graphic.
4) I use SelectionMode becuase I am dealing with nation wide data and want to control what graphics actually get streamed to the client side from the server. This means that I always have to perform selection queries on my data in order to process/display attributes, etc...
5) finally, don't foget to add the layers to the map .. if you are using SelectionMode then you will also need to add the MapServer portion of the feature services so the users can actually see the data displayed as an image

I hope this helps!

Diana

KristenJones1

Thanks again Diana for the help, I don't suppose you are available for freelance work, at least help enough to get my page working the way I need and then to learn from the code? 🙂

KristenJones1

Well I tried that code and it does not work. Click event never fires, then if I try manually setting the selection to a specific layer, then changing the onclicks first parameter back to Map the click event works but now it is not updating the to the current selected "permit" and the popups are calling out the same info.

Feeling discouraged with this. I'm thinking the same as kmacleod, how am I going to easily set the active layer after I can just get the click Event to behave. Anyone want to take a peek at what I have so far.

<!DOCTYPE html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
    <!--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>Permit Locator</title>

    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
    <style>
      html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        padding:0;
      }
    </style>

    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("esri.dijit.Popup");
      
      var map;
      var permits;
      var properties;
      
      function init() {
      
      var sfs = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([111, 0, 255]), 2), new dojo.Color([111, 0, 255, 0.15]));
      
       
       var popup = new esri.dijit.Popup({
          fillSymbol: sfs
        }, dojo.create("div"));
        

        map = new esri.Map("map",{
          basemap: "streets",
          center: [-84.183, 39.734],
          zoom: 13,
          infoWindow: popup
        });
        
        dojo.addClass(map.infoWindow.domNode, "myTheme");

       
      //Add all the permits and parcels to see on load   
      var operationalLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://map.miamiconservancy.org:6080/arcgis/rest/services/MCDPropertiesGeoDB/MapServer", {"opacity":0.9});
      map.addLayer(operationalLayer);
         
        
      //apply a popup template to the permits layer to format popup info 
      var popupTemplate = new esri.dijit.PopupTemplate({
          title: "{Permits.MASTERUSER.%PERMIT.ISSUEDTO}",
          fieldInfos: [{
            fieldName: "Permits.MASTERUSER.%PERMIT.MCDNUM",
            label: 'Permit Number (MCDNUM):',
            visible: true
          }, {
            fieldName: "Permits.MASTERUSER.%PERMIT.LOCATION",
            label: "Location:",
            visible: true
          }]
        });
        
        
        
        //apply a popup template to the MCD Parcels layer to format popup info 
        var popupTemplateParcels = new esri.dijit.PopupTemplate({
          title: "{MCDID}",
          fieldInfos: [{
            fieldName: "MCDID",
            label: 'MCD ID:',
            visible: true
          }, {
            fieldName: "PARCELID",
            label: "Parcel ID:",
            visible: true
          }]
        });

            

       //add the permits layer to the map as a feature layer in selection mode we'll use this layer to query and display the selected permits
        permits = new esri.layers.FeatureLayer("http://map.miamiconservancy.org:6080/arcgis/rest/services/MCDPropertiesJOINToSQL/MapServer/2", {
          outFields: ["*"],
          infoTemplate: popupTemplate,
          mode: esri.layers.FeatureLayer.MODE_SELECTION
        });
        
        
        //add the Properties layer to the map as a feature layer in selection mode
        properties = new esri.layers.FeatureLayer("http://map.miamiconservancy.org:6080/arcgis/rest/services/MCDPropertiesJOINToSQL/MapServer/0", {
          outFields: ["*"],
          infoTemplate: popupTemplateParcels,
          mode: esri.layers.FeatureLayer.MODE_SELECTION
        });




          permits.setSelectionSymbol(sfs);
          
          properties.setSelectionSymbol(sfs);
         // map.infoWindow.setFeatures(permits);



        //*****when users click on the map select the permit using the map point and update the url parameter




dojo.connect(map, 'onClick', function (e) 
 {
          var query = new esri.tasks.Query();
          query.geometry = e.mapPoint;

          permits.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function (selection) 
      {
          //update the url param if a permit was located

          if (selection.length > 0) 
            {
            var mcdnum = selection[0].attributes["Permits.MASTERUSER.%PERMIT.MCDNUM"];
             //Refresh the URL with the currently selected permit
               if (typeof history.pushState !== 'undefined') 
                {
                 window.history.pushState(null, null, "?mcdnum=" + selection[0].attributes["Permits.MASTERUSER.%PERMIT.MCDNUM"]);
                }
            }
      });
      // map.infoWindow.setFeatures(selection);
       map.infoWindow.setFeatures(permits);
       map.infoWindow.show(e.mapPoint);
   
      
 });

// Now for the Properties layer



    dojo.connect(properties, 'onClick', function (e) 
{
          var query = new esri.tasks.Query();
          query.geometry = e.mapPoint;
          map.infoWindow.setFeatures(selection);  
          map.infoWindow.show(e.mapPoint);
});



       dojo.connect(map, 'onLayersAddResult', function (result) {
          // Add a link into the InfoWindow Actions panel       
          var emailLink = dojo.create("a", {
            "class": "action",
            "innerHTML": "Email Map",
            "href": "javascript:void(0);"
          }, dojo.query(".actionList", map.infoWindow.domNode)[0]);


          // Register a function to be called when the user clicks on
          // the above link
          dojo.connect(emailLink, "onclick", function (evt) {
            var feature = map.infoWindow.getSelectedFeature();
            var url = window.location;
            var emailLink = "mailto:?subject=Permit Map of :" + feature.attributes["Permits.MASTERUSER.%PERMIT.MCDNUM"]+ "&body=Check out this permit: %0D%0A " + window.location;
            window.location.href = emailLink;
          });

          //When users navigate through the history using the browser back/forward buttons select appropriate permit  
          //https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
          window.onpopstate = function (event) {
            var mcdnum = getPermitFromUrl(document.location.href);
            if (mcdnum) {
              selectPermit(mcdnum);
            } else {
              permits.clearSelection();
              map.infoWindow.hide();
            }
          };

          //if a mcdnum is specified in url param select that feature 
          var mcdnum = getPermitFromUrl(document.location.href);
          selectPermit(mcdnum);
        });

        map.addLayers([permits]);
        map.addLayers([properties]);
      }

      //extract the permit id from the url
      function getPermitFromUrl(url) {
        var urlObject = esri.urlToObject(url);
        if (urlObject.query && urlObject.query.mcdnum) {
          return urlObject.query.mcdnum;
        } else {
          return null;
        }
      }

      //select permit from the feature layer by creating a query to look for the input mcdnum id 
      function selectPermit(mcdnum) {
        if (mcdnum) {
          var query = new esri.tasks.Query();
          query.where = "Permits.MASTERUSER.%PERMIT.MCDNUM = " + mcdnum + "";
          //query.where = "Permits.MASTERUSER.%PERMIT.MCDNUM = 2963";
          var deferred = permits.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function (selection) {
            var center = esri.graphicsExtent(selection).getCenter();
            var extHandler = dojo.connect(map, 'onExtentChange', function () {
              dojo.disconnect(extHandler);
              //zoom to the center then display the popup 
              map.infoWindow.setFeatures(selection);
              map.infoWindow.show(center);
            });
            map.centerAt(center);
          });
        }
      }









      
      dojo.ready(init);
          </script>
  </head>
  
  <body class="claro">
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" 
    style="width: 100%; height: 100%; margin: 0;">
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="border:1px solid #000;padding:0;"></div>
    </div>
  </body>
</html>

DianaBenedict

Below is some code and pseudocode samples that will hopefully get you past the "hump". Essentially, I have provided funcitonality that will allow you to perform asychronous calls to the server to select from multiple featureLayers, wait for the return results from the server and then give you palce for you to process the results as needed. Note that this code is still mostly "work in progress/samples" to solve a similar issue to what it seems like you are experiencing. In my case, I have to be able to select from multiple featureLayers that I set as my editable layers and be able to display the attributes and edit as needed. I use the AttributeInspector to load the selected features so my process is a little different than yours. However, the main hurdle is to be able to perform selections from multiple featurelayers simultaneously and be able to process the results once the server has returned the selection results from all the layers (that is why I use the dojo/deferred and dojo/deferredList objectss). On that note. I am showing you two different ways to reference those objects. The standalone method shows you using the AMD (new recomondations) the other method shows you the "regular" way. If you do not use the AMD way then you need to make sure to add a dojo.require for the dojo.deferred object. I am also using the dojo/deferredList object but according to the 1.8 documenation this is deprecated and we should consider uisng dojo/promise/all .. at some point I will update the code but it is working and I have too much on my plate right now.

//the code below is taken from your dojo.connect(map,...)    
dojo.connect(map, 'onClick', function (e) {
      var query = new esri.tasks.Query();
      query.geometry = e.mapPoint; //TODO: consider creating a method that expands the point to an extent 

      //call the method that performs a query from an array of feature layers...
      //note that you may need to alter the query object .. 
      //my example assumes the same query for all layers in the array
      var editFeatureLayers = [permits, properties];

      var deferred = getSelectionLayerDeferred(editFeatureLayers, query);
      deferred.then(function (results) {
        var selectionLayers = null;
        if (results.success) {
          selectionLayers = results.selectionLayers;
        } else {
          var err = results.error;
          alert("Error when attempting process selectionLayers for the EditLayers");
        }

        if (selectionLayers) {
          if (selectionLayers.length > 0) {
            //add your code here to process your selected records..
            //below is an example how you can get the info you need from the selectionLayers object
            var mySelfeatures = [];
            dojo.forEach(selectionLayers, function (selLayer) {
              var layerNameString = selLayer.featureLayer.name;
              var selFeatures = selLayer.features;
              var selFeatureCount = selLayer.features.length;
              //NOTE: in here you can process your logic as needed based on your layerNameString for example
              //added some pseudocode below to show you what I mean:
              if (layerNamestring === "premits") {

              } else if (layerNamestring === "properties") {

              }
              //note, you may need to create an array object to add all your featuers 
              //so you can use it to setFeatures for your popup
              //don't know, haven't done this before since I use the attributeInspector
              //concat the selFeatures to this array... I think this will work confirm syntax in JS
              mySelfeatures = mySelfeatures.concat(selLayer.features);    
            });

          } else {
            //hideProcessingDialog();
            //add your code here to add logic to what happens if no features get selected
          }
        }
      }, function (err) {
        // Do something on failure.
        hideProcessingDialog();
        drawToolbar.deactivate();
        alert("Error while selecting features");
      });

      map.infoWindow.setFeatures(mySelfeatures);
      //map.infoWindow.setFeatures(permits);
      map.infoWindow.show(e.mapPoint);
    });

//BELOW is the method that performs the selection from an array of FeatureLayer objects and uses one Query object
// this is really key to being able to get all the selection results in one place ... it is also pretty fast since it does not chain the 
//call to the server all calls are done asynch... 
//TODO: use dojo/promise/all instead of dojo/deferredList
function getSelectionLayerDeferred(featureLayerArray, selectQuery) {
  var returnDeferred = null;
  var selectionLayers = [];
  var defferredCallArray = [];

  require(["dojo/DeferredList", "dojo/Deferred"], function (DeferredList, Deferred) {
    returnDeferred = new Deferred();

    dojo.forEach(featureLayerArray, function (flayer) {
      var defferredCall = flayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW);
      //cast the dojo.deferred to a promise so we can use the new 
      //dojo/promise/all in lieu of dojo/DeferredList (deprecated at v 1.8)
      defferredCallArray.push(defferredCall);
    });

    var dl = new DeferredList(defferredCallArray);
    dl.then(function (results) {
      // Executed when all deferred resolved
      if (results.length > 0) {
        dojo.forEach(results, function (result) {
          if (result[0] === true && result[1].length > 0) {
            selectionLayers.push({ 'featureLayer': result[1][0].getLayer(), 'features': result[1] });
          }
        });
      }
      returnDeferred.resolve({ 'success': true, 'selectionLayers': selectionLayers });
    }, function (err) {
      returnDeferred.resolve({ 'success': false, 'selectionLayers': null, 'error': err });
    });
  });
  return returnDeferred;
}

GrantWilcox_0-1749234993078.png

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.