second "on layer click event" not fired

MRReddy · ‎01-07-2019

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎01-07-2019

MR Reddy,

So you are creating a new Popup dijit so that you can use popup.show? If so then you are wasting effort as you can just use:

map.infoWindow.show(evt.mapPoint);‍

You are also wasting effort assigning:

var Glayer2 = layer2;‍

Just use the existing layer2 var.

Next you have:

      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);
        }
      });‍‍‍‍‍‍‍‍‍‍‍‍‍

Line 10 you set the layers infoTemplate to a new Ginfotemplate. Which is just a InfoTemplate Class with its content equal to content1. But what is confusing to me is you already set layer1 to have a PopupTemplate class with its content equal to content1.... So this seems very redundant and wasted effort.

when user clicks on 1181 it should load content1 and content2 templates
when user clicks on place where there is no point, only content2 loads in infowindow

When the user click on 1181 only content1 will ever show since a map can only have One popup showing.

If you what a popup to have info from two layers then you have to look into using Arcade expressions.

https://community.esri.com/community/gis/web-gis/arcgisonline/blog/2018/12/10/overlapping-features-i...

View solution in original post

RobertScheitlin__GISP · ‎01-07-2019

MR Reddy,

Very little of your code make sense to me... You seem to have two layer that are initialized with a PopupTemplate and then when you click on the layer you want to set the layers infotemplate to a InfoTemplate class that points to the same content?... Why are you creating a Popup dijit when you don't seem to be doing anything with it really? The map class already has a Popup dijit assigned to the map.infoWindow property.

MRReddy · ‎01-07-2019

Robert,

made some code changes and two layer click events have different contents,

used popup.show in layer click event

Example layer image, when user clicks on 1181 it should load content1 and content2 templates

when user clicks on place where there is no point, only content2 loads in infowindow

RobertScheitlin__GISP · ‎01-07-2019

MR Reddy,

So you are creating a new Popup dijit so that you can use popup.show? If so then you are wasting effort as you can just use:

map.infoWindow.show(evt.mapPoint);‍

You are also wasting effort assigning:

var Glayer2 = layer2;‍

Just use the existing layer2 var.

Next you have:

      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);
        }
      });‍‍‍‍‍‍‍‍‍‍‍‍‍

Line 10 you set the layers infoTemplate to a new Ginfotemplate. Which is just a InfoTemplate Class with its content equal to content1. But what is confusing to me is you already set layer1 to have a PopupTemplate class with its content equal to content1.... So this seems very redundant and wasted effort.

when user clicks on 1181 it should load content1 and content2 templates
when user clicks on place where there is no point, only content2 loads in infowindow

When the user click on 1181 only content1 will ever show since a map can only have One popup showing.

If you what a popup to have info from two layers then you have to look into using Arcade expressions.

https://community.esri.com/community/gis/web-gis/arcgisonline/blog/2018/12/10/overlapping-features-i...