Discussion :

[cmail]

Reprenons depuis le début.
Initialement, il y a bien l'exemple donné par l'ign. Et puis une question de Unusual qui parlait d'affichage de popup.
J'ai bien retenu quelques points des réponses de dgrichard:

1/ Avec la version Openlayer 2.7 associée à geoportail, c'est survol ou click. On ne peux avoir les deux évènements. Et comme l'intégration de OL 2.8 n'est pas d'actualité, on est très limité pour présenter une application suivant les règles de l'art. Puis-je alors insister? N'y aurait-il pas un moyen (une jolie astuce) d'avoir les deux. Une infobulle au survol du repère, et une autre action au click. Ce serait vraiment bien en attendant la version définitive de geoportail intégrant OL 2.8.

2/ Ensuite, au moins, il faudra que je puisse afficher l'infobulle dans toute sa splendeur (un petit rectangle tout simple). Et là, malgré la démo IGN cité ci-dessus, et les conseils de dgrichard, je rame à mort. . Voyez mes tristes essais qui se plantent lamentablement...
Il me (nous) faudrait un exemple simplissime ne prenant que cette fonction en compte, une seul couche, un petit fichier kml avec deux ou trois repères, sans le choix des langues... car je m'y perd un peu avec l'exemple donné par l'ign.
Un peu sur le modèle de ce que présente notre cher mga_geo . Malheureusement son exemple: "utilisation de tooltips" n'est pas encore en ligne.

[mga_geo]

Je viens d'ajouter deux exemples de ToolTips, mais ce n'est pas encore terrible!
Il va falloir que ça se mange de la feature pour être compatible kml/gpx/...

[cmail]

Merci pour ta coopération. Pour l'exemple 1, je m'interroge... pas de repères à l'affichage sous ff3??? donc pas d'infobulle à tester. A moins que je sois bigleux.

Mais l'exemple 2 d'infobulle est une bonne première étape pour un débutant comme moi. Et comme tu dis dans ton commentaire en bas de page:

* comment changer le contenu de la fenêtre?

suite au click sur le repère sélectionné par l'infobulle...

[mga_geo]

Cela affiche juste un texte à côté du marqueur

[cmail]

C'est bizarre. Suite à ton message, je reviens sur ta page et là, la belle de Cadix apparait. Initialement non. As-tu modifié quelque chose ?

[mga_geo]

Non, je n'ai rien modifié. Je sais que des fois je crois devenir chèvre avec des modifs qui ne se prennent pas en compte et le temps de trouver quel cache est en cause ...

[dgrichard]

Comme écrit à plusieurs reprises, OpenLayers 2.8 facilitera beaucoup le travail (d'ailleurs, il vient de sortir officiellement ce jour 28-05-2009 ... va donc falloir l'intégrer à la prochaine versio de l'API).
J'ai donc chercher à afficher des labels fixes à côté des pictos et trouver une soluce technique fonctionnelle, mais complexe :

1. on commence par créer une couche vecteur qui supportera les labels à afficher. Cette couche ne doit pas apparaître dans le gestionnaire de couches : displayInLayerSwitcher:false;
2. lors du chargement (asynchrone) de données vecteur que l'on veux associer à une affichage de labels (en plus de la popup/page), il faut ajouter un écouteur de l'évènement "featuresadded" dont la charge est de peupler la couche de labels par un filtrage qu'il faut programmer Lors de ce peuplement, il faut créer à la volée une popup qui contiendra le label;
3. la création de cette popup s'effectue en surchargeant au point 1 le callback onFeatureInsert (il suffit de s'inspirer du code de l'API!)
4. le point crucial : il faut enregistrer l'évèment "changelayer" de la carte pour la couche de labels qui va bosser quant on active/désactive la couche de données vecteur : son objectif rendre visible/invisible les labels en fonction de la visibilité de la couche vecteur ...

Le code complet sera dans la prochaine mise à jour de l'API sur l'exemple geoportalMap_kml.html

Etapes 1/4:

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
26
27
28
29
30
31
32
33
34
        // Etape 1 :
        var labely= new OpenLayers.Layer.Vector(
            "territories.kml.name.labels",
            {
                styleMap: new OpenLayers.StyleMap({pointRadius:0}), // don't display points
                projection: OpenLayers.Projection.CRS84,
                minZoomLevel: 0,
                maxZoomLevel:10,
                displayInLayerSwitcher:false,   //hide labels from layers switcher
                visibility: false,
                onFeatureInsert: function(f) {
                    // Etape 4
                    var createPopup= function() {
                        var label= "<div style='background-color:#FFFF00;"+
                                               "border:thin solid black;"+
                                               "font-familly:\"Courier New, monospace\";"+
                                               "font-size:12px;"+
                                               "font-weight:bold;"+
                                               "color:#000000;'>"+
                                        this.attributes.name+
                                   "</div>";
                        var popup= new OpenLayers.Popup.Anchored(
                            null,this.geometry.getBounds().getCenterLonLat(),null,label);
                        popup.autoSize= true;
                        popup.backgroundColor= "transparent";
                        this.popup= popup;
                        return this.popup;
                    };
                    f.createPopup= OpenLayers.Function.bind(createPopup,f);
                }
            }
        );
        viewer.getMap().addLayer(labely);

Etape 2:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
        var kt= viewer.getMap().addLayer("KML",
                    {
                        'territories.kml.name':
                        {
                            'de':"Gebiete",
                            'en':"Territories",
                            'es':"Territorios",
                            'fr':"Territoires",
                            'it':"Territori"
                        }
                    },
                    "../data/territories.kml",
                    {
                        //preFeatureInsert:simulateLabelStyle,  // OL 2.8
                        onFeatureInsert:function(f){},          //default OpenLayers : do nothing
                        // Etape 2:
                        eventListeners:{
                            featuresadded: function populateLabels(e) {
                                if (e==null) { return;}
                                var f= null, fi= null, gi= null;
                                for (var i= 0, l= e.features.length; i<l; i++) {
                                    fi= e.features[i];
                                    gi= fi.geometry.getBounds();
                                    f= new OpenLayers.Feature.Vector(
                                        new OpenLayers.Geometry.Point((gi.left+gi.right)/2, gi.bottom),
                                        {
                                            name:fi.attributes.name
                                        });
                                    labely.addFeatures([f]);
                                    f.createPopup();
                                    f.layer.map.addPopup(f.popup);
                                }
                            }
                        },
                        visibility:false,
                        minZoomLevel:0,
                        maxZoomLevel:10
                    },
                    {
                        onSelect:openWikipediaPopup,
                        onUnselect:function(f){} //default OpenLayers : do nothing
                    }
        );

Etape 3 :

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
26
27
28
29
30
31
32
33
34
35
36
        labely.map.events.register(
            "changelayer",
            labely,
            function synchronizeVisibility(e) { //synchronize visibility with KML
                                                //loading KML may take some time, ...
                                                //all labels may not appear the first time !
                if (e==null) { return;}
                if (e.layer==kt && e.property=="visibility") {
                    var i, l, f, p;
                    if (!e.layer.visibility) {  // hide popups if not visible
                        for (i= 0, l= this.features.length; i<l; i++) {
                            f= this.features[i];
                            p= f.popup;
                            if (p) {
                                p.hide();
                            }
                        }
                    }
                    this.visibility = e.layer.visibility;
                    this.display(this.visibility);
                    this.redraw();
                    if (e.layer.visibility) {   // show/create popups if visible
                        for (i= 0, l= this.features.length; i<l; i++) {
                            f= this.features[i];
                            p= f.popup;
                            if (p) {
                                if (OpenLayers.Util.indexOf(this.map.popups,p)==-1) {
                                    f.layer.map.addPopup(f.popup);
                                }
                                p.show();
                            }
                        }
                    }
                }
            });

Cf. pièce jointe pour le résultat.

[cmail]

Comme écrit à plusieurs reprises, OpenLayers 2.8 facilitera beaucoup le travail (d'ailleurs, il vient de sortir officiellement ce jour 28-05-2009 ... va donc falloir l'intégrer à la prochaine versio de l'API).
J'ai donc chercher à afficher des labels fixes à côté des pictos et trouver une soluce technique fonctionnelle, mais complexe :

1/ Merci pour ta peine.
2/ Merci pour tes explications. Ce que j'apprécie c'est que tu donnes les explications de principe et le codage.
3/ Mais, j'ai beaucoup de mal à tout comprendre, vu mes grandes lacunes dans le domaine.

Dans différents propos, tu as laissé entendre que OL 2.8 sera intégré dans l'API. Au début, c'était dans la version béta 4, maintenant dans la version béta 5 ou ai-je mal compris, et ce sera plutôt dans la prochaine mise à jour de la béta 4?

En fait, il nous faudrait une évaluation grossière du temps d'intégration: prochaine mise à jour fin juin, dans 6 mois, un an, au gré d'avancement aléatoire de l'équipe en charge du développement, à la Saint GlinGlin.
Est-ce un travail de titan? Combien de personnes y travailleront?

Parce que si le passage à la version OL2.8 est pour la fin juin, les néophytes comme moi peuvent bien attendre au lieu de s'aventurer sur ce chemin incertain et douloureux malgré la trace que tu nous donnes...

Sinon, je me demande si toutes les infobulles s'affichent à coté des repères au chargement comme le suggère la photo. Mon problème était d'avoir l'infobulle qui s'affiche au passage de la souris sur un repère. Je ne sais?

[dgrichard]

Dans différents propos, tu as laissé entendre que OL 2.8 sera intégré dans l'API. Au début, c'était dans la version béta 4, maintenant dans la version béta 5 ou ai-je mal compris, et ce sera plutôt dans la prochaine mise à jour de la béta 4?

Je répète : OL 2.8 sera intégré.
Je n'ai jamais écrit dans la 1.0beta4, mais simplement dans l'API : donc 1.0beta5 ou 1.0

En fait, il nous faudrait une évaluation grossière du temps d'intégration: prochaine mise à jour fin juin, dans 6 mois, un an, au gré d'avancement aléatoire de l'équipe en charge du développement, à la Saint GlinGlin.
Est-ce un travail de titan? Combien de personnes y travailleront?

Un correctif, c'est une quinzaine de jours maximum de délai ... à partir du moment où il est corrigé. Je préfère accumulé les correctifs et faire une livraison de correction. Tout dépend de la gravité des boggues.
Dans le meilleur des mondes : 2 livraisons par mois.
Dans la réalité : 1 livraison possible.

Pour l'intégration d'OpenLayers 2.8, c'est au mieux pour septembre.

Sinon, je me demande si toutes les infobulles s'affichent à coté des repères au chargement comme le suggère la photo. Mon problème était d'avoir l'infobulle qui s'affiche au passage de la souris sur un repère. Je ne sais?

C'est là où je me répète : pas de solution en dehors d'OpenLayers 2.8 pour cela. Et encore, OpenLayers 2.8 ne lit pas les balises <LabelStyle> dans le KML, il faudra donc pour l'intégration s'y coller!

Pour rappel, le prochain correctif intègrera :

1. le changement de la souris au survol;
2. l'exemple geoportalMap_kml.html comprenant l'ouverture d'une page au clic, l'affichage de labels permanents, des liens dans une popup;
3. la lecture de la balise ExtendedData des KML (OL 2.8).

L'exemple geoportalMap_wfs.html montre comment afficher une infobulle à la volée en OpenLayers 2.7 (pas le survol ET le clic -- sauf à ce que quelqu'un trouve l'astuce qui permettrait de le faire sans remplacer OL 2.7 par OL 2.8).

J'ai regardé les modifications OpenLayers 2.8 : elles sont nombreuses et il est hors de question de mettre en danger l'API 1.0beta4 en mélangeant OL 2.7 et 2.8.

[cmail]

Je répète : OL 2.8 sera intégré.
Je n'ai jamais écrit dans la 1.0beta4, mais simplement dans l'API : donc 1.0beta5 ou 1.0

Pas écrit mais suggéré dans un message du 13/5...

Il semblerait naturel que l'IGN le (l'intégration) fasse : la beta1 était sur OL 2.5, la beta2 sur OL 2.6, la beta3 sur OL 2.7.
OL 2.8 est en RC2 alors que la beta4 est sortie ...

On va donc attendre septembre!

[cmail]

Pour chipoter, je signale une erreur d'écriture dans l'étape 1/4
"font-familly:\ s'écrit qu'avec un seul L.

[Mick Helley]

Bonjour,

Dans ma page http://vigie2.bordeaux-port.fr:81/ais/exterieur.cfm, on peut déclencher une popup au passage de la souris (événement mouseover) et de maintenir la popup ouverte au click.

Pour cela, il faut modifier les fonctions de traitement des événements du marker associé, par exemple

Code :

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

ais_marker.events.register('mousemove', ais_feature, f_mousemove);

Le code des fonctions est le suivant :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
	var POPUP_COLOR = 0.6;
		
	// Gestion de l'événement mouseover pour un marker
	function f_mousemove(evt){
		feature = this;
			
		if (feature.popup == null) {
			feature.popup = feature.createPopup();
			feature.popup.setBackgroundColor('Yellow');
			feature.popup.setOpacity(POPUP_COLOR);
			map.addPopup(feature.popup);
		}
		feature.popup.show();
		OpenLayers.Event.stop(evt);
	};

	// Gestion de l'événement mouseout pour un marker
	function f_mouseout(evt){
		feature = this;
		if ((feature.popup != null) && (feature.popup.opacity == POPUP_COLOR)) {
			feature.popup.hide();
		}
		OpenLayers.Event.stop(evt);
	};

	// Gestion de l'événement click pour un marker
	function f_click(evt){
		feature = this;
		
		if (feature.popup == null) {
			feature.popup = feature.createPopup(true);
			feature.popup.setBackgroundColor('Yellow');
			map.addPopup(feature.popup);
		} 

		// Rajouter les attributs de couleur et la croix
		feature.popup.setOpacity(0.78);
		feature.popup.addCloseBox(f_close);  // Faire vraiment fermer le popup quand on clique sur la croix au lieu de le cacher

		OpenLayers.Event.stop(evt);
	};

	// Gestion de la fermeture du popup
	function f_close(){
		var popup = this;

		// Cacher le popup
		popup.hide();
			
		// Enlever la croix
		OpenLayers.Event.stopObservingElement(this.closeDiv); 
		this.groupDiv.removeChild(this.closeDiv);
		this.closeDiv = null;
			
		// Remettre la couleur d'une popup qui disparaît
		popup.setOpacity(POPUP_COLOR);
	}

Mon code permet de garder la popup ouverte quand on a cliqué sur le marker même si on n'y est plus. Et on peut afficher plusieurs popups à la fois (en cliquant sur chaque marker). La fonctionnalité était indispensable pour mes utilisateurs qui souhaitent comparer la vitesse de passage des bateaux en plusieurs points de l'estuaire.

Et j'utilise la couleur de la popup pour différencier une popup avec croix de fermeture (qui reste affichée), d'une popup sans fermeture.

Le fonctionnement de la popup est normal quand on n'a pas cliqué sur le marker.

Si ça peut t'inspirer pour ton cas...

[cmail]

Cela m'inspire beaucoup, et je vais le mettre en pratique. Même si quand OL2.8 sera intégré au geoportail, ce genre de problème ne sera plus d'actualité. Merci beaucoup.