# Infobulles

Cette section permet de définir les paramètres d'affichage des infobulles de la couche tels que le contenu à afficher, la couleur de la bulle, etc.

L'interface de configuration des infobulles se présente comme suit :

<figure><img src="https://294136567-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdAw9YBQHVS9E90BSZYQK%2Fuploads%2Fgit-blob-4ded7f07f80c6e68c68e00316983f5a1e1683fde%2Finfobulles-v5.png?alt=media" alt="" width="357"><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="75"></th><th></th></tr></thead><tbody><tr><td><strong>1</strong></td><td>La liste des attributs vous permet de sélectionner des attributs et de les ajouter au contenu de la bulle en appuyant sur le bouton marqué d'une flèche vers le bas.</td></tr><tr><td><strong>2</strong></td><td>La liste des fonctions vous permet de sélectionner des fonctions de formatage du contenu (gras, italique, etc.) et de les ajouter au contenu de la bulle en appuyant sur le bouton marqué d'une flèche vers le bas.</td></tr><tr><td><strong>3</strong></td><td><p>Saisissez le contenu de la bulle.<br>Ce contenu peut être composé de texte statique, ainsi que de fonctions affichant des valeurs d'attributs, des images, etc.<br>Les infobulles supportent aussi la programmation en JavaScript pour effectuer des opérations mathématiques et des opérations sur les chaînes de caractères en utilisant les valeurs des attributs.</p><p>Pour plus d'information sur la définition du contenu des infobulles, consultez la section <a href="#creation-du-contenu-des-infobulles">Création du contenu des infobulles</a>.</p></td></tr><tr><td><strong>4</strong></td><td>Sélectionnez la couleur de fond de la bulle pour cette couche.</td></tr><tr><td><strong>5</strong></td><td>Ces options modifient le comportement de la bulle<br><strong>Infobulle visible</strong> : Permet d'activer ou de désactiver les infobulles pour la couche.<br><strong>Prévenir duplication du texte</strong> : Permet d'empêcher des contenus identiques de s'afficher à répétition dans une même bulle.</td></tr><tr><td><strong>6</strong></td><td>Les seuils de visibilité permettent de définir des échelles entre lesquelles les infobulles s'affichent dans la carte.<br>Si vous ne sélectionnez cette option, l'infobulle s'affiche à toutes les échelles.</td></tr></tbody></table>

## Création du contenu des infobulles

Vous devez fournir le texte qui sera utilisé comme contenu de l'infobulle. Ce texte peut être composé de parties statiques (affichées telles quelles), de parties variables (fonctions remplacées par d'autres valeurs lors de l'affichage), de programmes JavaScript simples et de balises HTML. Par exemple, la fonction `elementValue(city)` ou dans sa forme réduite `ev(city)`, sera remplacée à l'affichage par la valeur de l'attribut city de l'élément pointé.

Le texte de l'infobulle peut s'étendre sur plusieurs lignes. Vous n'avez qu'à entrer du texte sur plus d'une ligne et l'infobulle emploiera le même formatage.

### **Syntaxe des infobulles**

La syntaxe des infobulles est composée de diverses fonctions qui vont déterminer le contenu des bulles. Les fonctions ainsi que leurs paramètres ne sont généralement pas sensibles à la casse. Par exemple, `ev(city)` est équivalent à `Ev(CITY)`.

Le tableau suivant explique les différentes fonctions disponibles :

<table data-header-hidden><thead><tr><th width="237.71428571428572"></th><th></th></tr></thead><tbody><tr><td><strong>elementValue</strong>(<em>attrib</em>) ou <strong>ev</strong>(<em>attrib</em>)<br><em>attrib</em> : le nom d'un attribut</td><td>Remplacé par la valeur de l'attribut lié dont le nom est passé en paramètre, pour l'élément pointé.<br>Par exemple, <code>ev(id)</code> sera remplacé par la valeur de l'attribut <em>id</em> de l'élément.</td></tr><tr><td><strong>elementId</strong>()</td><td>Remplacé par l'identifiant de l'élément.</td></tr><tr><td><strong>polygonArea</strong>()</td><td>Remplacé par l'aire d'un élément pointé de type polygonal.</td></tr><tr><td><strong>lineLength</strong>()</td><td>Remplacé par la longueur d'un élément pointé de type linéaire.</td></tr><tr><td><strong>centroid</strong>()</td><td>Remplacé par la coordonnée du centroïde géométrique de la géométrie de l'élément.</td></tr><tr><td><strong>format</strong>(<em>attrib</em>, <em>format</em>)<br><em>attrib :</em> le nom d'un attribut de type date ou numérique<br><em>format</em> : le format de date souhaité</td><td>Remplacé par une date ou un nombre formaté selon un format précis.<br><strong>Exemple</strong><br><code>format(date_insp, dd/MM/yyyy)</code><br>où date_insp est le nom d'un attribut contenant une date et dd/MM/yyyy est le format de date souhaité, tel qu'indiqué dans la documentation de la classe Java <a href="http://java.sun.com/javase/6/docs/api/java/text/SimpleDateFormat.html">java.text.SimpleDateFormat</a>.<br><strong>Exemple</strong><br><code>format(value, ##0,00)</code><br>où <em>value</em> est le nom d'un attribut contenant un nombre et ##0,00 est le format de nombre souhaité, tel qu'indiqué dans la documentation de la classe Java <a href="http://java.sun.com/javase/6/docs/api/java/text/NumberFormat.html">java.text.NumberFormat</a>.</td></tr><tr><td><strong>ifNull</strong>(<em>attrib</em>, <em>value</em>)<br><em>attrib</em> : le nom de l'attribut à tester<br><em>value</em> : la valeur à afficher si <em>attrib</em> est nulle</td><td>Remplacé par la valeur <em>value</em> seulement si la valeur de l'attribut <em>attrib</em> est nulle. Si la valeur de l'attribut est non nulle, rien n'est affiché.<br><strong>Exemple</strong><br><code>ifNull(temp, N/A)</code><br>Affiche N/A si la valeur de l'attribut <em>temp</em> est nulle.<br><strong>Exemple</strong><br><code>ifNull(attrib_a, attrib_b)</code><br>Affiche la valeur de l'attribut <em>attrib_b</em> si la valeur de <em>attrib_a</em> est nulle.</td></tr><tr><td><strong>ifNotNull</strong>(<em>attrib</em>, <em>value</em>)<br><em>attrib</em> : le nom de l'attribut à tester<br><em>value</em> : la valeur à afficher si <em>attrib</em> est non nulle</td><td>Remplacé par la valeur <em>value</em> seulement si la valeur de l'attribut <em>attrib</em> est non nulle. Si la valeur de l'attribut est nulle, rien n'est affiché.<br><strong>Exemple</strong><br><code>ifNotNull(land_value, $)</code><br>Affiche $ seulement si la valeur de <em>land_value</em> est non nulle.</td></tr><tr><td><strong>subString</strong>(<em>attrib</em>, <em>startIx</em>, endIx)<br><em>attrib</em> : le nom de l'attribut pour lequel on veut extraire une partie<br><em>startIx</em> : position de départ dans la chaîne de caractères<br><em>endIx</em> : position de fin dans la chaîne de caractères</td><td>Remplacé par une partie de la valeur (comme chaîne de caractères) de l'attribut <em>attrib</em>, entre la position <em>startIx</em> et la position <em>endIx</em>.<br><strong>Exemple</strong><br><code>subString(name, 0, 5)</code><br>Remplacé par les 5 premiers caractères de la valeur de l'attribut <em>name</em>. Si cette dernière est Montréal, alors la bulle affichera Montr.</td></tr><tr><td><strong>encode</strong>(<em>attrib</em>, <em>encoding</em>)<br><em>attrib</em> : le nom de l'attribut à encoder<br><em>encoding</em> : le nom de l'encodage</td><td>Remplacé par la valeur de l'attribut <em>attrib</em>, une fois encodée avec l'encodage de caractères spécifié (UTF-8, CP437, ISO 8859-1, etc).<br><strong>Exemple</strong><br><code>encode(name, UTF-8)</code><br>Remplacé par la valeur de l'attribut <em>name</em> encodée en caractères UTF-8.</td></tr><tr><td>&#x3C;<strong>script</strong>> <em>code JavaScript</em> &#x3C;<strong>/script</strong>></td><td><p>Exécute le code JavaScript qui est à l'intérieur des balises. Dans le code JavaScript, les valeurs des attributs des éléments sont accessibles par la fonction <code>elementValue()</code> ou <code>ev()</code>.</p><p>Des opérations mathématiques ou sur les chaînes de caractères peuvent être effectuées sur les valeurs des attributs.</p><p>Pour afficher du contenu dans la bulle, le script doit faire appel à la fonction <code>print()</code>.<br><strong>Exemple</strong><br><code>&#x3C;script></code><br><code>print ( ev(population) / ev(area) );</code><br><code>&#x3C;/script></code><br>Calcule et affiche le résultat la valeur de l'attribut <em>population</em> divisé par la valeur de l'attribut <em>area</em>.<br><strong>Exemple</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; print('ev(osm_name)');</code> <code>print(dist_mi.toFixed(1) + " mi");</code><br><code>&#x3C;/script></code><br>Convertit la distance en kilomètres contenue dans la valeur de l'attribut <em>km</em> en une distance en milles.<br>Affiche la valeur de l'attribut <em>osm_name</em> (notez les ' ' car c'est une chaîne de caractères) et la distance en milles avec un chiffre décimal.</p></td></tr><tr><td><strong>photosAsThumbnails</strong>()</td><td><p>Remplacé par des versions réduites des images attachées à l'élément.</p><p>L'utilisateur peut cliquer sur une image réduite pour ouvrir l'image pleine grandeur.<br><code>photosAsThumbnails(title)</code><br><code>photosAsThumbnails(date)</code><br><code>photosAsThumbnails(title,date)</code><br>Avec ces options, le titre et/ou la date seront affichées avec chaque miniature de photo.<br><strong>Il est très important de ne pas ajouter des espaces entre </strong><em><strong>title</strong></em><strong>, la virgule et </strong><em><strong>date</strong></em><strong>.</strong></p></td></tr><tr><td><strong>projectName</strong>()</td><td>Remplacé par le nom du projet en cours.</td></tr><tr><td><strong>userName</strong>()</td><td>Remplacé par le code utilisateur de l'utilisateur actuellement connecté.</td></tr><tr><td><strong>sessionId</strong>()</td><td>Remplacé par l'identifiant de la session en cours.</td></tr><tr><td><strong>host</strong>()</td><td>Remplacé par le nom de l'hôte ou l'adresse de l'instance JMap Server à laquelle l'application est connectée.</td></tr><tr><td><strong>port</strong>()</td><td>Remplacé par le numéro du port (http ou direct) de l'instance JMap Server à laquelle l'application est connectée.</td></tr><tr><td><strong>date</strong>()</td><td>Remplacé par la date et l'heure actuelles.</td></tr></tbody></table>

### **Balises HTML**

Il est possible de formater le contenu de la bulle à l'aide de balises HTML simples. Les bulles ne supportent pas les balises avancées telles que `<DIV>` ni les CSS. Les balises HTML supportées et couramment utilisées dans les infobulles sont les suivantes :

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

Vous pouvez insérer des hyperliens dans les bulles. Ceux-ci sont cliquables et permettent d'ouvrir des pages HTML ou d'ouvrir ou télécharger des fichiers.

### **Exemples**

<table data-header-hidden><thead><tr><th width="307.644376899696"></th><th></th></tr></thead><tbody><tr><td><code>City : ev(CITY)</code><br>Un exemple simple de texte statique avec la valeur d'un attribut.</td><td><img src="https://294136567-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdAw9YBQHVS9E90BSZYQK%2Fuploads%2Fgit-blob-42011ba4f16d3e9f6be3c85dc1c91696a0a9c899%2Fmouseover_2_en.png?alt=media" alt="" data-size="original"></td></tr><tr><td><code>City: ev(CITY)</code><br><code>(ev(COUNTRY))</code><br>Exemple contenant des parties statiques et l'affichage de 2 valeurs d'attributs, sur 2 lignes.</td><td><img src="https://294136567-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdAw9YBQHVS9E90BSZYQK%2Fuploads%2Fgit-blob-110512b5c0e2ae08df0f719abafd75e68baf90b3%2Fmouseover_3_en.png?alt=media" alt="" data-size="original"></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>Un exemple de formatage de base employant des balises HTML de même qu'un hyperlien où l'URL provient de la valeur de l'attribut URL.</td><td><img src="https://294136567-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdAw9YBQHVS9E90BSZYQK%2Fuploads%2Fgit-blob-a533fda97871e542821bfde87ceb1cdf283d0a58%2Fmouseover_4_fr.png?alt=media" alt="" data-size="original"></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>Un exemple de balise d'image HTML qui prend l'URL de l'image de la valeur de l'attribut IMAGE_URL.</td><td><img src="https://294136567-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdAw9YBQHVS9E90BSZYQK%2Fuploads%2Fgit-blob-db10da5aad0ac9d8562e8acfc512ecd84a8546a1%2Fclip0001%20(1).png?alt=media" alt="" data-size="original"></td></tr><tr><td><strong>Area</strong><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>Un exemple de balise <code>&#x3C;script></code> avec du code JavaScript. La valeur de l'attribut <em>AREA_KM2</em> est convertie de km carrés à milles carrés.</td><td><img src="https://294136567-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdAw9YBQHVS9E90BSZYQK%2Fuploads%2Fgit-blob-229776d0f7a6264e0a37b2e5184c10ad398a4737%2Fclip0042.png?alt=media" alt="" data-size="original"></td></tr><tr><td><p><code>&#x3C;table style="border:3px solid black; border-radius:5px; background: #1fc8db; color:white"></code></p><p><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></p><p><code>&#x3C;tbody> &#x3C;tr> &#x3C;td style="padding: 5px" class="">Gratton&#x3C;/td> &#x3C;td style="padding: 5px" class="actions">Bob&#x3C;/td></code> <br><code>&#x3C;/tr></code> <br><code>&#x3C;/tbody></code></p><p><code>&#x3C;/table></code><br>Exemple de formatage avec attribut de style.</p></td><td><img src="https://294136567-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdAw9YBQHVS9E90BSZYQK%2Fuploads%2Fgit-blob-9bb83e859e42e431b4090dde917dfc77e32d2b94%2Fclip0048.png?alt=media" alt="" data-size="original"></td></tr></tbody></table>

## Repérage d'éléments de carte ou de coordonnées en utilisant les infobulles

Les infobulles comportent une fonction pour localiser des coordonnées ou des éléments d'une carte en utilisant une syntaxe spéciale d'URL. Un hyperlien est affiché dans la bulle, et lorsqu'il est cliqué, la carte repère la région ou les éléments spécifiés.

| **Exemple de repérage avec infobulle**                                       | **Description**                                                                                                                                                                                                                                                                                                                                                                                          |
| ---------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `<a href="locate:region;-73;45;5;5">Localiser</a>`                           | <p>Affiche un hyperlien Localiser.<br>Lorsque cliqué, cet hyperlien repère dans la même carte la région définie par x=‑73, y = 45, largeur = 5, hauteur = 5.<br>Ces données sont exprimées dans les unités de la carte.</p>                                                                                                                                                                              |
| `<a href="locate:object;métros;nom;'atwater'">Localiser</a>`                 | <p>Affiche un hyperlien Localiser.<br>Lorsque cliqué, cet hyperlien repère dans la même carte les éléments sur la couche métros dont l'attribut nom est égal à atwater.</p>                                                                                                                                                                                                                              |
| `<a href="locate:object;métros;nom;'a%'">Localiser</a>`                      | <p>Affiche un hyperlien Localiser.<br>Lorsque cliqué, cet hyperlien repère dans la même carte les éléments sur la couche métros dont l'attribut nom commence par la lettre a.</p>                                                                                                                                                                                                                        |
| `<a href="locate:object;métros;nom;'atwater';1000">Localiser</a>`            | <p>Affiche un hyperlien Localiser.<br>Lorsque cliqué, cet hyperlien repère dans la même carte les éléments sur la couche métros dont l'attribut nom est égal à atwater.<br>La carte qui en résulte possède une échelle de 1 : 1000.</p>                                                                                                                                                                  |
| `<a href="locate:object;métros;nom;'atwater':target=Résultat">Localiser</a>` | <p>Affiche un hyperlien Localiser.<br>Lorsque cliqué, cet hyperlien repère dans une nouvelle carte appelée Résultat les éléments de la couche métros dont la valeur de l'attribut name est égal à atwater.<br>Si une carte nommée Résultat existe déjà, elle est réutilisée.<br>Si le nom de la carte était new, une nouvelle carte (avec un nom généré automatiquement) serait créée à chaque fois.</p> |

## Utilisation d'une URL pour l'affichage de contenu

Vous pouvez spécifier une URL qui affichera le contenu d'une page HTML dans l'infobulle (seulement supportée dans les applications JMap Pro). La bulle sera occupée à 100% par la page HTML.\
La syntaxe est la suivante :

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

L'URL spécifiée peut être statique ou peut provenir d'un attribut. Elle peut aussi utiliser les valeurs d'attribut en tant que paramètres, comme dans l'exemple ci‑dessous :

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

<figure><img src="https://294136567-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdAw9YBQHVS9E90BSZYQK%2Fuploads%2Fgit-blob-99c238cd0989d4eb6c760f1937b345c6c3d295f0%2Fmouseover_5_fr.png?alt=media" alt="" width="434"><figcaption></figcaption></figure>
