Ajouter des infobulles (tooltips) avec OpenLayers et Ext

Published on GeoTribu (http://geotribu.net)
Accueil > Ajouter des infobulles (tooltips) avec OpenLayers et Ext
6
01 mar 2009
Ajouter des infobulles (tooltips) avec OpenLayers et Ext
[1]
Arnaud [2]
OpenLayers [3], ExtJS [4], infobulle [5], tooltips [6]
Introduction
Il y a quelques mois suite à l'initiative de quelques passionnés est né GeoExt [7] mariage de la
librairie cartographique OpenLayers [8] et de la librairie orienté GUI (IHM) Ext [9].
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 [10] 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é [11] (ou
la version compactée [12]), 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 [13] pour savoir ce que vous pouvez ou souhaitez ajouter au constructeur.
Exemple
tooltips_ext.png
[14]
Image not found
http://geotribu.net/sites/default/files/Tuto/img/OpenLayers/tooltips_ext.png
OpenLayers [15]
Intermédiaire [16]
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 !
Team GeoTribu
Image not found
Image not found
Image not found
Image not found
Image not found
Image not found
Image not fou
http://88.191.142.86/geotribu_d7/./sites/default/public/public_res//img/fabtest.png
http://88.191.142.86/geotribu_d7/./sites/default/public/public_res//img/fabtest.png
http://88.191.142.86/geotribu_d7/./sites/default/public/public_res//img/fabtest.png
http://88.191.142.86/geotribu_d7/./sites/default/public/public_res//img/fabtest.pn
http://88.191.142.86/geotribu_d7/./sites/default/public/pub
http://88.191.142.86/geotribu_d7/./si
http://88.191.1
Source URL: http://geotribu.net/node/93
Links:
[1] http://geotribu.net/node/93
[2] http://geotribu.net/user/1
[3] http://geotribu.net/taxonomy/term/15
[4] http://geotribu.net/taxonomy/term/16
[5] http://geotribu.net/taxonomy/term/21
[6] http://geotribu.net/taxonomy/term/22
[7] http://www.geoext.org/trac/geoext
[8] http://openlayers.org/
[9] http://extjs.com/
[10] http://extjs.com/deploy/dev/docs/output/Ext.ToolTip.html
[11] http://ks356007.kimsufi.com/arno/geotribu/applications/tutoriaux/tooltips_ext/olExtToolTips.js
[12] http://ks356007.kimsufi.com/arno/geotribu/applications/tutoriaux/tooltips_ext/olExtToolTipsPacked.js
[13] http://extjs.com/deploy/dev/docs/
[14] http://ks356007.kimsufi.com/arno/geotribu/applications/tutoriaux/tooltips_ext/index.html
[15] http://geotribu.net/taxonomy/term/5
[16] http://geotribu.net/taxonomy/term/8