Show infoTemplate Programitically Feature Layer

[vinayb]

HI All,

  I don't want to assign infoTemplate when initializing Feature Layer. Since i want to define on-click behavior for feature layer and i am not show Pop up each time hence How can i show Pop up i.e infoTempalte Programitically.

[ReneeMaxwell]

This is how I accomplish this action, using the Identify Task:

// Function to format info window content based on feature attributes
function featureContent(feature) {
       var type = feature.attributes["TYPE"];
       var notes = feature.attributes["NOTES"];
       var baseContent = "<strong>Type:</strong> " + type;
       if (notes) { baseContent += "<br/><strong>Info:</strong> <span class='data'>" + notes + "</span>"; }
       return baseContent;
}

var idTask = new IdentifyTask(mapUrl);
var idParams = new IdentifyParams();
idParams.returnGeometry = true;
idParams.layerIds = [56, 59];
idParams.layerOption = IdentifyParams.LAYER_OPTION_TOP;
idParams.tolerance = 5;

function infoTask(evt) {
       idParams.geometry = evt.mapPoint;
       idParams.width = map.width;
       idParams.height = map.height;
       idParams.mapExtent = map.extent;
       idTask.execute(idParams, function (idResults) {
           if (idResults[0]) {
               array.forEach(idResults, function (result) {
                    var selFeature = result.feature;
                    map.infoWindow.setTitle(result.layerName);
                    var content = featureContent(selFeature);
                    map.infoWindow.setContent(content);
                    map.infoWindow.show(evt.mapPoint);
                });
            }
        }, null);
}

on(map, "click", infoTask);

[vinayb]

The problem is i don't want to define on-click functionality on map object i want to define on click functionality on feature Layer object .

is there any way i can show Infotemplate on the fly i am trying
as below

function getData(evt){
        try {

  require(["esri/InfoTemplate"], function(InfoTemplate){
    var graphic = evt.graphic;
    var countryName = evt.graphic.attributes.CNTRY_NAME;
    var template=new  InfoTemplate();
                          console.log(" got countryName" + countryName);
                          var alertDetailUrl = getAlertDetailsUrl(countryName);
                          console.log(" alertDetailUrl " + alertDetailUrl);
                          dojo.xhrGet({
                              url: alertDetailUrl,
                              handleAs: 'json',
                              load: function(data){
                                  console.log("data ");
                                  var popUpData = getPopUpContent(data);
                                  template.setTitle(countryName);
                                  template.setContent(popUpData);
     graphic.setInfoTemplate(template);
     map.graphics.add(graphic);
     graphic.show();
     
                                  console.log(" complete ");
                              },
                              error: dojo.hitch(this, "failure")
                          });
                      });
                          
              
          }

          catch (e) {
              console.log("error occured " + e);
          }
      }

[ReneeMaxwell]

You should be able to do that, similar to the map click event but use the feature layer onclick event instead.

on(featureLayerInstance, "click", function (evt) {
        var graphic = evt.graphic;
 var countryName = evt.graphic.attributes.CNTRY_NAME;
 var template=new InfoTemplate();
        console.log(" got countryName" + countryName);
        var alertDetailUrl = getAlertDetailsUrl(countryName);
        console.log(" alertDetailUrl " + alertDetailUrl);
        dojo.xhrGet({
              url: alertDetailUrl,
              handleAs: 'json',
              load: function(data){
              console.log("data ");
              var popUpData = getPopUpContent(data);
              template.setTitle(countryName);
              template.setContent(popUpData);
       graphic.setInfoTemplate(template);
              //You don't needto add the graphic to the map unless you want to give it a new selection symbol.
       //map.graphics.add(graphic);
       //graphic.show();
              console.log(" complete ");
              },
                error: dojo.hitch(this, "failure")
       });
});

[vinayb]

unfortunately it does not work, it adds infotemplate first time next time you click it show infotemplate but position is not proper

[ReneeMaxwell]

You will need to reconfigure your code to incorporate part of the code I originally posted, so that the infoWindow is positioned according the evt mapPoint. Something like so:

on(featureLayerInstance, "click", function (evt) {
        var graphic = evt.graphic;
 var countryName = evt.graphic.attributes.CNTRY_NAME;
        console.log(" got countryName" + countryName);
        var alertDetailUrl = getAlertDetailsUrl(countryName);
        console.log(" alertDetailUrl " + alertDetailUrl);
        dojo.xhrGet({
              url: alertDetailUrl,
              handleAs: 'json',
              load: function(data){
                  console.log("data ");
                  var popUpData = getPopUpContent(data);
                  map.infoWindow.setTitle(countryName);
                  map.infoWindow.setContent(popUpData);
                  map.infoWindow.show(evt.mapPoint);
                  console.log(" complete ");
              },
              error: dojo.hitch(this, "failure")
       });
});

[vinayb]

Thanks , it work  but placement of infowindow is not proper.if I click on india popup shows in  Europe .

[vinayb]

Any other work around

[TyroneLigon · Accepted solution]

Which version of the JavaScript API are you using? If I'm not mistaken, if you're using version 3.3 or earlier you have to include a reference to Popup.css in your page, otherwise the popup window will always open in the upper left hand corner of the map.

[vinayb]

Awesome thanks this resolved but I am using 3.6