Affichage au survol de marqueurs KLM

**Zébulon-21** · 24/04/2010, 02h41

Ce modèle de page est basé sur un exemple fourni par mga_geo ainsi que sur tous les autres éléments disponibles sur ce forum (merci à dgrichard).

Par contre, j'ai recherché vainement une recette permettant d'afficher le texte descriptif (texte en jaune dans l'exemple) uniquement au survol des marqueurs.

Est-il possible d'obtenir ce résultat ?

Quant au clic, on lui garde le résultat obtenu ici qui conduit à l'affichage d'une popup quelconque.

Une bizarrerie sur l'affichage de ce texte : le retour à la ligne au "clavier" (entre les crochets CDATA du fichier KML) n'est reconnu que par IE8. Quant au <br /> il est sans effet autant sur IE8 que sur FF.

C'est pour la petite histoire car sans importance dans le cas présent.

Merci par avance pour les tuyaux.

**cmail** · 24/04/2010, 09h44

Salut Zebulon l'insomniaque,
Sans entrer dans les détails techniques, je me demande si tu as regardé http://vivlig.free.fr/ où un label s'affiche au survol de certaines zones.

Tu devrais pouvoir l'adapter à tes besoins. Pour des explications, je te renvois à mes échanges (principalement) avec DGRichard...

Sinon pour l'ouverture d'une page html au click sur un marqueur, plutot que l'ouverture d'un window.open (assez perturbant pour un visiteur) je te conseillerai plutôt d'appeler des JSbox (mootools et compagnie) qui afficheraient ton html sur la page principal de ton API, avec une dimension inférieure, et grisant le reste de ton écran. C'est vraiment beaucoup moins agressif et plus chouette.

Bon travail

**dgrichard** · 24/04/2010, 11h28

Envoyé par Zébulon-21

Est-il possible d'obtenir ce résultat ?

L'exemple de base est là !
Le problème des marqueurs (objets ponctuels par essence) est donc leur sensibilité au survol ...
Il faudrait vérifier si un point stylisé très faiblement (opacité 0.01) avec un rayon de 10px + le picto permettrait d'avoir l'effet "survol" de picto

Envoyé par Zébulon-21

Une bizarrerie sur l'affichage de ce texte : le retour à la ligne au "clavier" (entre les crochets CDATA du fichier KML) n'est reconnu que par IE8. Quant au <br /> il est sans effet autant sur IE8 que sur FF.

Déjà répondu: les labels sont ventillés selon SVG/VML/Canvas selon les possibilités du navigateur. Pour l'instant, cette ventilation n'analyse pas le contenu du label en le mettant sur plusieurs lignes ... Même, le fameux & #013; ne fonctionne pas

**cmail** · 24/04/2010, 14h36

Pour t'éviter de nouvelles nuits de réflexion, j'ai gratté autour de ce problème d'affichage d'une page html avec jsBox depuis l'API...
Sans vouloir ouvrir de longs débats sur le choix de tel ou tel, j'ai pris au hasard: et ce sera ici avec greybox.

Le résultat (à peaufiner) est ici http://43.lignon.free.fr/cadastre/essaiCM6.html

A toi d'analyser et à adapter à tes besoins...

**mga_geo** · 24/04/2010, 16h07

Dans l'exemple de cmail, on n'a pas le survol.
Je viens d'essayer de le faire:
- au survol, changement d'orientation et popup
- au select pas de popup, snif

http://atlasnw.free.fr/geoportail/ex...ml_survol.html

**dgrichard** · 24/04/2010, 16h34

Envoyé par mga_geo

- au select pas de popup, snif

T'aurais pas oublier de rajouter un contrôle pour le clic (il n'y a qu'un contrôle hover) ...

**Zébulon-21** · 24/04/2010, 17h08

@ dgrichard :

Merci pour l’exemple qui semble tout à fait correspondre au besoin. Je vais m’y atteler dès lundi et… essayer d’en sortir quelque chose (il y a de la demande pour obtenir ce simple effet de survol sur un marqueur).

@ cmail :

Merci également pour ce dernier exemple qui me semble plus explicite que le premier car, tu dois en convenir, tes pages sont hyper complexes à décrypter : Le 1er cas cité n’affiche pas la source car il faut faire le parcours du combattant pour déterminer le bon lien et cibler le code adéquat.

C’est très ardu pour un webmaster dilettante. Il y a pas mal de webmasters « honnêtes » qui ignorent les subtilités du code (des pros ou des amateurs néophytes comme moi) et qui recherchent du quasi « prêt à l’emploi, et modulable avec ça ! ». En fait, il s’agit de ceux qui n’ont pas la formation sur ce sujet spécifique, ou qui n’ont pas un niveau de pratique suffisant pour assembler du code au feeling.

Tu l’auras compris, ma position n’est pas uniquement celle du demandeur, contribuant moi-même (modestement) à la vulgarisation du Géoportail, comme sur cet autre forum.

Mes modèles de page récapitulés ici apportent aussi à la communauté, en « retour d’ascenseur », les éléments compréhensibles qui me faisaient défaut dans un premier temps.

@ mga_geo :

Merci aussi à toi pour tes multiples pages d’exemples ; étant observé qu’on ne peut toujours pas les consulter à partir d’IE. Que t’a donc fait ce « pauvre » retraité qu’est William Henry Gates III (dit Bill Gates) ?

A propos, le chemin parcouru sur ce forum depuis près d’un an est à peine croyable : Il faut comparer les attentes du début avec le niveau de sophistication actuel.

Les plus anciens du forum devraient penser au mois de mai 2010 à planter le drapeau du Géoportail sur un grand sommet alpin !

Dans l’ordre : dgrichard (l’ouvreur), Cmail (le 9 mai 2009), Zébulon-21 (le 10 mai 2009) et Mga_geo (le 11 mai 2009).

**mga_geo** · 24/04/2010, 18h23

Avec un petit ajout, merci Didier, la page fonctionne mieux.
http://atlasnw.free.fr/geoportail/ex...ml_survol.html

**tmtisfree** · 24/04/2010, 23h17

Envoyé par Zébulon-21

Par contre, j'ai recherché vainement une recette permettant d'afficher le texte descriptif (texte en jaune dans l'exemple) uniquement au survol des marqueurs.

J'utilise ce controleur OpenLayers pour afficher des 'tooltips' au survol de marqueurs. Facile à intégrer et à styler vu que le contenu est du HTML.

**mga_geo** · 25/04/2010, 08h51

Peux-tu nous communiquer un lien sur une page qui utilise ToolTips ?
Je viens de faire un essai pendant que le café se fait et le résultat n'est pas concluant!
http://atlasnw.free.fr/geoportail/ex..._tooltips.html

**tmtisfree** · 25/04/2010, 23h44

Envoyé par mga_geo

Peux-tu nous communiquer un lien sur une page qui utilise ToolTips ?

Pas vraiment mais je l'utilise comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var legende = "some HTML"; // la variable qui stocke la légende affichée dans le tooltip

var tooltips = new OpenLayers.Control.ToolTips();
map.addControl(tooltips);

var markers = new OpenLayers.Layer.Markers("Marqueurs");
map.addLayer(markers);

markers.events.on({
  "mouseover": toolTipsOver,
  "mouseout": toolTipsOut
  });


// Gestion des tooltips
function toolTipsOver(e) {
    tooltips.show({
      bgColor: '#ECE9D8',
      roundedCorner: false,
      shadow: false,
      html: legende
      });
    };
function toolTipsOut(e){ tooltips.hide(); };

Le tooltip est déclaré avant la création de la couche markers (kml chez toi).
J'ai aussi modifié le fichier ToolTips.js d'origine pour supprimer une erreur avec Firefox que l'on voit dans Firebug (Node was not found...). Il faut commenter les lignes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
this.bgTtips.parentNode.removeChild(this.bgTtips);
this.spanTx.parentNode.removeChild(this.bgTtips);

qui n'ont pas d'utilité et empêche de détruire les tooltips sur la ligne suivante ("OpenLayers.Control.prototype.destroy.apply(this, arguments);")

Les tooltips fonctionneront ensuite dans Firefox (ils fonctionnent sans la modification dans IE).

**mga_geo** · 26/04/2010, 06h29

Merci de ta réponse

Je viens de modifier la page, je n'ai plus cette erreur.Lors du rafraichissement de la page, la fenêtre se déclenche dès que je survole la boite à outils avec la souris.
Si j'évite la boite en passant par le haut, le fenêtre ne se déclenche bien lors du passage à côté d'un marqueur, mais après elle reste...

Je vais plutôt poursuivre mes investigations du côté de OpenLayers.Control.SelectFeature qui me semble mieux convenir dans le cas d'une couche vecteur.

**tmtisfree** · 26/04/2010, 10h35

Envoyé par mga_geo

Merci de ta réponse
Je viens de modifier la page, je n'ai plus cette erreur

Apparemment ToolTips ne fonctionne qu'avec une couche Markers (rendu HTML simple d'un marqueur : une img dans un div) alors qu'une couche KML a un rendu SVG plus complexe.

**Zébulon-21** · 27/04/2010, 17h56

Voici quelques questions qui feront peut-être avancer le smilblic, avant de faire d’autres tests avec la nouvelle variante de popups proposée dans cette autre discussion par mga_geo.

1) - Dans cet exemple d’utilisation, comment faut-il renseigner le fichier KML pour attribuer l’image par défaut (les marqueurs dont le <type> n’est pas renseigné n’apparaissent pas).

var styleMap = new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
externalGraphic: '../img/arrow.png', // Marqueur par défaut ??????

2) - Lorsque l’on referme une popup, il faut 2 clics pour réouvrir une autre popup.

3) - La durée de chargement du tracé KML, parfois assez longue, est-elle liée à la construction de la page ?

4) - Pour cmail : Cet exemple qui exploite Greybox est tiré de ton projet « essaiCM7.html » (pompé sur ton site vers 2h 44mn du matin entre deux séances d’abdos

). La présentation est en effet plus sympa avec ton module mais les URL renseignées dans le KML ne sont pas reconnues (erreur 404 dans la popup). Ai-je (encore) raté un épisode ?

**Zébulon-21** · 28/04/2010, 09h47

J'ai parcouru ce passionnant échange concernant le chargement des fichiers KML.

J'avoue être dérouté

car la taille du fichier n'est pas en cause dans le cas présent, ni le format d'ailleurs : 29,5 ko pour le tracé KML.

Sa petite soeur au format GPX pèse 89,7 ko pour une durée de chargement identique.

J'ai retesté, chrono en main, et en l'espace de 5 mn la durée de chargement est passée de 25 secondes à seulement 5 secondes.

Peut être une explication du côté des réseaux ?

**dgrichard** · 28/04/2010, 10h58

Envoyé par Zébulon-21

1) - Dans cet exemple d’utilisation, comment faut-il renseigner le fichier KML pour attribuer l’image par défaut (les marqueurs dont le <type> n’est pas renseigné n’apparaissent pas).

A la lecture du KML, l'option extractStyles indique si on prend ou non les styles définis dans le KML.

* si true : les objets sans style devraient être mis à jour pour en porter un => preFeatureInsert;
* si false : aucun style n'est chargé => preFeatureInsert (à savoir qu'avec extractStyles à false, le chargement est plus rapide);

Envoyé par Zébulon-21

2) - Lorsque l’on referme une popup, il faut 2 clics pour réouvrir une autre popup.

J'ai pas regardé le code dans les yeux, mais il manque sûrement une gestion à la fermeture de la popup. Le premier clic est inopérant car l'API croit que la popup est déjà affichée ... mais visiblement le code se remet en ordre pour le second clic !

Envoyé par Zébulon-21

3) - La durée de chargement du tracé KML, parfois assez longue, est-elle liée à la construction de la page ?

Pour moi, le chargement est instantané ...

Envoyé par Zébulon-21

4) - Pour cmail : Cet exemple qui exploite Greybox est tiré de ton projet « essaiCM7.html » (pompé sur ton site vers 2h 44mn du matin entre deux séances d’abdos

). La présentation est en effet plus sympa avec ton module mais les URL renseignées dans le KML ne sont pas reconnues (erreur 404 dans la popup). Ai-je (encore) raté un épisode ?

L'URL de l'iframe ouverte est en 404 : http://www.valroc.net/ESSAI/GB/greyb...frame.html?s=0

C'est donc dans le code qu'il y a une pétouille ...

**Zébulon-21** · 06/05/2010, 10h54

En prenant les précautions d'usage, "il semblerait" que la solution soit ici.

Avec un développement ici.

Mais c'est là que le candide atteint ses limites : Comment adapter ces belles choses à l'API Géoportail ?

Un coup de main est-il possible S.V.P.

**mga_geo** · 06/05/2010, 20h00

Ce que j'ai de moins mal actuellement est sur la page http://atlasnw.free.fr/geoportail/ex...l_survol2.html
Il faudrait que j'ajoute une distinction entre survol et sélection pour faire disparaitre le popup à bon escient.
Les pages citées ne me semblent rien apporter de nouveau.