---
title: "popup()"
canonical: "https://onesaitplatform.refined.site/space/DOCT/2220801326/popup()"
format: markdown
---
> ℹ️ **Information**
> ℹ️ 
> ℹ️ Implementation version: beta 1.00
> ℹ️ 
> ℹ️ Updated in: beta 1.09

# Description

<span style="color: #091e42">Activates the information pop-up window when an item on the map, either entity or primitive, </span><span style="color: #091e42">is selected</span><span style="color: #091e42">. For </span><span style="color: #091e42">an item's </span><span style="color: #091e42">pop-up to work, this function be launched, the target element must be selectable, and the pop-ups must be enabled. Should the selected element do not have any properties within the properties object, then the pop-up will not be displayed.</span>

<span style="color: #091e42">The pop-up's title corresponds to the contents of the name property (properties.name). The pop-up's </span><span style="color: #091e42">content </span><span style="color: #091e42">will be the other fields contained within properties, or the contents of the description field (properties.description) in case the pop-up is configured to display a description instead of a table.</span>

<span style="color: #091e42">By default, the pop-up will display the information of the highest element within the selection stack. If it is configured in multiple mode, it will carry out a drill-picking, so you can visualize the properties of the different selected elements (this is independently of whether the selection of entities was single or multiple).</span>


# Invocation

```javascript
popup(
	selectorHandler,
	showType,
	showZoomOption*,
	bannerColorFromFeature*
)
```

* Optional parameters

# Input parameters

## selectorHandler

Parameter that collects the type of pop-up to be used. It is taken as a text string, and it can be one of the following two options:

1. **single**: to show simple pop-ups with the most superficial selection element information.
2. **~~multiple~~**~~: to show complex pop-ups with the information of all the elements in the vertical line (drill-picking)~~.

## showType

Defines the way in which the information of the selected item will be displayed. It is exposed as a text string, taking one of these two values:

1. **table**: it will show the information contained in the properties object as a table of keys and values.
2. **description**: it will show the contents of the description field of the properties object, formatted in HTML (it accepts styles).

## showZoomOption

<span style="color: #091e42">Optional parameter; if not included, it will take the default value 'showZoom'. It receives a text string that defines whether or not the option to zoom to the selected item will appear in the pop-up. It accepts one of these two possibilities:</span>

1. **showZoom**: to show the zoom option.
2. **hideZoom**: to hide the zoom option.

## ~~bannerColorFromFeature~~

<span style="color: #091e42">~~Optional parameter. If included, the banner header's ~~</span><span style="color: #091e42">~~color ~~</span><span style="color: #091e42">~~ will take the color of the billboard background or of the selected point.~~</span>

# Use examples

<span style="color: #091e42">This method has a passive operation. To use this method, you only have to invoke it after defining the viewer in the code. Its use "on the fly" (that is, while the viewer is running) is not possible, since it requires re-loading the DOM for its operation.</span>


<span style="color: #091e42">A simple pop-up showing the information as a table, with the option to show zoom activated.</span>

```javascript
popup(
	'single',
	'table',
	'showZoom'
)
```

<span style="color: #091e42">A simple pop-up, showing the information as a descriptive text, taking the color of the entity you select, without the option to show zoom.</span>

```javascript
popup(
	'single',
	'table',
	'hideZoom',
	'bannerColorFromFeature'
)
```