Procédure : Modifier La Taille D’une Fenêtre Contextuelle Dans Web AppBuilder for ArcGIS

Résumé

Dans une carte web, une fenêtre contextuelle est associée à la classe infoWindow et sert souvent à afficher des informations sur une entité sélectionnée. Il est courant que cette fenêtre contextuelle n’ait pas de taille distincte, car cette propriété n’est pas programmée à l’origine dans le script. Pour en savoir plus sur les fenêtres contextuelles, reportez-vous au document d’aide web suivant : ArcGIS API for JavaScript: Class: Popup (ArcGIS API for JavaScript : Classe : fenêtre contextuelle)

Les instructions fournies expliquent comment modifier la taille d’une fenêtre contextuelle dans ArcGIS API for JavaScript.

Procédure

Vous pouvez personnaliser la taille d’une fenêtre contextuelle de deux façons dans une carte web. Suivez l’une des procédures ci-dessous pour personnaliser la fenêtre contextuelle et lui attribuer une taille précise.

Attribuer une taille précise à une fenêtre contextuelle

Mettez à jour le fichier MapManager.js dans le dossier de l’application utilisateur (install DIR\server\apps\userApp\jimu.js) en insérant la ligne suivante à la fin de la méthode resetInfoWindow: function() du script.

resetInfoWindow: function() { 
...
...
this.map.infoWindow.resize(360,280); 
}

Remarque :
Actualisez l’application web pour appliquer les modifications.

Les images suivantes illustrent la différence entre la taille par défaut de la fenêtre contextuelle et sa taille après l’implémentation du code.

Avant

Après

Adapter automatiquement la taille de la fenêtre contextuelle au contenu

Mettez à jour le fichier jimu.css dans le dossier de l’application (install DIR\server\apps\userApp\jimu.js\css) à l’aide de la fonction .esriPopup dans le volet des styles avec l’extrait de code suivant.

.esriPopup.light .esriPopupWrapper {

    position: initial!important;
}

 .esriPopup .sizer {
 position: initial !important;
 width: 100% !important;
}

L’image suivante illustre l’effet du code sur la fenêtre contextuelle.