I'm using Esri Javascript API 4.5

When the map loads, I'm fetching point coordinates from external source and then plotting it on the map using Graphic class and assigning a PopupTemplate to that graphic.

The Case

The graphic is successfully plotted on the map. But in order to view to the popup template, I'm required to click on the graphic.

The Issue

Is there way where I can trigger the graphic's click event when it gets added to the map so that the popup template shows up automatically?

The Code

require([    
"esri/PopupTemplate",     
"esri/Graphic",
.
.
.
.
"dojo/domReady!"
],
function (
    PopupTemplate, Graphic, ....) {

var point = {
    type: "point",
    x: <some x>,
    y: <some y>
 };    

var symbol = {
   type: "picture-marker",
   url: "/euf/assets/nl/images/red-pin.png",
   width: "30px",
   height: "30px"
};

var template = new PopupTemplate({
    title: "New Title",
    content: "New Content"
});

var graphic = new Graphic({
    geometry: point,
    symbol: symbol,
    popupTemplate: template
});
view.graphics.add(graphic); // this works as I can see the marker on page

// now, how do I trigger its click event here?
});

I'm using Esri Javascript API 4.5

When the map loads, I'm fetching point coordinates from external source and then plotting it on the map using Graphic class and assigning a PopupTemplate to that graphic.

The Case

The graphic is successfully plotted on the map. But in order to view to the popup template, I'm required to click on the graphic.

The Issue

Is there way where I can trigger the graphic's click event when it gets added to the map so that the popup template shows up automatically?

The Code

require([    
"esri/PopupTemplate",     
"esri/Graphic",
.
.
.
.
"dojo/domReady!"
],
function (
    PopupTemplate, Graphic, ....) {

var point = {
    type: "point",
    x: <some x>,
    y: <some y>
 };    

var symbol = {
   type: "picture-marker",
   url: "/euf/assets/nl/images/red-pin.png",
   width: "30px",
   height: "30px"
};

var template = new PopupTemplate({
    title: "New Title",
    content: "New Content"
});

var graphic = new Graphic({
    geometry: point,
    symbol: symbol,
    popupTemplate: template
});
view.graphics.add(graphic); // this works as I can see the marker on page

// now, how do I trigger its click event here?
});

• javascript
• arcgis
• esri
• arcgis-js-api

• You don't need to trigger that, If the point is correct then the popuptemplate will appear automatically that is the functionality of Graphic Are you seeing any error in the console? – karthick Commented Jan 9, 2018 at 7:40
• No, I'm not. The popup appears only if I click on the graphic. – asprin Commented Jan 9, 2018 at 7:41
• In other words what you want is to open popup programatically without clicking on graphics - is that correct? – andy Commented Jan 9, 2018 at 9:36
• @andy Yes. That's exactly what I'm referring to. – asprin Commented Jan 9, 2018 at 9:38
• 1 Plus if you want use your template then view.popup.content = template.content before opening popup. Same for location, set view.popup.location with lat-lon value where to pinpoint such popup on map. – andy Commented Jan 9, 2018 at 10:27

2 Answers 2

You should use view.popup.open and pass the properties location and features:

view.popup.open({
    location: point,
    features: [graphic]
});

Example here.

Here's an example I did with an infoWindow for a polygon.

    var infoTemplate = new InfoTemplate();

    var selectedState = Graphic(geometry,highlightSymbol,attributes,infoTemplate);

    this.map.graphics.add(selectedState);
    this.map.infoWindow.setFeatures([selectedState]);
    this.map.infoWindow.show(this.map.toScreen(geometry.getExtent().getCenter()));