> For the complete documentation index, see [llms.txt](https://docs.jmapcloud.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.jmapcloud.io/en/jmap-cloud-portal/user-guide-for-jmap-cloud-portal/configuring-project-data/configuring-a-layer/popups.md).

# Popups

Popups allow contextual information to be displayed for features clicked or hovered on the map. This information can include text, attribute values, hyperlinks, images, etc.

You can precisely configure the data to display in popups for each layer.

The **Popups** section, accessible via the popup icon <img src="/files/Nc60YC4n1wSwGnsV22wd" alt="" data-size="line">, allows you to define the content and display parameters of tooltips.

<figure><img src="/files/iYmX9XiLCUpdpVtQEw2x" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="50.22265625" align="center" valign="top">#</th><th valign="top">Description</th></tr></thead><tbody><tr><td align="center" valign="top">1</td><td valign="top"><p>Check this box to enable popup display for the layer in JMap NG applications. </p><p>If the layer comes from a <a href="/pages/ztLj22r1PMp2QwGM2EGI#wms-wmts-specific-properties">WMS/WMTS data source</a> and feature information is available to display in a popup, check this box. You do not need to configure the popup content.</p></td></tr><tr><td align="center" valign="top">2</td><td valign="top">Text field for writing the popup content. See the <a href="#popup-content">Popup Content</a> section for details.</td></tr><tr><td align="center" valign="top">3</td><td valign="top"><p>Attributes available for the tooltip. </p><p>These are the layer attributes you check in the <a href="/pages/ztLj22r1PMp2QwGM2EGI">Properties</a> section.</p></td></tr><tr><td align="center" valign="top">4</td><td valign="top">Functions available for the tooltip. The <a href="#popup-content">Popup Content</a> section provides more details.</td></tr><tr><td align="center" valign="top">5</td><td valign="top"><p><strong>Zoom levels</strong></p><p>Zoom level range at which popup are displayed. </p><p>Select the range by dragging the indicators on the bar or entering the minimum and maximum zoom thresholds.</p></td></tr></tbody></table>

## Popup content

The content is defined using a text field in which you can combine static text with dynamic elements called functions. When displayed, these functions are executed and replaced by their result.

**Available functions**

<table data-header-hidden><thead><tr><th width="242.5703125" valign="top">Function</th><th valign="top">Description</th></tr></thead><tbody><tr><td valign="top"><code>centroid()</code></td><td valign="top">Replaced by the coordinate of the geometric centroid of the feature's geometry.</td></tr><tr><td valign="top"><code>date()</code></td><td valign="top">Replaced by the current date.</td></tr><tr><td valign="top"><code>elementId()</code></td><td valign="top">Replaced by the feature identifier.</td></tr><tr><td valign="top"><code>encode(attrib, encoding)</code></td><td valign="top"><p>Replaced by the value of attribute <em>attrib</em>, once encoded with the specified character encoding (UTF-8, CP437, ISO 8859-1, etc.).</p><p><strong>Example:</strong> <code>encode(name, UTF-8)</code></p></td></tr><tr><td valign="top"><code>ev(attrib)</code></td><td valign="top"><p>Replaced by the value of the linked attribute whose name is passed as a parameter, for the hovered feature. </p><p><strong>Example:</strong> <code>ev(id)</code></p></td></tr><tr><td valign="top"><code>ev(attrib, useValueDomain)</code></td><td valign="top"><p>When <code>true</code>, replaced by the value domain label. </p><p>When <code>false</code> (or omitted), replaced by the attribute value. </p><p><strong>Example:</strong> <code>ev(categorie, true)</code></p></td></tr><tr><td valign="top"><code>format(attrib, format)</code></td><td valign="top"><p>Replaced by a date or number formatted according to a specific format. </p><p><strong>Example:</strong> <code>format(date_insp, dd/MM/yyyy)</code> or <code>format(attrib, ##0,00)</code></p></td></tr><tr><td valign="top"><code>ifNull(attrib, value)</code></td><td valign="top"><p>Replaced by <em>value</em> only if <em>attrib</em> is null. </p><p><strong>Example:</strong> <code>ifNull(temp, N/A)</code></p></td></tr><tr><td valign="top"><code>ifNotNull(attrib, value)</code></td><td valign="top"><p>Replaced by <em>value</em> only if <em>attrib</em> is not null. </p><p><strong>Example:</strong> <code>ifNotNull(land_value, $)</code></p></td></tr><tr><td valign="top"><code>lineLength()</code></td><td valign="top">Replaced by the length of a hovered linear feature.</td></tr><tr><td valign="top"><code>polygonArea()</code></td><td valign="top">Replaced by the area of a hovered polygon feature.</td></tr><tr><td valign="top"><code>projectName()</code></td><td valign="top">Replaced by the name of the current project.</td></tr><tr><td valign="top"><code>subString(attrib, startIx, endIx)</code></td><td valign="top"><p>Replaced by a substring of attribute <em>attrib</em>, between positions <em>startIx</em> and <em>endIx</em>. </p><p><strong>Example:</strong> <code>subString(name, 0, 5)</code> displays the first 5 characters of the <em>name</em> attribute value. If the value is <em>Montréal</em>, the popup displays <em>Montr</em>.</p></td></tr><tr><td valign="top"><code>userName()</code></td><td valign="top">Replaced by the user code of the currently logged-in user.</td></tr><tr><td valign="top"><code>attachment()</code></td><td valign="top"><p>Replaced by the documents attached to the feature. </p><p>JMap NG users can view the document by clicking on it. </p><p>See the <a href="/pages/WWwDeCdThcthSzXHVmhL">Data Source Attachments</a> section for details.</p></td></tr></tbody></table>

**To configure popup content:**

1. Enter the static text.
2. To insert dynamic content, place the cursor at the desired location in the content field.
3. Click the function to insert. It is automatically added at the selected location, and a menu displaying compatible attributes appears.
4. Select an attribute and add a value if necessary.
5. Click ![](/files/3j5ZnWV2rz6osBQgefsz) to save the popup content.
