4

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?
});
Community
  • 1
  • 1
asprin
  • 9,579
  • 12
  • 66
  • 119
  • 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 Jan 09 '18 at 07:40
  • No, I'm not. The popup appears only if I click on the graphic. – asprin Jan 09 '18 at 07:41
  • In other words what you want is to open popup programatically without clicking on graphics - is that correct? – andy Jan 09 '18 at 09:36
  • @andy Yes. That's exactly what I'm referring to. – asprin Jan 09 '18 at 09:38
  • What about `view.popup.open()`? Where such popup should appear, at `point` location? – andy Jan 09 '18 at 10:18
  • 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 Jan 09 '18 at 10:27
  • Did it work for you? Have you solved your issue? Any feedback is appreciated so that this thread can be completed. – andy Jan 15 '18 at 09:48
  • @andy Solved and marked as answer. – asprin Apr 24 '18 at 13:01
  • Hey @andy can you please help me out at this question https://stackoverflow.com/questions/69630872/display-info-window-on-the-multiple-coordinates-on-the-arcgis-map-in-next-js ... I am having multiple markers on the map. I need to open popup for each with their corresponding data – Deep Kakkar Oct 20 '21 at 13:43

2 Answers2

7

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

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

Example here.

GavinR
  • 6,094
  • 7
  • 33
  • 44
  • Works as intended. However, the only caveat is the use of setTimeout on the popup. Wish there was a callback event for when a graphic is added onto the view. – asprin Apr 24 '18 at 12:58
  • 1
    @asprin I think that is possible by using `view.graphics.on("change",....` . See updated code here: https://jsfiddle.net/gavinr/f658k8ra/ – GavinR Apr 25 '18 at 19:36
  • 1
    Nice. Learnt something new today. Thanks for the inputs GavinR. – asprin Apr 26 '18 at 03:50
  • @asprin and GavinR Can you please help me out at this question https://stackoverflow.com/questions/69630872/display-info-window-on-the-multiple-coordinates-on-the-arcgis-map-in-next-js . In my case I am having multiple markers on the map and each marker has own custom data. – Deep Kakkar Oct 20 '21 at 13:40
1

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()));
Joe Davies
  • 26
  • 4
  • Can you please help me out at https://stackoverflow.com/questions/69630872/display-info-window-on-the-multiple-coordinates-on-the-arcgis-map-in-next-js – Deep Kakkar Oct 20 '21 at 14:24