Conseils & Astuces ArcGIS Online - N°76

N° 76 - Afficher vos données sous forme de tableaux dans vos fenêtres contextuelles

Il existe différentes options pour personnaliser la présentation des attributs de vos entités dans les fenêtres contextuelles (Pop-ups) de vos cartes web. Une des plus puissantes consiste à utiliser le langage HTML (et un peu de CSS) pour adapter le rendu des informations attributaires dans la fenêtre contextuelle des entités. C'est notamment grâce à cette option que vous pourrez organiser les données de vos fenêtres contextuelles dans des tableaux HTML. Pour cela, vous suivrez la démarche suivante sachant qu'elle nécessite quelques connaissances de base d'HTML et CSS:

1. Après avoir ajouté votre couche d'entités à la carte, vous commencerez par activer les fenêtres contextuelles sur la couche.
   
   
     
2. La couche affiche désormais des fenêtres contextuelles avec la présentation par défaut de tous les attributs.
   
   
     
3. Cliquer maintenant sur "Configurer la fenêtre contextuelle" pour choisir les option de présentation des fenêtres contextuelles de votre couche.
   
   
     
4. Pour le paramètre "Afficher", sélectionner l'option "Un affichage de champ personnalisé".
   
   
     
5. Cliquer ensuite sur le bouton "Configurer".
     
6. L'interface qui s'affiche permet de composer une mise en page libre des attributs à l'aide d'un éditeur de texte riche interactif (polices des textes, couleurs de texte, indentation, listes à puces, listes numérotés, ...). L'éditeur permet également de saisir directement du code HTML et CSS, pour cela cliquer sur le bouton "Afficher la source HTML".
   
   
     
7. Dans la zone de code, saisir le code HTML et CSS décrivant votre tableau en plaçant les champ entre accolades: {nom_du_champ}.
   
   
   
   En résumé:
   - Un tableau est déclaré par les balises <table>...</table>
   - Une ligne est déclarée par les balises <tr>...</tr>
   - Une colonne est déclarée par les balises <td>...</td> ou <th>...</th>
   
   Pour le jeu de données utilisé dans cet exemple, voici le code HTML que j'ai utilisé. Si vous souhaitez vous en inspirer, il est téléchargeable ici.
   
   
    
8. Cliquer ensuite sur le bouton "OK" pour valider votre code HTML/CSS puis à nouveau sur le bouton "OK" pour valider le paramétrage de la fenêtre contextuelle.
     
9. Votre couche affiche désormais les attributs que vous avez choisi dans un tableau.