6
01 mar 2009

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 :

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


tooltips_ext.png

A propos de l'auteur: 
Arnaud Vandecasteele

Fervent défenseur de l'Open Source, Arnaud s'est spécialisé dans le développement d'application cartographiques web. OpenLayers, PostGIS ou encore Django sont autant d'outils qu'il manipule au quotidien.
S'il n'est pas en face de son ordinateur, vous le retrouverez un GPS à la main en train de cartographier pour OpenStreetMap, de faire voler son drone ou sur un tatami !

Commentaires

Bonjour,

Merci pour ce tuto.
Quand est-il de la propriété "html" du tooltip?

Celui peut-il être surchargé comme la propriété "title"?

Merci

Fab

Bonjour Fab,

Normalement oui, la propriété HTML devrait fonctionner mais je n'ai pas vérifié.

Arnaud

Bonjour Arnaud,

J'ai testé avec la propriété HTML, mais celle-ci n'est pas modifié lorsque je passe la souris sur un autre feature. En fait elle garde la valeur du feature sur lequel j'ai passé la souris en premier.
Je vais creuser un petit peu plus.

En tout cas, merci pour le bout de code. ;)

@+

Fab

Pour moi aussi, en passant avec la souris sur mon objet, l'objet est selectionné mais reste ensuite.
De plus, l'attribut ne s'affiche pas.
J'ai pourtant modifié "vectors" en "mon-champ-attribut"

Merci d'avance

Après plusieurs tentatives, je n'arrive pas à inclure cette fonctionnalité dans mon appli.
J'ai repris l'appli du GridPanelfeature.

Les tooltips ne s'affiche pas sur ma carte.
Arnaud

Bonjour,

Merci bcp pour tous ces tutos OL!
J'essaie de modifier celui-ci pour que les tooltips affichent la REGION au lieu du NAME.
- dans le fichier html:
tt = new GeoExt.toolTip({
map: map
,featureLayer : vectors
,title :'REGION'

- dans olExtToolTipsPacked.js:
showFeat : function(feat){
feat.layer.drawFeature(feat,"temporary");
this.parent.setTitle(feat.attributes.REGION);

Malgré cela, le NAME apparaît toujours dans les tooltips.
Pouvez-vous svp m'indiquer ce qu'il y a d'autre à changer?