Configurer l'infobulle¶
Pour afficher des informations sur une carte, sur une image ou sur un calendrier, vous pouvez configurer une infobulle. Vous pouvez utiliser et configurer l'infobulle standard ou bien personnaliser une infobulle HTML pour davantage de précision. La personnalisation d'une infobulle peut prendre un peu plus du temps, mais permet de tirer le meilleur parti de vos données. Pour passer de l'interface de configuration standard à la configuration d'infobulle personnalisée, choisissez modèle HTML personnalisé dans la liste déroulante des types d'infobulle.

Paramétrage de l'infobulle
Aucune infobulle¶
Vous pouvez choisir de ne pas afficher d'infobulle. Cela peut par exemple être utile lorsque vous souhaitez afficher plusieurs couches sur une carte et avoir uniquement une couche avec des infobulles.
Infobulle standard¶
Vous pouvez configurer les champs qui apparaîtront dans l'infobulle, ainsi que leur ordre d'affichage. Un aperçu est disponible dans la colonne de droite pour voir en simultané le rendu final de l'infobulle.

Paramétrage de l'infobulle
Pour chacun des champs, les 3 actions suivantes sont disponibles et signifient :

Actions sur les champs
Glisser/déposer pour changer la position de ce champ dans l'infobulle
Cliquer pour retirer le champ de l'infobulle
Cliquer pour ajouter le champ à l'infobulle

L'aperçu
Infobulle personnalisée en HTML¶
Lorsque vous sélectionnez Infobulle personnalisée en HTML, un éditeur HTML s'affiche. L'approche est similaire à l'écriture de "pages" sur votre domaine ; vous pouvez utiliser n'importe quel ODS Widget et même intégrer d'autres visualisations dans l'infobulle.

Un exemple d'infobulle personnalisée.
Lorsque l'infobulle s'affiche, une variable record
est "injectée" et est disponible pour être utilisée. Cet objet record
contient les propriétés suivantes :
record.fields
: objet contenant toutes les valeurs de l'enregistrement (par ex.record.fields.tree_height
)record.recordid
: identifiant unique de cet enregistrementrecord.datasetid
: identifiant du jeu de données
Grâce à ces propriétés, vous pouvez afficher directement les valeurs dans l'infobulle, ou même les utiliser pour afficher des données depuis d'autres jeux de données.
Le schéma du jeu de données est également injecté sous la forme d'une variable fields
, qui contient un tableau d'objets représentant les champs (vous pouvez utiliser ng-repeat
pour faire une boucle sur ces champs). Un objet champ (ici "field") contient les propriétés suivantes :
field.name
: l'identifiant du champ, par exemple pour récupérer une valeur à l'intérieur derecord.fields
field.type
: le type du champ (text
,decimal
,integer
,date
,datetime
,geo_point_2d
,geo_shape
)field.label
: un label destiné à l'affichage
Voici le code de l'exemple ci-dessus :
<ul style="display: block; list-style-type: none; color: #2c3f56; padding:0; margin:0;">
<li><strong style="font-size:17px;">{{ record.fields.name | limitTo:25 }}</strong></li>
<li>{{ record.fields.organisation | limitTo:40}}</li>
<li ng-if="record.fields.description" style="color:#bbb;">{{ record.fields.description | limitTo:140 }}</li>
<li ng-if="!record.fields.description" style="font-style:italic;color:#bbb;">No description provided<br/></li>
<br/>
<li ng-if="record.fields.has_issue == 'TRUE'" style="color:#ec643c;"><i class="fa fa-exclamation-triangle"></i> An issue has been reported on this portal</li>
<li>
<ul style="list-style-type: none; color: #2c3f56;padding:0 0 15px;margin-top:0px;">
<li style="display: inline;float:left;"><strong style="font-size:13px;"><a ng-href="https://docs.google.com/forms/ d/1-9m30rCw492oGCB7Pg3aOsZ-q03KBeJsw_GZFLqIvNE/ viewform?entry.1740897944={{record.fields.name}}&entry.1624486384={{record.fields.url}}&entry.462034829&entry.848235220" style="color:#ccc;" target="_blank">Report an issue </a></strong><i class="fa fa-external-link" style="color:#ccc;"></i></li>
<li style="display: inline;float:right;"><strong style="font-size:13px;"><a ng-href="{{record.fields.url}}" style="color:#ec643c;" target="_blank">Open this portal </a></strong><i class="fa fa-external-link" style="color:#ec643c;"></i></li>
</ul>
</li>
</ul>
Si vous souhaitez afficher une image à partir de l'un des champs fichier
de votre jeu de données, vous pouvez utiliser le widget ods-record-image
.
Vous pouvez utiliser un <ods-dataset-context>
pour afficher une visualisation à partir d'un autre jeu de données; dans l'exemple suivant, les données sont récupérées à partir d'un autre jeu de donnée qui a été filtré à partir d'une des valeurs de l'enregistrement sélectionné.
<div class="my-tooltip">
<!-- Display the name of the city directly from the point that the user selected -->
<h1>City report : {{ record.fields.city_name }}</h1>
<!-- Display an image from the dataset -->
<ods-record-image field="city_logo" record="record"></ods-record-image>
<!-- Create a context reading data from another dataset but filtered on
the city that the user clicked on -->
<ods-dataset-context context="alerts"
alerts-dataset="city-alerts-realtime"
alerts-parameters="{'refine.city': city_name}">
<ods-table context="alerts"></ods-table>
</ods-dataset-context>
</div>