# Mouseover

Mouseover bubbles are meant to display information about the elements they are pointing to. This information includes text, attribute values, hyperlinks, images, etc. The JMap administrator determines what information is displayed in the bubbles of each layer.

<figure><img src="https://2098443701-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcA9CuUnY5hTYroiPhD1w%2Fuploads%2FdYpKYKJyyDwQ6EBklK2A%2Fmouseover_fr.jpg?alt=media&#x26;token=c6a2c2a8-3b01-4872-8e1e-1c7fddbeade5" alt=""><figcaption></figcaption></figure>

The content of mouseover bubbles can be formatted using HTML tags. Mouseover bubbles can also contain JavaScript programs.

To configure mouseover for a layer, click on **Mouseover** in the details section of the layer.

<table data-header-hidden><thead><tr><th width="181.5"></th><th></th></tr></thead><tbody><tr><td><strong>Mouseover</strong></td><td></td></tr><tr><td>Mouseover</td><td>Enter the content of the mouseover bubble. See sections below for an explanation of the syntax.</td></tr><tr><td>Background color</td><td>Select the background color of the mouseover bubble.</td></tr><tr><td>Prevent text duplication</td><td>Select this option to prevent the same text from being repeated many times within the same bubble. This can happen when pointing to many map elements on the same layer that have the same mouseover content (e.g. street segments at an intersection).</td></tr><tr><td>Minimum scale</td><td>Activate this option and enter the minimum scale from which the mouseover bubble must be displayed.</td></tr><tr><td>Maximum scale</td><td>Activate this option and enter the maximum scale from which the mouseover bubble must be displayed.</td></tr></tbody></table>

## Providing mouseover content

You must provide the text that will be used as the content of the bubble. This text can be comprised of static parts (displayed as is), variable parts (replaced at display time by another value), simple JavaScript programs, and HTML tags. For instance, the elementValue(city) function will be replaced at display time by the value of the city attribute for the pointed element.

### Mouseover syntax

The mouseover syntax is comprised of various functions that will determine the content of the bubbles. Functions and their parameters are generally not case sensitive. For instance, `ev(city)` is equal to `Ev(CITY)`.

The following table explains the various available functions:

<table data-header-hidden><thead><tr><th width="209.5"></th><th></th></tr></thead><tbody><tr><td><strong>Function</strong></td><td><strong>Description</strong></td></tr><tr><td><strong>elementValue</strong>(<em>attrib</em>) or <strong>ev</strong>(<em>attrib</em>)<br><em>attrib</em>: the name of an attribute</td><td>Replaced by the value of the bound attribute whose name is passed as a parameter for the pointed element. <br>For example, <code>ev(id)</code> will be replaced by the value of the <em>id</em> attribute for this element.</td></tr><tr><td><strong>elementId</strong>()</td><td>Replaced by the element identifier.</td></tr><tr><td><strong>polygonArea</strong>()</td><td>Replaced by the area of a pointed polygon type element.</td></tr><tr><td><strong>lineLength</strong>()</td><td>Replaced by the length of a pointed line type element.</td></tr><tr><td><strong>centroid</strong>()</td><td>Replaced by the coordinates of the geometric centroid of the element's geometry.</td></tr><tr><td><strong>format</strong>(<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>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><br>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.</td></tr><tr><td><strong>ifNull</strong>(<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>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><strong>ifNotNull</strong>(<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>Replaced by the 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><strong>subString</strong>(<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.<br><em>endIx</em>: ending position in the character string.</td><td>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><strong>encode</strong>(<em>attrib</em>, <em>encoding</em>)<br><em>attrib</em>: the name of the attribute to code<br><em>encoding</em>: the name of the encoding</td><td>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>&#x3C;<strong>script</strong>> code <em>JavaScript</em>&#x3C;<strong>/script</strong>></td><td>Runs the <em>JavaScript</em> code found between the tags. In <em>JavaScript</em>, the attribute values of the elements are accessible through the <code>elementValue()</code> or <code>ev()</code> function.<br>Mathematical operations or character string operations can be performed on attribute values. <br>To display content in the mouseover, the script must call on the <code>print()</code> function.<br><strong>Example</strong><br><code>&#x3C;script></code><br><code>print ( ev(population) / ev(area) );</code><br><code>&#x3C;/script></code><br>Calculates and displays the result of the value of the <em>population</em> attribute divided by the value of the <em>area</em> attribute.<br><strong>Example</strong><br><code>&#x3C;script></code><br><code>var KM_IN_MI = 0.621371;</code><br><code>var dist_mi = ev(km) * KM_IN_MI;</code><br><code>print('ev(osm_name)');</code><br><code>print(dist_mi.toFixed(1) + " mi");</code><br><code>&#x3C;/script></code><br>Converts the distance in kilometers contained in the value of the <em>km</em> attribute into miles. <br>Displays the value of the <em>osm_name</em> attribute and the distance in miles with a decimal figure.</td></tr><tr><td>&#x3C;<strong>a href="download:file URL"</strong>><em>some text</em>&#x3C;<strong>/a</strong>></td><td>JMap supports a special hyperlink syntax that allows a user to download a file by clicking on the link. <br>The file to download can come from a <em>http:</em> or a <em>file:</em> URL.<br><strong>Example</strong><br><code>&#x3C;a href="download:http://someserver/123/report.pdf">Download&#x3C;/a></code><br>Displays a link that can be used to download the <em>report.pdf</em> file from the web.<br><strong>Example</strong><br><code>&#x3C;a href="download:file://D:/123/report.pdf">Download&#x3C;/a></code><br>Displays a link that can be used to download the <em>report.pdf</em> file from a Windows file system folder.</td></tr><tr><td><strong>photosAsThumbnails</strong>()</td><td>Replaced by smaller versions of the images attached to the element. The user can click on a thumbnail to open the full size image.<br><code>photosAsThumbnails(title)</code><br><code>photosAsThumbnails(date)</code><br><code>photosAsThumbnails(title,date)</code><br>With these options, the title and/or date will be displayed with each thumbnail. <br>It is very important that you do not add any spaces between <em>title</em>, the comma, and <em>date</em>.</td></tr><tr><td><strong>projectName</strong>()</td><td>Replaced by the name of the current project.</td></tr><tr><td><strong>userName</strong>()</td><td>Replaced by the user code of the user that is currently connected.</td></tr><tr><td><strong>sessionId</strong>()</td><td>Replaced by the identifier of the current session.</td></tr><tr><td><strong>host</strong>()</td><td>Replaced by the name of the host or address of the JMap Server instance to which the application is connected.</td></tr><tr><td><strong>port</strong>()</td><td>Replaced by the port number (http or direct) of the JMap Server instance to which the application is connected.</td></tr><tr><td><strong>date</strong>()</td><td>Replaced by the current date and time.</td></tr></tbody></table>

#### HTML content

The content of the bubble can be formatted using simple HTML tags. Mouseover bubbles do not support CSS or advanced tags such as `<DIV>`. The following HTML tags are supported and frequently used in mouseover:

`<B>, <I>, <U>, <A>, <IMG>, <TABLE>, <BR>`

You can insert hyperlinks in mouseover bubbles. These hyperlinks can be clicked, and they allow users to open HTML pages or to open or download files.

### Examples

<table data-header-hidden><thead><tr><th width="371.5"></th><th></th></tr></thead><tbody><tr><td><strong>Mouseover content</strong></td><td><strong>Display</strong></td></tr><tr><td><code>City : ev(CITY)</code><br>A simple example of static text with the value of an attribute.</td><td><img src="https://2098443701-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcA9CuUnY5hTYroiPhD1w%2Fuploads%2FyTt3tsPe6uxTfN4tcJEf%2Fmouseover_2_en.jpg?alt=media&#x26;token=49c33a07-7177-4267-9a1c-339b6b752eda" alt=""></td></tr><tr><td><code>City: ev(CITY)</code><br><code>(ev(COUNTRY))</code><br>Example containing static parts and displaying 2 attribute values on 2 lines.</td><td><img src="https://2098443701-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcA9CuUnY5hTYroiPhD1w%2Fuploads%2F5R0pRpw8XvoAhIwZ9XWH%2Fmouseover_3_en.jpg?alt=media&#x26;token=bb181f4c-c4a5-483d-8463-93c0e265c4db" alt="">/</td></tr><tr><td><code>&#x3C;b>ev(STATION_NAME)&#x3C;/b></code><br><code>&#x3C;a href="ev(URL)">Site web&#x3C;/a></code><br>An example of basic formatting using HTML tags and a hyperlink where the URL comes from the value of the URL attribute.</td><td><img src="https://2098443701-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcA9CuUnY5hTYroiPhD1w%2Fuploads%2FVM0rEUDmWEEAqPrSMsrw%2Fmouseover_4_fr.jpg?alt=media&#x26;token=790a8c56-8f97-40b0-a84d-649e4441dbd5" alt=""></td></tr><tr><td><code>&#x3C;b>ev(DESCRIPTION)&#x3C;/b></code><br><code>&#x3C;img src="ev(IMAGE_URL)" height="175" width="234" /></code><br>An example of an HTML tag that takes the image URL from the value of the IMAGE_URL attribute.</td><td><img src="https://2098443701-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcA9CuUnY5hTYroiPhD1w%2Fuploads%2FaM5UbpluHN09C4AXnI1X%2Fclip0001.png?alt=media&#x26;token=ba4557fa-ac09-4dea-aa6a-61de3f2f1134" alt=""></td></tr><tr><td><code>Area :</code><br><code>ev(AREA_KM2) km2</code><br><code>&#x3C;script></code><br><code>var SQ_KM_IN_SQ_MI = 2.58998811;</code><br><code>var area_sq_mi = ev(AREA_KM2) / SQ_KM_IN_SQ_MI;</code><br><code>print(area_sq_mi.toFixed(1) + " sq. mi");</code><br><code>&#x3C;/script></code><br>An example of a <code>&#x3C;script></code> tag with JavaScript code. The value of the AREA_KM2 attribute is converted from square kilometers to square miles.</td><td><img src="https://2098443701-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcA9CuUnY5hTYroiPhD1w%2Fuploads%2FcHq26zoPOYiJ2LxFoHSY%2Fclip0042.jpg?alt=media&#x26;token=5531870d-6178-4916-ba27-04f19fe880e8" alt=""></td></tr><tr><td><code>&#x3C;table style="border:3px solid black; border-radius:5px; background: #1fc8db; color:white"></code><br><code>&#x3C;thead> &#x3C;tr> &#x3C;th style="padding: 5px" class="">Name&#x3C;/th> &#x3C;th style="padding: 5px" class="actions">FirstName&#x3C;/th>&#x3C;/tr> &#x3C;/thead></code><br><code>&#x3C;tbody> &#x3C;tr> &#x3C;td style="padding: 5px" class="">Gratton&#x3C;/td> &#x3C;td style="padding: 5px" class="actions">Bob&#x3C;/td> &#x3C;/tr> &#x3C;/tbody></code><br><code>&#x3C;/table></code><br>An example of formatting with a style attribute.</td><td><img src="https://2098443701-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcA9CuUnY5hTYroiPhD1w%2Fuploads%2Fr7SxAM8AKIwJkB8Q6TfU%2Fclip0076.png?alt=media&#x26;token=281875e1-813e-4f59-bb08-533824a46fc7" alt=""></td></tr></tbody></table>

## Locating map elements or coordinates using mouseover

Mouseover supports a function to locate map coordinates or elements using a special URL syntax. A hyperlink is displayed in the bubble, and when it is clicked, the map locates the specified element(s) or region. This function is only available in JMap Pro.

| **Mouseover locate example**                                             | **Description**                                                                                                                                                                                                                                                                                                                                                                   |
| ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `<a href="locate:region;-73;45;5;5">Locate</a>`                          | <p>Displays a <em>Locate</em> hyperlink. <br>When clicked, locates the region defined by x=-73, y = 45, width = 5, height = 5 in the same map. <br>This is expressed in the map's units.</p>                                                                                                                                                                                      |
| `<a href="locate:object;subway;name;'atwater'">Locate</a>`               | <p>Displays a <em>Locate</em> hyperlink. <br>When clicked, locates the elements on the subway layer that have their attribute name equal to atwater in the same map.</p>                                                                                                                                                                                                          |
| `<a href="locate:object;subway;name;'a%'">Locate</a>`                    | <p>Displays a <em>Locate</em> hyperlink. <br>When clicked, locates the elements on the subway layer that have their attribute name starting with letter a in the same map.</p>                                                                                                                                                                                                    |
| `<a href="locate:object;subway;name;'atwater';1000">Locate</a>`          | <p>Displays a <em>Locate</em> hyperlink. <br>When clicked, locates the elements on the subway layer that have their attribute name equal to atwater in the same map. <br>The resulting map has a scale of 1 : 1000.</p>                                                                                                                                                           |
| `<a href="locate:object;subway;name;'atwater':target=Result">Locate</a>` | <p>Displays a <em>Locate</em> hyperlink. <br>When clicked, locates, in a new map called <em>Result</em>, the elements on the subway layer that have their attribute name equal to atwater.<br> If a map called <em>Result</em> already exists, it is reused. <br>If the name of the map was new, a new map (with an automatically generated name) would be created each time.</p> |

## Using a URL to display content

You can specify a URL that opens an HTML page to display in the mouseover bubble (only supported in JMap Pro). The HTML page will occupy 100% of the bubble. The syntax is as follows:

`$URL{http://awebsite.com}`

The specified URL can be static or it can come from an attribute. It can also use attribute values as parameters, as shown below:

`$URL{http://awebsite.com?param1=ev(ATTRIB_A)&param2=ev(ATTRIB_B)}`

<figure><img src="https://2098443701-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcA9CuUnY5hTYroiPhD1w%2Fuploads%2FgRvEeEcPqqk3iY39tSzh%2Fmouseover_5_fr.jpg?alt=media&#x26;token=f84c910f-fbba-4f01-95b1-fb37e6f2b344" alt=""><figcaption></figcaption></figure>
