Introduction

Il y a quelques mois suite à l'initiative de quelques passionnés est né GeoExt mariage de la librairie cartographique OpenLayers et de la librairie orienté GUI (IHM) Ext.

Ce tutoriel a pour objectif d'ajouter une nouvelle fonctionnalité à cette librairie GeoExt en fournissant la possibilité d'ajouter des tooltips (infobulles) au passage de la souris sur des objets de type feature. Ce n'est qu'une version 0.1 et de nombreuses améliorations sont possibles, notamment une prochaine intégration de la classe OpenLayers.popup.

Ajouter et utiliser le script olExtToolTips

L'objet tooltips existe par défaut dans la librairie Ext nous l'avons modifié afin qu'il puisse être plus facilement utilisé par OpenLayers.

Pour l'utiliser, cela n'est pas très compliqué il suffit simplement, après l'avoir téléchargé (ou la version compactée), et de l'ajouter dans votre page de la manière suivante :

<script src="pathTo/olExtToolTips.js" type="text/javascript""></script>

Ensuite pour dans votre script de l'initialiser :

tt = new GeoExt.toolTip({
map: map,
featureLayer : vectors,
autoHeight : true,
autoWidth : true,
hidden: true,
autoHide: true,
plain: true,
showDelay: 0,
hideDelay: 0,
trackMouse: true,
animCollapse : true
});

Les propriétés initiales de l'objet ToolTips n'ont pas été modifiées, référez-vous donc à l'API d'Ext pour savoir ce que vous pouvez ou souhaitez ajouter au constructeur.

Exemple