19
15 déc 2008

Introduction


La librairie OpenLayers fournit un mécanisme intéressant permettant de facilement créer de nouvelles classes en fonction de ses besoins. Une fonctionnalité qui à mon sens faisait défaut, à cette merveilleuse librairie, était la possibilité d'afficher des tooltips au passage de la souris sur des objets. Google maps propose déjà ce genre de fonctionnalité directement dans son API : Exemple. Je me suis donc lancé, il y a quelques mois, dans la création de ma propre classe. Celle-ci à depuis considérablement évoluée. Les changements majeurs de cette nouvelle version sont une refont complète du code qui hérite dorénavant de la classe OpenLayers.Control, une meilleure intégration des fonctions natives d'OpenLayers, ainsi qu'un placement automatique du tooltips en fonction de la position du curseur.

Mise en application


Pour ajouter le script il vous suffit simplement, après l'avoir téléchargé (ou la version compressée*), de le déclarer dans le Header de votre page. Cela se fait de la manière suivante : OpenLayers exemples Pour utiliser les tooltips, il faut ensuite ajouter un objet de type controle (Etape 1), puis définir une action de type mouseover (Etape 2) pour les objets sur lesquels vous souhaitez voir les tooltips s'afficher . Enfin pour chacune des actions définir les méthodes show() et hide() de la classe (Etape 3) : ttips = new OpenLayers.Control.ToolTips({shadow:true}); map.addControl(ttips); // Etape 1 markers.events.register("mouseover", markers, toolTipsOver); markers.events.register("mouseout", markers, toolTipsOut); // Etape 2 function toolTipsOver(e) { ttips.show({html:"My first ToolTips



"}); } function toolTipsOut(e){ ttips.hide(); } // Etape 3

Propriétés et méthodes


Vous pouvez à loisir customiser l'apparence du tooltips, ses propriétés sont :

  • textColor (string) Ex : "black"
  • bold (boolean) : false
  • opacity (float between 0 to 1) Ex : 1
  • bgColor (string) Ex : "#FFFFFF"
  • html (string) : "some content"
  • shadow (boolean) : true

Exemple


Ci-dessous un exemple de ce qu'il est possible de réaliser :

------------------------------ * La version compressée a été obtenue grâce au formidable outil Packer

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

J'etais tres interesse par les 2 premieres parties, mais la v3 ne marche pas pour moi. Rien ne se passe au survol du marqueur (meme a basse altitude).
@+, et merci pour le site.

ps: je suis sous windows xp pro, FF3

Bonjour Guillaume,

J'ai récemment fait une MAJ du script cela doit provenir de là.
Je regarde ça ce soir et je la mets en ligne.

Arnaud

Voilà l'erreur est réparée.
J'avais quelques "console.log" qui trainaient... :(
J'ai fait le test ultime avec un ie4linux tournant sous wine.
Si lui il passe tout passe :p

Néanmoins, pourrais-tu me dire si cela fonctionne chez toi?

Merci pour ce tuto , mais perso j'ai un soucis !

En fait je voudrais afficher des infos bulles différentes pour chaques points !

Comment faire ?

Il suffit pour cela de modifier la valeur de l'attribut "html".

Vous pouvez passer en paramètre de votre fonction la valeur que vous désirez attribuer à HTML. Ou même un attribut de l'objet vector.properties.

Arnaud

J'ai essayé mais je n'ai pas bien compris :

voici mon code

En fait je fait une boucle pour placer mes points sur la carte js_lat[+p] correspond a la lattitude, et donc js_lon a la longitude.

Mon soucis c'est que chaques points correspond a un lieu différent donc je voudrais que l'infobulles soit perso en fonction du point :(

var p = 1;

for (p=1; p <= +j; p++)
{

markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(js_lat[+p],js_lon[+p])));

}

markers.events.register("mouseover", markers, toolTipsOver);
markers.events.register("mouseout", markers, toolTipsOut);
map.addControl(new OpenLayers.Control.MousePosition());
function toolTipsOver(e) {
ttips.show({html:" Type : Store
ZipCode : 92140 });
}

function toolTipsOut(e){
ttips.hide();
}

Depuis la création de ce tutoriel les préconisations d'OpenLayers ont changé.

Il est maintenant conseillé d'utiliser de préférence la classe vector. Vous pourrez avec celle-ci faire un mouseover qui renvoie l'objet feature sélectionné et vous aurez ainsi accès à tous les attributs de l'objet depuis feature.attributes.

J'ai beau chercher , éplucher la doc etc ...
Avez vous un exemple rapide avec les vectors features etc ??

Merci pour votre aide !

Bonjour,

Je sais que cette discussion date, mais j'ai le même problème. Un exemple aiderait beaucoup pour comprendre comment fonctionne les vectors, features et cie.

Merci d'avance.

Bonjour,

Serait-il possible que vous développiez cette réponse ?
Le code que vous proposez me convient très bien, si ce n'est que j'ai des informations différentes pour chaque bulle, informations que je récupère dans un fichier texte.

Merci par avance.

Bonjour.
Comment s'obtient l'objet markers (dans markers.events.register("mouseover", markers, toolTipsOver));

Tout simplement en créant un objet marker :
markers = new OpenLayers.Layer.Markers('Marker');

Bonjour,

J'ai essayé de mettre ce tuto en application avec l'API Géoportail(béta 1.04) qui utilise OpenLayers, mais lors de la création de l'objet ttips j'ai l'erreur "OpenLayers is not defined". Y-a-t-il des adaptations à faire à "toolTips.js" pour l'utiliser avec l'API Géoportail ? Dans le code de "toolTips.js" il y a en commentaire "@requires OpenLayers/Control.js" et "@requires OpenLayers/Utils.js", que signilfie "@requires", je ne trouve pas d'explication ni dans la doc que j'ai ni sur internet ?

Merci d'avance pour votre expertise.

Jean-Luc.

Je n'ai jamais manipulé l'API de GeoPortail, je suppose que celle-ci surcharge openLayers.

Il faudrait voir comment étendre les fonctionnalités du GeoPortail.

Arnaud

Bonjour,
Avec l'API Geoportail V1.0 (depuis mars 2010) il faut mettre ToolTips_optimize.js (ou Tooltips.js) dans le repertoire "geoportal/js/1.0/lib/openlayers/lib/OpenLayers/Control/"

RM : Il faut pour cela travailler avec l'API en mode developpeur, c'est à dire en l'installant sur son serveur (cf. https://api.ign.fr/geoportail/api/doc/fr/developpeur/setup.html)

Merci pour le suivi !

Arnaud

Je viens d'essayer de l'utiliser avec l'API Geoportail en version 1.0.
J'ai fait une adaptation pour "map".
J'essaye sur une couche kml et le résultat n'est pas top!
http://atlasnw.free.fr/geoportail/exemples/kml_tooltips.html

Bonjour,

J'ai effectivement procédé à quelques tests et cela ne fonctionne pas.
Dans l'immédiat, je n'ai malheureusement aucune solution rapide à apporter :(

Arnaud