# Popups

Popups are used to display contextual information about hovered map features. This information may include text, attribute values, hyperlinks, images, and more.

You can configure the specific data shown in popups for each layer.

The **Popups** section, accessible via the ![](https://3291879974-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9n1KCuTyIKwSpZcPcC6l%2Fuploads%2FxQXSZHNnxjf2zluq7AWV%2Fstudio-couche-infobulle.png?alt=media\&token=afa907b7-0511-4e98-a5a0-53ef714928e1) icon, allows you to define both the content and display settings of popups.

<figure><img src="https://3291879974-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9n1KCuTyIKwSpZcPcC6l%2Fuploads%2FFaVmUmrHMF6jJyf5Cn6y%2Fclip010EN.png?alt=media&#x26;token=59dba389-46b9-49d5-b31c-c55b00de5752" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="58" align="center"></th><th></th></tr></thead><tbody><tr><td align="center">1</td><td>Check this box to <strong>enable the display</strong> of popups for the layer in JMap NG applications.</td></tr><tr><td align="center">2</td><td>Area for entering the <strong>popup content</strong>.<br>The <a href="#popup-content">Popup content</a> section provides details on this topic.</td></tr><tr><td align="center">3</td><td>Available <strong>attributes</strong> for the popup.<br>These are the layer attributes that you select in the <a href="layer-properties">Properties</a> section.</td></tr><tr><td align="center">4</td><td>Available popup <strong>functions</strong>.<br>The <a href="#popup-content">Popup content</a> section provides details on this topic.</td></tr><tr><td align="center">5</td><td><strong>Zoom levels</strong>.<br>Zoom levels range at which labels are displayed.<br>Define the range by dragging the indicators on the bar or by entering the minimum and maximum zoom values ​​for the range.</td></tr></tbody></table>

## Popup content

Popup content is defined using a text field that can combine static text with dynamic components called **functions**. When the popup is displayed, these functions are executed and replaced with their results.

Here are the functions available for popup configuration:

<table data-header-hidden><thead><tr><th width="255"></th><th valign="top"></th></tr></thead><tbody><tr><td>centroid()</td><td valign="top">Replaced by the coordinates of the geometric centroid of the element's geometry.</td></tr><tr><td>date()</td><td valign="top">Replaced by the current date.</td></tr><tr><td>elementId()</td><td valign="top">Replaced by the element identifier.</td></tr><tr><td>encode(<em>attrib</em>, <em>encoding</em>)<br><em>attrib</em> : the name of the attribute to encode<br><em>encoding</em> : the name of the encoding</td><td valign="top">Replaced by the value of the <em>attrib</em> attribute once it is encoded with the specified character encoding (UTF-8, CP437, ISO 8859-1, etc). <br><strong>Example</strong> <br><code>encode(name, UTF-8)</code> <br>Replaced by the value of the <em>name</em> attribute encoded in UTF-8 characters.</td></tr><tr><td>ev(<em>attrib</em>)<br><em>attrib</em> : the name of an attribute</td><td valign="top"><p>This function is replaced by the value of the bound attribute whose name is passed as a parameter for the pointed element. <br><strong>Example</strong><br><code>ev(id)</code> </p><p>Label displays the value of the <em>id</em> attribute for this element.</p></td></tr><tr><td>format(<em>attrib</em>, <em>format</em>) <br><em>attrib</em>: the name of a date or numerical attribute <br><em>format</em>: the desired date format</td><td valign="top"><p>Replaced by a number or date that was formatted according to a specific format. <br><strong>Example</strong> <br><code>format(date_insp, dd/MM/yyyy)</code> </p><p>where <em>date_insp</em> is the name of an attribute containing a date and <em>dd/MM/yyyy</em> is the desired date format, as indicated in the documentation of the <a href="http://java.sun.com/javase/6/docs/api/java/text/SimpleDateFormat.html">java.text.SimpleDateFormat</a> Java class.<br><strong>Example</strong> <br><code>format(attrib, ##0,00)</code> <br>where <em>attrib</em> is the name of an attribute containing a number and <em>##0,00</em> is the desired number format, as indicated in the documentation of the <a href="https://docs.oracle.com/javase/6/docs/api/java/text/DecimalFormat.html">java.text.DecimalFormat</a> Java class.</p></td></tr><tr><td>ifNull(<em>attrib</em>, <em>value</em>)<br><em>attrib</em> : the name of the attribute to test<br><em>value</em> : the value to display if <em>attrib</em> is null</td><td valign="top">This function is replaced by the <em>value</em> value only if the value of the <em>attrib</em> attribute is null. <br>If the attribute value is not null, nothing is displayed. <br><strong>Example</strong> <br><code>ifNull(temp, N/A)</code> <br>Displays N/A if the value of the <em>temp</em> attribute is null. <br><strong>Example</strong> <br><code>ifNull(attrib_a, attrib_b)</code> <br>Displays the value of the <em>attrib_b</em> attribute if the value of the <em>attrib_a</em>attribute is null.</td></tr><tr><td>ifNotNull(<em>attrib</em>, <em>value</em>)<br><em>attrib</em> : the name of the attribute to test<br><em>value</em> : the value to display if <em>attrib</em> is not null</td><td valign="top">This function is replaced by the <em>value</em> value only if the value of the <em>attrib</em> attribute is not null. <br>If the attribute value is null, nothing is displayed. <br><strong>Example</strong> <br><code>ifNotNull(land_value, $)</code> <br>Displays $ only if the value of <em>land_value</em> is not null.</td></tr><tr><td>lineLength()</td><td valign="top">This function is replaced by the length of a pointed line type element.</td></tr><tr><td>polygonArea()</td><td valign="top">This function is replaced by the area of a pointed polygon type element.</td></tr><tr><td>projectName()</td><td valign="top">This function is replaced by the name of the current project.</td></tr><tr><td>subString(<em>attrib</em>, <em>startIx</em>, <em>endIx</em>)<br><em>attrib</em>: the name of the attribute for which a part must be extracted. <br><em>startIx</em>: starting position in the character string. <em>endIx</em>: ending position in the character string.</td><td valign="top">This function is replaced by a portion of the value (as a character string) of the <em>attrib</em> attribute, between the <em>startIx</em> position and <em>endIx</em> position.<br><strong>Example</strong> <br><code>subString(name, 0, 5)</code> <br>Replaced by the first five characters of the name attribute value. If this value is <em>Montreal</em>, the mouseover will display <em>Montr</em>.</td></tr><tr><td>userName()</td><td valign="top">This function is replaced by the user code of the user that is currently connected.</td></tr></tbody></table>

The attributes available for use in functions are shown in the **Attributes** section.

**To configure popup content**:

1. Enter the static text.
2. To insert dynamic content, place the cursor at the desired location in the text field.
3. Click the function you want to use. It will be inserted automatically, and a menu of compatible attributes will appear.
4. Select an attribute and add a value if applicable.
5. Click ![](https://3291879974-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9n1KCuTyIKwSpZcPcC6l%2Fuploads%2FNK6sBJK6PdVqpPdG3kc6%2Fstudio-ok.png?alt=media\&token=fa22566b-2276-4fac-a226-f01feaf9dd87) to save the tooltip content.