Configurer l'info-bulle

Afin d'afficher des informations sur une carte, sur une image ou dans un calendrier, vous pouvez configurer une infobulle. Vous pouvez utiliser et configurer l'infobulle standard ou la paramétrer plus précisément en utilisant une infobulle HTML personnalisée. Une info-bulle personnalisée prend un peu plus de temps, mais c'est un bon moyen d'exploiter vos données. Pour passer de l'interface de configuration d'info-bulle standard à cette vue d'info-bulle personnalisée, sélectionnez "Modèle HTML personnalisé" dans le menu déroulant des types d'info-bulle.

Info-bulle standard

Vous pouvez configurer les champs qui apparaîtront dans l'info-bulle et leur ordre relatif. Un aperçu instantané est disponible sur le côté droit.

Pour chacun des champs de l'info-bulle, les trois actions suivantes sont disponibles :

Glisser-déposer pour déplacer un champ dans l'info-bulle
Cliquez pour supprimer un champ de l'info-bulle
Cliquez pour ajouter un champ à l'info-bulle

Info-bulle personnalisée en HTML

Lorsque vous sélectionnez cette option, un éditeur HTML apparaît. Ceci est très similaire à l'écriture de "pages" dans votre domaine. Vous avez accès à tous les widgets ODS et vous pouvez même intégrer d'autres visualisations dans l'info-bulle.

Lorsque l'infobulle est affichée, elle peut accéder à une variable record spécifique qui est "injectée" dans l'infobulle. Cet objet record contient les propriétés suivantes :

record.fields : objet contenant toutes les valeurs (par exemple record.fields.tree_height )
record.recordid : identifiant unique de l'enregistrement
record.datasetid : identifiant du jeu de données

À l'aide de ces propriétés, vous pouvez afficher directement des valeurs dans l'info-bulle ou même les utiliser pour afficher des données provenant d'autres jeux de données.

Le schéma du jeu de données est également injecté en tant que variable fields , qui est un tableau d'objets de champ (vous pouvez utiliser ng-repeat pour boucler sur les champs). Un objet champ contient les propriétés suivantes :

field.name : l'identifiant du champ, par exemple, pour trouver une valeur dans record.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}}&amp;entry.1624486384={{record.fields.url}}&amp;entry.462034829&amp;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 de l'un des champs file 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 extraites d'un autre jeu de données et filtrées à l'aide de l'une des valeurs de l'enregistrement sélectionné.

 <div class="my-tooltip">
 < h1 >City report : {{ record.fields.city_name }}</ h1 >
 < 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>

Aucune info-bulle

Vous pouvez choisir de n'afficher aucune info-bulle, ce qui peut être utile lorsque, par exemple, vous souhaitez afficher plusieurs couches sur une carte et n'avoir qu'une seule couche avec des info-bulles.