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

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.

Vind meer berichten getagd met

Accepted answers

TyroneLigon

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.

All comments

vinayb

Awesome thanks this resolved but I am using 3.6

TyroneLigon

vinayb

Any other work around

vinayb

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

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

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

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

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

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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