Custom popups

This section describes how to create custom popups. There are four options for custom popups: graphic, text, html, and none. For more information, refer Popup.

None, text, and html popups

1. Double click the GISMapApp in the imported app to open the editor.

2. Select the Esri Cities layer.

   

3. No popup

   1. Enable the popup option and select the None option.

   2. Save and confirm that no popup appears now when an asset is clicked.

4. Text popup

   1. Select Text option and add the below mentioned in the text field.

      You have selected the {CITY_NAME} city with {POP} population.

   2. Enable Width option and introduce 150 pixels as Number.

   3. Save and explore the text popup in the preview section.

   

5. HTML popup

   1. Select Html option and add the below in the html field.

      You have selected the <b>{CITY_NAME}</b> with <b>{POP}</b> population.

   

   1. Save and explore the html popup in the preview section.

   

Graphic popup

6. Create a new Layer "Graphic popup".

7. Select Custom as layer type.

8. Navigate to DATA tab and add: [{"x":0,"y":0,"color":"Red","level":68},{"x":5,"y":5,"color":"Blue","level":47}]

9. Add popup property and set it to Graphic with the graphic property set to GlassCylinderFill.

10. Add customProperties property and select + ITEM to add a new Custom Property.

    1. Set IsContant to true

    2. Name to Value

    3. Value to {level}, this will pass the value of level property for each feature as the Value custom property.

11. Add customProperties property and select + ITEM to add another Custom Property

    1. Set IsContant to true

    2. Name to FillColor

    3. Value to {color}, this will pass the value of color property for each feature as the FillColor custom property.

    

12. Save the layer. In the Map Preview 2, blue circle markers appears and when clicked, an empty popup is displayed (the actual graphic inside the popup is not shown in the preview).

13. Save and close the GISMapApp editor.

14. Deploy your view app. Launch OMI or OMI Web and explore how it works the graphic renderer.

    

Below the json string with the configuration of the layer.

{

"data": [

{

"color": "Red",

"level": 68,

"x": 0,

"y": 0

},

{

"color": "Blue",

"level": 47,

"x": 5,

"y": 5

}

],

"title": "Graphic popup",

"type": "custom",

"isBaseMap": false,

"popup": {

"graphic": "GlassCylinderFill",

"type": "graphic",

"customProperties": [

{

"isConstant": true,

"name": "Value",

"value": "{level}"

},

{

"isConstant": true,

"name": "FillColor",

"value": "{color}"

}

]

}

}