How to create a popup

1158
4
12-12-2021 08:22 PM
Labels (1)
altair
by
New Contributor III

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

altair_0-1639380045251.png

 

     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>"
          }]
        },

 

Tags (1)
4 Replies
Kishore
Occasional Contributor

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 

 

Regards,
Kishore
0 Kudos
altair
by
New Contributor III

@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

 

altair_1-1639377036711.png

 

 

0 Kudos
Kishore
Occasional Contributor

@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.  

Regards,
Kishore
0 Kudos
altair
by
New Contributor III

@Kishore hello,

 

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

 

0 Kudos