Personnaliser les MapTips d'ArcGIS Server - 4/4
J'avais envie de terminer cette série d'article sur la personnalisation des MapTips dans ArcGIS Server en allant un peu plus loin sur les possibilités de personnalisation. En effet, avec un peu de développement on peut modifier complètement le comportement des info-bulles (affichage, contenu, actions, liens, …).
Comme pour les précédents articles, au travers d'un exemple simple (en VB .Net), nous allons illustrer ces possibilités avancées de personnalisation. L'objectif ici est d'afficher le taux de remplissage de différents parkings en les calculant à la volée à partir d'informations stockées dans une Géodatabase. L'idée est de les afficher dans une info-bulle avec une couleur différente en fonction de ce taux (vert si inférieur à 90% et rouge si supérieur à 90%).
Modifier le comportement des MapTips
Pour pouvoir modifier le comportement des MapTips, le moyen le plus simple est de modifier ce qui se passe lors de l'affichage de l'info-bulles à partir du fichier display_maptips.js, plus particulièrement la fonction setExtendedContent. Il est parfois nécessaire de réaliser un traitement coté serveur pour modifier le contenu et le style d'affichage de l'info-bulle. Ce sera le cas dans notre exemple même si on aurait pu traiter cette personnalisation uniquement par du code JavaScript coté client.
1) Gérer l'appel Ajax (Callback) qui sera déclenché lors de l'apparition de l'info-bulle. Pour cela vous ajouterez une variable ASP .Net (m_showTipCallback) dans le code behind de votre page Default.aspx puis vous l'initialiserez. La fonction JavaScript qui traitera le résultat du Callback se nommera DisplayMapTips.
2) Dans la page Default.aspx, stockez ensuite cette variable ASP .Net dans une variable JavaScript (ici webMapAppShowTip). Cette variable contiendra l'instruction JavaScript déclenchant le Callback.
3) Dans le fichier display_maptips.js de votre application, modifiez la méthode setExtendedContent de la classe d'objet MapTipWindowObject. Cette métode est déclenchée lors de l'affichage du contenu d'une info-bulle. C'est cette métode qui va envoyer le Callback au serveur (instruction eval) en lui fournissant le contenu initial de l'info-bulle. Le serveur va utiliser ce contenu pour générer le code HTML qui sera finalement affiché dans l'info-bulle. C'est la variable mapTipmsg qui contiendra le contenu HTML renvoyé par le serveur.
4) Dans le fichier display_maptips.js de votre application, rédigez maintenant rédiger la fonction qui traitera le résultat du Callback. Ce résultat correspond au contenu final de l'info-bulle.
5) Il reste à implémenter dans le code behind de la page Default.aspx (coté serveur) les instructions qui construiront le contenu final de l'info-bulle. Pour cela, vous ajouter ces instructions dans la fonction RaiseCallbackEvent2 qui traite les requêtes Ajax (Callbacks) des clients. En analysant la partie EventArg de l'URL transmise par le client, vous pourrez repérer facilement les Callback générés par l'affichage d'une info-bulle.
6) Il reste maintenant à configurer les propriétés du contrôle MapTips pour y rédiger l'expression de base de l'étiquette. Dans notre exemple, nous avons décidé de construire une chaîne avec les deux valeurs (nombre de places occupées et nombre de places total disponibles) séparées par le caractère "#".
7) Votre application peut maintenant être compilée puis exécutée.
Conclusion
Au travers de ces 4 articles, j'ai évoqué différents niveaux de personnalisation des info-bulles. Selon vos besoins et vos compétences en développement, du plus simple au plus avancé, vous avez le choix.
