topic Re: How to create a popup in ArcGIS JavaScript Maps SDK Questions

How to create a popup

altair — Mon, 13 Dec 2021 08:13:26 GMT

Hi everyone, I am new here. I am wondering on how to create a popup like when the user clicked the pin. it will look like this, I used graphic to the map using PictureMarkerSymbol

const point = new Graphic({

geometry: {

latitude: 95.7129,

longitude:37.0902,

type: 'point',

symbol: LocationPin,

popupTemplate: {

title:"",

actionsMenuEnabled: false,

content: [{

type: "text",

text: "<br><div class=\"popuptemplate\"><u>" + teacher.name + "</u> <br>" +

"<div class=\"body2\">" + location.address.street1 + ", " + location.address.street2 + "<br>" +

location.address.city + ", " + location.address.state + " " + location.address.zipCode + "</div></div>"

}]

Re: How to create a popup

Kishore — Mon, 13 Dec 2021 06:01:15 GMT

hi @altair , I assume you are adding the graphic to the map using PictureMarkerSymbol you can use attributes and popup template while creating the graphics to display the popup on click. please refer the code below:

var pointGraphic = new Graphic({ geometry: pointGeometry, symbol: PictureMarkerSymbol, attributes: {"ID":"0", "Name":"xxx"}, popupTemplate: { title: "Name", content: "you can define any object here..." } });

Please check the samples & help document at: popup-customcontent

Re: How to create a popup

altair — Mon, 13 Dec 2021 06:30:43 GMT

@Kishore hello, thank you for the response, yes i can display the popup, but i want change the behavior on how the popup display, i just want to display the popup just like in the picture

Re: How to create a popup

Kishore — Mon, 13 Dec 2021 07:46:24 GMT

@altair Hi,

If you are using ESRI popup widget from 4.x, the default CSS details are available at "Popup.scss". you can alter the CSS class locally to overwrite the defaults.

Please share your environment details to understand the requirement.

Re: How to create a popup

altair — Mon, 13 Dec 2021 08:04:15 GMT

@Kishore hello,

Yes I am using the ESRI popup, can you please help me on configuring this ?