Le blog francophone consacré
aux technologies Esri

Conseils & Astuces ArcGIS Online - N°170

N° 170 - Intégrer des vidéos dans vos fenêtres contextuelles

Lorsque vous gérez un SIG, vous êtes parfois amenés à associer des documents multimédias tels que des fichiers vidéo aux entités de vos couches.  Il est alors intéressant de pouvoir les visualiser dans les fenêtres contextuelles.  Dans cet article, je vous propose de voir 3 cas d'usage (selon votre contexte) pour proposer l'accès à ces vidéos dans les fenêtres contextuelles de vos cartes web.




Cas n°1 - Vos vidéos sont stockées en pièces jointes et votre couche d'entité n'est pas publique

Lorsque vos vidéos sont gérées en tant que pièces jointes, une première option consiste simplement à ajouter un bloc de type "Pièces jointes" dans la fenêtre contextuelle. Dans ce cas, un lien permettra à l'utilisateur d'ouvrir la vidéo dans un nouvel onglet. Voici comment procéder :

  1. Connectez-vous tout d'abord sur votre portail ArcGIS puis ouvrir la carte dans laquelle figure la couche d'entités ayant des vidéos en pièces jointes. Dans la boîte de dialogue de configuration de la fenêtre contextuelle, ajoutez un bloc de contenu de type "Pièces jointes".


  2. Vous pouvez définir un titre et une description (qui peuvent venir des attributs de la couche). Vous pourrez aussi choisir d'afficher le lien vers la vidéo dans une liste ou dans une bibliothèque (si vous avez plusieurs vidéos par entité). L'option "Automatique" permet d'adapter automatiquement la présentation selon le nombre de vidéos associées.


  3. Une fois les paramètres validés, votre fenêtre contextuelle s'affiche avec un lien permettant d'ouvrir la vidéo.



Cas n°2 - Vos vidéos sont stockées en pièces jointes et votre couche d'entités est publique

Lorsque vos vidéos sont gérées en tant que pièces jointes et que la couche d'entités est partagée de manière publique, alors nous pouvons faire mieux et afficher directement la vidéo dans la fenêtre contextuelle. Pour cela nous allons utiliser une expression Arcade. Voici comment procéder :

  1. Connectez-vous tout d'abord sur votre portail ArcGIS puis ouvrir la carte dans laquelle figure la couche d'entités ayant des vidéos en pièces jointes. 

  2. Dans la zone de configuration des fenêtres contextuelles la couche, vous pouvez supprimer l'élément "Liste de champs" proposé par défaut puis ajouter un élément de contenu Arcade. Ce dernier nous permettra de réaliser les calculs statistiques nécessaires et configurer un rendu personnalisé (en HTML) de nos informations.


  3. Dans l'éditeur Arcade, vous effacerez les instructions déjà présentes par l'expression Arcade ci-dessous :

    // On spécifie la liste des attributs dont on a besoin dans cette expression Arcade
    Expects($feature, "*")
    
    // La variable pour récupérer l'URL de la vidéo
    var url = ""
    // La variable pour récupérer le type mime de la vidéo
    var type_video = ""
    
    // On vérifie qu'il y a une pièce jointe et on suppose que c'est une vidéo
    // sinon il faudra ajouter un test supplémentaire sur le type mime
    if (Count(Attachments($feature))>0) {
      // On stocke ici l'url du service web de la couche d'entités. Celui-ci se trouve
      // dans la page de description de l'item
      var Partie1 = "https://services.arcgis.com/d3voDfTFbHOCRwVR/arcgis/rest/services/Inspections_Canalisations/FeatureServer/0"
      var ObjectID = $feature.OBJECTID
      var Partie2 = "/attachments/"
      // On ne récupère ici que la première vidéo mais on pourrait boucler sur les
      // différentes vidéos
      var AttachID = First(Attachments($feature)).ID 
      // On construit l'url complète pour accéder à la pièce jointe
      url = Partie1 + "/" + ObjectID + Partie2 + AttachID
      // On récupère le type mime qui est stocké par ArcGIS dans les métadonnées de la pièce jointe
      type_video = First(Attachments($feature)).contenttype
    
      // On renvoie la chaîne HTML complète en utilisant la balise <video> avec les paramètres de
      // démarrage automatique et l'affichage des controles de lecture de la vidéo
      return { 
      type : 'text', 
      text : `<video controls autoplay width="100%">
             <source src="${url}" type="${type_video}">
             </source></video>`
      }
    }
    else{
      return null
    }
    Vous ferrez attention à ce que l'url du service web de la couche d'entités intègre bien l'index de la couche au sein du service web (le "/0" dans cet exemple).

    On notera l'usage du caractère backtick ( ` et non ') pour utiliser des littéraux et construire la chaîne HTML souhaitée. 

    On rappellera enfin que cette expression Arcade n'est valide que si la couche d'entités est partagée de manière publique.
     
  4. Vous pouvez maintenant cliquer sur le bouton "Terminé" pour valider l'expression.

  5. La fenêtre contextuelle s'affiche désormais avec la vidéo qui démarre automatiquement à l'ouverture de la fenêtre contextuelle.



Cas n°3 - Vos vidéos sont référencées via une URL stockée dans un attribut de votre couche d'entités

Lorsque vos vidéos sont référencées par une url stockée dans un attribut de la couche d'entités (qu'elle soit privée ou publique), alors nous pouvons afficher directement la vidéo dans la fenêtre contextuelle. Pour cela nous allons repartir de l'expression Arcade précédente et l'adapter en récupérant directement l'url de la vidéo (dans notre exemple l'attribut se nomme "URL_Video"). L'expression Arcade sera alors la suivante :

// On spécifie la liste des attributs dont on a besoin dans cette expression Arcade
Expects($feature, "*")

// La variable pour récupérer l'URL de la vidéo
var url = ""
// La variable pour récupérer le type mime de la vidéo
var type_video = ""


url = $feature.URL_Video
// On doit définir manuellement le type mime
type_video = "video/mp4"

// On renvoie la chaîne HTML complète en utilisant la balise <video> avec les paramètres de
// démarrage automatique et l'affichage des controles de lecture de la vidéo
return { 
  type : 'text', 
  text : `<video controls autoplay width="100%">
         <source src="${url}" type="${type_video}">
         </source></video>`
}
J'espère que cet exemple vous inspirera et que vous pourrez l'adapter à vos cas d'usage.


Bonne route sur ArcGIS Online !
   
Pour retrouver l'ensemble des Conseils & Astuces ArcGIS Online, cliquez sur ce lien

Partager cet article:

Rejoindre la discussion

    Les commentaires à propos de cet article:

3 comments :

SIG Agglomération Montargoise a dit…

Bonjour Gaëtan,

Est-ce que cette mise en forme Arcade est possible depuis ArcGIS Enterprise et si oui avec quelle version ?
En effet, j'essaie de reproduire cette possibilité et reçoit un message d'erreur sur la fonction "Attachments".
Merci pour votre réponse,
Bien cordialement,

Gaëtan Lavenu a dit…

Bonjour,

Cette fonction "Attachments" a été introduite dans Arcade dans ArcGIS Enterprise 10.7.1. Avez-vous une version antérieure ?

Si ce service d'entités est accessible à l'extérieur de votre infrastructure, je peux essayer de faire des tests.

SIG Agglomération Montargoise a dit…

Bonjour Gaëtan, merci pour votre réponse.
La plateforme sur laquelle je travaille est en 10.9.1 depuis peu, c'est donc étonnant.
J'ai déclenché un ticket au support, je vais voir avec eux comme nous avançons et viendrais ici faire un point.