Le blog francophone consacré
aux technologies Esri

Personnaliser les MapTips d'ArcGIS Server - 2/4




Nous avons vu dans l'épisode précédent comment personnaliser le contenu des info-bulles, nous allons maintenant évoquer la personnalisation du style d'affichage. Par défaut les info-bulles s'affichent avec un style défini dans le "Default Web Resource". La couleur de ces info-bulles n'est généralement pas adaptée au style de votre site et vous souhaitez le modifier.

Modifier le style d'affichage des MapTips

La modification du style d'affichage des info-bulles va se faire en adaptant le fichier de style css relatif aux MapTips et en modifiant quelques lignes du fichier JavaScripts qui gère leur comportement.

En résumé, voici la procédure à suivre dans (Visual Studio 2005) :

1) Changer la propriété UseDefaultWebResources du contrôle MapTips pour la mettre à False


2) Copier le fichier display_maptips.js situé dans le répertoire \aspnet_client\ESRI\WebADF\JavaScript dans le répertoire Javascript de votre application.


3) Modifier le fichier display_maptips.js que vous venez de copier pour y modifier la valeur de la variable classPrefix comme indiqué ci-dessous. Vous remplacerez le préfixe "ADF_" par la valeur que vous voulez.


Pour info, vous pourrez également modifier certaines chaînes de caractères utilisées lors de l'affichage des info-bulles pour les traduire en français.


4) Dans la page HTML de l'application cartographique, ajouter la référence à ce nouveau fichier Javascript.



5) Copier ensuite le fichier maptips.css situé dans le répertoire aspnet_client\ESRI\WebADF\styles dans un répertoire de votre application. Créer un répertoire Styles peut s'avérer une bonne stratégie.


6) Modifier le fichier maptips.css que vous venez de copier pour y modifier le nom de tous les styles en changeant "ADF_" par votre préfixe (par exemple "Custom_")


7) Dans la page HTML de l'application cartographique, ajouter la référence à ce nouveau fichier de styles.


8) Modifier ensuite tous les styles que vous voulez dans le fichier maptips.css pour obtenir l'aspect souhaité (couleurs, largeur de l'info-bulle, …)

Partager cet article:

Rejoindre la discussion

    Les commentaires à propos de cet article:

2 commentaires :

Luiz Amadeu Coutinho a dit…

Ótimo post.

Esse blog é excelente.

Luiz Amadeu Coutinho
Geoinformação Online

Anonyme a dit…

Ca a l'air intéressant ! A quand le résultat en ligne ?