AnsweredAssumed Answered

second "on layer click event" not fired

Question asked by mallareddy2271 on Jan 7, 2019
Latest reply on Jan 7, 2019 by rscheitlin

i have two on layer click events.  

scenario is two show two infotemplates when on layer1 is clicked

 

when on "A" layer is clicked "B" layer is not fired initially

 

when i click on "B" layer it is working(area code details information)

 

now code related to "B"  is registered after clicking on it, initially on page load evt it was not registered i guess

 

Again if i click on "A" layer now both events works(initially it doesn't)

 

Any suggestions

Thanks

<!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>Non graphic info window</title>
   
    <link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css">
    <style>
      html, body, #map{
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
   
    <script src="https://js.arcgis.com/3.27/"></script>
    <script>
      var map;
      require([
          "esri/map","esri/dijit/PopupTemplate", "esri/layers/FeatureLayer","esri/InfoTemplate","esri/dijit/Popup",
          "dojo/domReady!"
        ], function(
          Map,PopupTemplate,FeatureLayer,InfoTemplate,PopupMobile
        ){
          var service1 = "http://bbb.aaaaa.com/arcgis03/rest/services/aaaa/bbbb/FeatureServer/0";
          var service2 = "http://bbb.aaaaa.com/arcgis03/rest/services/sbc/Territorry/MapServer/2";
          var popup = new PopupMobile(null, dojo.create("div"));
              var Ginfotemplate = InfoTemplate;
          map = new Map("map", {
            basemap: "topo",
            infoWindow: popup,
            center: [-87.6298, 41.8781],
            zoom: 13
          }); 
var popupTemplate = new PopupTemplate({
        content: content1
    });
    var popupTemplate2 = new PopupTemplate({
      content: content2
    });
           var layer1 = new FeatureLayer(service1, {
        mode: FeatureLayer.MODE_AUTO,
        infoTemplate: popupTemplate,
        outFields: ["*"],
        "opacity": 0.9
    });
    var Glayer1 = layer1;
     var layer2 = new FeatureLayer(service2, {
       mode: FeatureLayer.MODE_SNAPSHOT,
        infoTemplate: popupTemplate2,
        outFields: ["*"],
        "opacity": 0.5
    });
    var Glayer2 = layer2;
map.addLayers([layer2,layer1]);
layer1.on("click", function (evt) {
        var idProperty = layer1.objectIdField,
                         feature,
                        featureId,
                        query;
        if (evt.graphic && evt.graphic.attributes && evt.graphic.attributes[idProperty]) {
            feature = evt.graphic,
            featureId = feature.attributes[idProperty];

            Glayer1.infoTemplate = new Ginfotemplate("Title1" , content1);
            popup.show(evt.mapPoint);
        }
    });
      layer2.on("click", function (evt) {
            var idProperty2 = layer2.objectIdField,
                             feature,
                            featureId,
                            query;
            if (evt.graphic && evt.graphic.attributes && evt.graphic.attributes[idProperty2]) {
                feature = evt.graphic,
                featureId = feature.attributes[idProperty2];
                Glayer2.infoTemplate = new Ginfotemplate("Title2", content2);
                popup.show(evt.mapPoint);
            }
    });
        });
    </script>
  </head>
  <body>
    <script>
      var content1 = "<table  class='table'><tr><td>Field1</td><td>${Field1}</td></tr>" +
                              "</table>";
     var content2 = "<table  class='table'><tr><td>Teritory</td><td><strong>${Field2}</strong></td></tr>" +
                              "</table>";             
    </script>
    <div id="map"></div>
   
  </body>
</html>

Outcomes