Conseils & Astuces ArcGIS Online - N°23

N° 23 - Concevoir des imagettes standardisées pour vos contenus ArcGIS Online

Dans ma fiche de Conseils & Astuces précédente (n°22), j'évoquais l'importance de valoriser les contenus de votre portail en leur associant des imagettes pertinentes. Je vous indiquais notamment une approche intéressante consistant à incruster dans l'image, des informations importantes comme le titre, la thématique, le logo (ou le nom) de l'auteur de la ressource ou encore le type de ressource (carte web, scène web, application, donnée, document, ...).

Exemple de portail ArcGIS utilisant des imagettes avancées

Pour réaliser de telles imagettes, vous devez tout d'abord envisager le gabarit des différentes informations que vous souhaitez proposer aux utilisateurs. Généralement, il suffira de trois calques pour assembler ces différentes informations.

Pour réaliser ces calques et construire l'imagette résultante, vous pouvez utiliser n'importe quel outil de retouche d'images du moment que ce dernier prend en charge la notion de calques et de transparence entre ces calques. Des outils comme The Gimp, Photoshop, Paint Shop Pro, ... font cela très bien. Cependant, si vous devez la répéter sur un grand nombre de contenus, cette opération peut s'avérer assez longue et fastidieuse notamment si vous devez créer une imagette avec les titres des contenus.

Une autre solution est à votre disposition via l'application "Thumbnail Maker" proposée (en Open Source) par un de mes collègues d'Esri. Cette application en ligne permet de générer l'imagette en agrégeant une image d'arrière-plan, une image d'avant-plan et des informations textuelles que vous saisissez interactivement. C'est sur cette partie "textes dynamiques" que l'application vous fera gagner un temps précieux.
 

Utiliser l'application "Thumbnail Builder"

La conception d'une imagette avec "Thumbnail Builder" se déroule en 3 étapes. La première étape consiste à définir l'image d'arrière-plan. Il peut s'agir d'une prévisualisation de votre ressource où d'une image plus générique telle qu'une photo. Cette image doit faire 200x133 pixels.


L'étape suivante consiste à sélectionner l'image d'avant-plan. Selon le gabarit souhaité, vous aurez préparé une série d'images contenant, par exemple, les différents types de ressources diffusées sur votre portail ainsi que les logos des organismes ou services responsables de cette ressource. Là aussi, l'image doit faire 200x133 pixels.


La dernière étape consiste à définir interactivement un texte, sa police, son alignement, sa couleur et sa position sur l'image. La position sera déterminée en traçant les limites de ce dernier sur l'image (ou en spécifiant manuellement ces limites en coordonnées pixels).



Quelques remarques importantes à propos de "Thumbnail Builder":

• L'application propose des images par défaut que vous pouvez utiliser pour construire vos imagettes. Si vous souhaitez disposer de vos propres images par défaut, vous pouvez installer la partie interface de l'application sur votre propre serveur. Le code source se télécharge sur GitHub à partir de cette page.
  
  Pour créer votre propre série d'images, vous devez les ajouter en tant qu'éléments sur votre portail ArcGIS Online puis les partager avec un groupe dédié. Il est important de noter que le groupe et les images doivent être publics.
   
  Ensuite, il suffira de repérer l'identifiant ArcGIS Online de ce groupe et de le mettre dans le fichier de configuration de l'application js.js comme indiqué ci-dessous (defaultBgId correspond au groupe des images d'arrière-plan et defaultFgId au groupe des images de premier-plan).
  
  
  
  Si vous avez des difficultés à retrouver l'id du groupe que vous avez créé pour partager vos images, vous pouvez utiliser cette application et saisir le nom de votre groupe.
     
• Si vous voulez modifier plus profondément l'application "Thumbnail Builder", le code source de la partie serveur (reposant notamment sur un service de géotraitement ArcGIS Server) est disponible via cette page GitHub.
     
• L'application peut présenter des dysfonctionnements sur les navigateurs Firefox et Internet Explorer, il est plutôt recommandé d'utiliser Chrome ou Safari.