Procédure : activer la fonction de déplacement sur une fenêtre contextuelle infoWindow dans Web AppBuilder for ArcGIS

Résumé

Lorsque les utilisateurs cliquent sur une entité dans une carte web, la fenêtre contextuelle infoWindow est configurée de façon à s’ouvrir à la même position que le pointeur et ne peut pas être déplacée. Ce comportement est normal. Il peut cependant parfois bloquer d’autres entités et gêner la vue.

Les instructions fournies expliquent comment rendre la fenêtre contextuelle amovible dans Web AppBuilder for ArcGIS en la faisant glisser à l’aide du curseur de la souris.
 

Procédure

Procédez comme suit pour activer la fonction de déplacement sur les fenêtres contextuelles en faisant appel au kit d’outils Dojo désigné. Vous devez mettre à jour les deux fichiers de base suivants dans Web AppBuilder for ArcGIS :

• le fichier common.css qui se trouve dans : [app install]\server\apps\[app#]\themes\LaunchpadTheme
• le fichier utils.js qui se trouve dans : [app install]\server\apps\[app#]\jimu.js

1. Mettez à jour le fichier common.css de façon à insérer la propriété move dans le curseur. L’extrait de code suivant indique comment transformer le pointeur du curseur en curseur de déplacement pour désigner un volet amovible.

@import url("panels/LaunchpadPanel/style.css");    
.esriPopupWrapper .title {  
    cursor: move;  
}  
.esriPopup .hidden {  
    display: none !important;

2. Dans le fichier utils.js, définissez le kit d’outils Dojo désigné au début du code. La propriété define doit avoir la définition Dojo suivante.

define([
 ...
    'dojo/dnd/Moveable',
    'dojo/dom-class',
 ...
  ],

3. Dans ce même fichier utils.js, recherchez la section de code mo.createWebMap et incorporez les propriétés dojo ajoutées, définies à l’étape 2. L’extrait de code suivant indique à quoi ressemble le code après la mise à jour.

mo.createWebMap = function(portalUrl, itemId, mapDiv, /* optional */ options) 
{  
    portalUrl = portalUrlUtils.getStandardPortalUrl(portalUrl);  
    var itemUrl = portalUrlUtils.getBaseItemUrl(portalUrl);  
    arcgisUtils.arcgisUrl = itemUrl;  
    var def = arcgisUtils.createMap(itemId, mapDiv, options);  
    def.then(function (response){  
        var map = response.map;  
        var handle = query(".title", map.infoWindow.domNode)[0];  
        var dnd = new Moveable(map.infoWindow.domNode, {  
            handle: handle  
        });  
}); 
     return def;  
  };

Informations associées

• ArcGIS API for JavaScript: Info windows and graphics (ArcGIS API for JavaScript : Fenêtres et graphiques d’informations)
• Web AppBuilder for ArcGIS (Developer Edition): Use dojo dijit (Web AppBuilder for ArcGIS (Developer Edition) : Utiliser le système dijit de Dojo)
• DOJO: Dojo Toolkit Reference Guide (DOJO : Guide de référence du kit d’outils Dojo)