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

Programmatically open a popup template on a graphic

Anonymous User

Hi,

In the API docs, https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html#content, it is mentioned that the pop up template is open using clicks by default. Is there a way to programmatically open a popup template on a graphics layer?

Currently, the only available methods is to open up the pop up on a view.

view.popup.open()

But what I am looking for is, say that I have graphicsLayer initialised as a feature layer

graphicsLayer.graphics.getItemAt(x).popupTemplate.open()

Find more posts tagged with

Accepted answers

rscheitlin

You just use this line of code:

view.popup.open({
  features: graphics  // array of graphics or a single graphic in an array
});

All comments

DiegoMonge_Chinchilla

Thanks a lot

I forgot to mention that I'm not a developer, I'm forest engineer so I don't know much about coding.

After a few tries it works with the following adjustments in case someone else needs it:

const query = districts.createQuery();
            query.geometry = view.center;
            query.spatialRelationship = "intersects";
            // query.distance = 2;
            // query.units = "meters";
            query.where = "1=1";
            query.outSpatialReference = { wkid: 102100 };
            query.returnQueryGeometry = true;
            query.outFields = ["nom_prov"];

            districts.queryFeatures(query).then(function (results) {
                console.log(results)
                popup.open({
                    title: "Esta es la ubicación de su punto",
                    location: centerPoint,
                    // feature: results.features[0],
                    content: results.features[0].attributes.nom_prov
                });
            });

Thanks a lot for your kind help @RobertScheitlin__GISP

rscheitlin

@DiegoMonge_Chinchilla Just like the error is telling you, You are passing a FeatureLayer to the popups feature property when it is expecting a Graphic or array of Graphics. So something like

const query = new Query();
query.where = "1=1";
query.outSpatialReference = { wkid: 102100 };
query.returnGeometry = true;
query.outFields = [ "nom_prov" ];

districts.queryFeatures(query).then(function(results){
  popup.open({
    title: "Esta es la ubicación de su punto",
    location: centerPoint,
    feature: results.features[0],
    content: "{nom_prov}"
  });
});

Would work.

DiegoMonge_Chinchilla

Hi

Is this possible with a featurelayer content.

For example I'm trying to do this:

var districts = new FeatureLayer({
      url: "https:.../server/rest/services/Distritos_SNIT/MapServer/0",
      outFields: ["nom_cant", "nom_prov", "nom_distr","cod_prov","cod_distr","cod_canton"],
      renderer: renderer,
      labelingInfo: [labelClass],
      popupTemplate: {
        content: "<b>Provincia: </b>{nom_prov} ({cod_prov})<br/> <b>Cantón:</b> {nom_cant} ({cod_canton})<br/> <b>Distrito:</b> {nom_distr} ({cod_distr})",
        title: "Ubicación del punto",
        location: { latitude: latwgs, longitude: lonwgs },

      }
    });
popup.open({
                title: "Esta es la ubicación de su punto",
                location: centerPoint,
                feature: [districts],
                content: "{nom_prov}"
            });

And I got the following error:

(index):119 [esri.core.Accessor] Accessor#set Assigning an instance of 'esri.layers.FeatureLayer' which is not a subclass of 'esri.Graphic'

Any thought ?

Regards

rscheitlin

You just use this line of code:

view.popup.open({
  features: graphics  // array of graphics or a single graphic in an array
});

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.