Affichage d'une bulle au survol des pointeurs ?

**Zebulon777** · 11/12/2012, 14h13

Bonjour la compagnie,

Je voudrai que le nom des pointeurs affichés sur la carte apparaisse dans une bulle d'aide au survol, de chaque pointeur.

Chaque pointeur est chargé sur ma carte à partir d'un fichier KML différent.

Comment je peux faire ?

**nicolas.h** · 11/12/2012, 15h43

Bonjour,

Serais t'il possible d'avoir un exemple ?

Ensuite en attendant de pouvoir être plus éclairé je te conseil d'aller voir ici:
http://api.ign.fr/documentation/83/a...de-couches-kml

Ainsi au clic ici des bulles apparaissent, il te suffira donc de modifier le onclick en hover

**zainab_k** · 11/12/2012, 15h44

Bonjour,
Le nom de l'objet s'affiche par défaut dans une infobulle quand on clique dessus.
Pour ouvrir cette infobulle au survol, il faut ajouter l'option hover:true

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
viewer.getMap().addLayer("KML",
        {
        "Lieux remarquables",
        "../data/territories_centers.kml",
        {
            projection:OpenLayers.Projection.CRS84,//always set projection when setting 
            maxExtent:new OpenLayers.Bounds(-180, -90, 180, 90),
             minZoomLevel:0,
           maxZoomLevel:10
        },{
           hover:true
        }

    );

**Zebulon777** · 11/12/2012, 16h09

Merci de ta réponse, mais je crois bien que je vais avoir un problème car j'ai besoin de réagir au clic.

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
function initMap () {
	viewer = iv.getViewer();
	map = viewer.getMap();
	
	viewer.addGeoportalLayers(
	  ['ORTHOIMAGERY.ORTHOPHOTOS:WMSC', 'GEOGRAPHICALGRIDSYSTEMS.MAPS', 'ADMINISTRATIVEUNITS.BOUNDARIES', 'TRANSPORTNETWORKS.RUNWAYS', 'TRANSPORTNETWORKS.ROADS'],
	  {
		'ORTHOIMAGERY.ORTHOPHOTOS:WMSC':{visibility:true, opacity:1},
		'GEOGRAPHICALGRIDSYSTEMS.MAPS':{visibility:true, opacity:0.5, maxZoomLevel:13},
		'ADMINISTRATIVEUNITS.BOUNDARIES':{visibility:true, opacity:1},
		'TRANSPORTNETWORKS.RUNWAYS':{visibility:true, opacity:0.8},
		'TRANSPORTNETWORKS.ROADS':{visibility:true, opacity:0.8}
	   }
	);
...
...
...
    var hoverCtrlOpts = OpenLayers.Util.extend(
		map.getPopupDefaults('KML'), 
		{
			//hover:true,
			onSelect:SelectionAeroport,
			autoActivate: true,
			handlersOptions:{
				feature:{
					stopDown:false//allow pan map when drag in feature
				}
			}
		}
	);
    var hoverCtrl= new OpenLayers.Control.SelectFeature([WBaleMulhouse, WBeauvais, WBordeaux, WLyon, WMarseille, WNantes, WNice, WParisORY, WParisCDG, WParisLBG, WStrasbourg, WToulouse], hoverCtrlOpts);
    viewer.getMap().addControl(hoverCtrl);
...

function SelectionAeroport(P_Feature) {
	WAeroport = P_Feature.attributes.name;
	if (Contient(WAeroport, "Charles") == true)
	{
		WFichierHTML = "Paris_CDG.HTML";
		window.open(WFichierHTML,"_Top");
	};
...
}

Donc, dans ce code, si j'utilise le Hover, il exécute la fonction prévue pour le onSelect "SelectionAeroport".

Il faut vraiment que j'arrive à dissocier les 2 et avoir un traitement différent pour chacun.

**tcoupin** · 12/12/2012, 09h21

Hello,

je viens de regarder dans la doc et ceci pourrai être intéressant : http://dev.openlayers.org/docs/files...tFeature.hover

Alors je propose de faire un SelectFeature sans l'option hover et d'en ajouter un second avec l'option hover:true et au lieu de onSelect:SelectionAeroport callbacks:HoverAeroport et dans HoverAeroport tu mets ce qu'il doit ce passer quand tu passe au dessus de tes pointeurs.

**Zebulon777** · 12/12/2012, 09h47

Bon, c'est pas top.
Ce que j'ai fait affiche une espèce de grosse boite contenant plein d'informations qui déplace automatiquement la fenêtre et de plus, le clic ne fonctionne plus.

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
59
    var hoverCtrlOpts = OpenLayers.Util.extend(
		map.getPopupDefaults('KML'), 
		{
			hover:false,
//			onSelect:function () {alert('OK');},
			onSelect:SelectionAeroport,
			//highlightOnly: true,
			//name of the style to be applied
			//Nom du style à appliquer
			//renderIntent: "temporary",
			autoActivate: true,
			handlersOptions:{
				feature:{
					stopDown:false//allow pan map when drag in feature
				}
			}
		}
	);
    var hoverCtrl= new OpenLayers.Control.SelectFeature([WBaleMulhouse, WBeauvais, WBordeaux, WLyon, WMarseille, WNantes, WNice, WParisORY, WParisCDG, WParisLBG, WStrasbourg, WToulouse], hoverCtrlOpts);
    viewer.getMap().addControl(hoverCtrl);

    var hoverCtrlOpts2 = OpenLayers.Util.extend(
		map.getPopupDefaults('KML'), 
		{
			hover:true,
			callbacks:HoverAeroport,
			autoActivate: true,
			handlersOptions:{
				feature:{
					stopDown:false//allow pan map when drag in feature
				}
			}
		}
	);
    var hoverCtrl2 = new OpenLayers.Control.SelectFeature([WBaleMulhouse, WBeauvais, WBordeaux, WLyon, WMarseille, WNantes, WNice, WParisORY, WParisCDG, WParisLBG, WStrasbourg, WToulouse], hoverCtrlOpts2);
    viewer.getMap().addControl(hoverCtrl2);


}
//-----------------------------------------------------------------------------------------------------
function SelectionAeroport(P_Feature) {
	WAeroport = P_Feature.attributes.name;
	if (Contient(WAeroport, "Charles") == true)
	{
		WFichierHTML = "Paris_CDG.HTML";
		window.open(WFichierHTML,"_top");
	};
	if (Contient(WAeroport, "Bourget") == true)
	{
		WFichierHTML = "Paris_LBG.HTML";
		window.open(WFichierHTML,"_top");
	};
}
//-----------------------------------------------------------------------------------------------------
function HoverAeroport() {
	WAeroport = P_Feature.attributes.name;
}
//-----------------------------------------------------------------------------------------------------

En résumé, je débute, je galère, j'ai besoin d'aide

**Zébulon-21** · 12/12/2012, 10h14

Salut frangin Zébulon

Sur cette page tu as une autre alternative :

Le nom est affiché près du marqueur, ce qui permet de réserver à un autre usage le traitement sur clic (ou au survol si "hover" à "true" comme indiqué précédemment).

**Zebulon777** · 12/12/2012, 10h19

LOL, les Zeb' sont foison

C'est pas mal, mais ce n'est pas ce qu'on me demande.
Le client veux vraiment avoir le nom de l'aéroport et éventuellement d'autres petites informations lorsque la souris passe sur le marqueur.

**tcoupin** · 12/12/2012, 10h45

j'ai peut-être trouver ton bonheur :

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
var hoverCtrl=null;
var selectCtrl=null;
function onHoverFunction(f){
    hoverCtrl.unselect(f);
    //Ce qu'il faut faire quand on est au dessus
}
function onSelectFunction(f){
    //Ce qu'il faut faire quand on a cliqué
}
function initMap() {
...
var selectCtrlOpts = OpenLayers.Util.extend(
                viewer.getMap().getPopupDefaults('KML'), 
                {
                        //hover:true,
                        onSelect:onSelectFunction,
                        autoActivate: true,
                        handlersOptions:{
                                feature:{
                                        stopDown:false//allow pan map when drag in feature
                                }
                        }
                }
        );
selectCtrl= new OpenLayers.Control.SelectFeature(mykml, selectCtrlOpts);
    
var hoverCtrlOpts = OpenLayers.Util.extend(
                viewer.getMap().getPopupDefaults('KML'), 
                {
                        hover:true,
                        onSelect:onHoverFunction,
                        autoActivate: true,
                        handlersOptions:{
                                feature:{
                                        stopDown:false//allow pan map when drag in feature
                                }
                        }
                }
        );
hoverCtrl= new OpenLayers.Control.SelectFeature(mykml, hoverCtrlOpts);
 
viewer.getMap().addControl(hoverCtrl);
viewer.getMap().addControl(selectCtrl);
hoverCtrl.activate();
selectCtrl.activate();
}

Il faut bien faire attention à ajouter le hoverCtrl en premier et surtout de dé-sélectionner le feature pour qu'il puisse à nouveau être sélectionner par selectCtrl.

**Zebulon777** · 12/12/2012, 11h10

Voici ce que j'ai fait et qui ne fonctionne pas

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
59
60
61
62
63
    var SelectCtrlOpts = OpenLayers.Util.extend(
		map.getPopupDefaults('KML'), 
		{
			hover:false,
//			onSelect:function () {alert('OK');},
			onSelect:SelectionAeroport,
			//highlightOnly: true,
			//name of the style to be applied
			//Nom du style à appliquer
			//renderIntent: "temporary",
			autoActivate: true,
			handlersOptions:{
				feature:{
					stopDown:false//allow pan map when drag in feature
				}
			}
		}
	);
    var SelectCtrl= new OpenLayers.Control.SelectFeature([WBaleMulhouse, WBeauvais, WBordeaux, WLyon, WMarseille, WNantes, WNice, WParisORY, WParisCDG, WParisLBG, WStrasbourg, WToulouse], SelectCtrlOpts);
	
	var hoverCtrlOpts = OpenLayers.Util.extend(
		viewer.getMap().getPopupDefaults('KML'), 
		{
			hover:true,
			onSelect:HoverAeroport,
			autoActivate: true,
			handlersOptions:{
				feature:{
						stopDown:false//allow pan map when drag in feature
				}
			}
		}
	);
	var hoverCtrl= new OpenLayers.Control.SelectFeature([WBaleMulhouse, WBeauvais, WBordeaux, WLyon, WMarseille, WNantes, WNice, WParisORY, WParisCDG, WParisLBG, WStrasbourg, WToulouse], hoverCtrlOpts);	
	
		viewer.getMap().addControl(hoverCtrl);
		viewer.getMap().addControl(selectCtrl);
		hoverCtrl.activate();
		selectCtrl.activate();


}
//-----------------------------------------------------------------------------------------------------
function SelectionAeroport(P_Feature) {
	WAeroport = P_Feature.attributes.name;
	if (Contient(WAeroport, "Charles") == true)
	{
		WFichierHTML = "Paris_CDG.HTML";
		window.open(WFichierHTML,"_top");
	};
	if (Contient(WAeroport, "Bourget") == true)
	{
		WFichierHTML = "Paris_LBG.HTML";
		window.open(WFichierHTML,"_top");
	};
}
//-----------------------------------------------------------------------------------------------------
function HoverAeroport(P_Feature) {
	hoverCtrl.unselect(P_Feature);
	WAeroport = P_Feature.attributes.name;
}
//-----------------------------------------------------------------------------------------------------

Au passage de la souris, ça ne fait rien et le clic sur le marqueur ne fonctionne plus.

Je craque !

**tcoupin** · 12/12/2012, 11h53

peut-être un problème de déclaration de variables globales ou non.

J'ai mis en pièce jointe mon code qui fonctionne. Si tu n'y arrives pas, tu peux m'envoyer ton script pour que je le vois dans sa globalité.

**Zebulon777** · 12/12/2012, 13h58

Merci, mais... : Oula, c'est beaucoup trop compliqué pour moué...

Voici donc mon code...

**tcoupin** · 12/12/2012, 14h54

C'est bon j'ai vu :
- 2 kml étaient mal nommés
- le SelectCtrl et le HoverCtrl doivent être déclarés en global pour pouvoir y accéder depuis les fonction SelectionAeroport et HoverAeroport.

Là où j'ai fait des modifs j'ai mis un commentaire //ICI pour que ce soit explicite. Et pour vérifier que ça fonctionnait bien dans les 2 fonctions j'ai fait afficher le nom de l'aéroport à la place tu titre de la page (Les commentaires //DEBUG)

maintenant ça devrait être bon

**Zebulon777** · 12/12/2012, 15h56

Merci beaucoup.
C'est bon, mais maintenant mon clic ne fonctionne plus... LOL
En fait, maintenant, quand je clic sur un des Aéroports parisiens, j'ai une grosse fenêtres d'informations qui s'affiche au lieu de la bonne page.
J'arrive pas à trouver ce que j'ai cassé !

**tcoupin** · 13/12/2012, 08h40

A bah c'est sûr que si tu lui dis pas quoi faire quand il sélectionne un élément, il va pas le deviner

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
var ADPCtrlOpts = OpenLayers.Util.extend(
			map.getPopupDefaults('KML'), 
			{
				hover:false,
	//			onSelect:function () {alert('OK');},
				onSelect:SelectionADP,
				//highlightOnly: true,
				//name of the style to be applied
				//Nom du style à appliquer
				//renderIntent: "temporary",
				autoActivate: true,
				handlersOptions:{
					feature:{
						stopDown:false//allow pan map when drag in feature
					}
				}
			}
		);
		ADPCtrl= new OpenLayers.Control.SelectFeature([WParisCDG, WParisLBG, WParisORY],ADPCtrlOpts);
		viewer.getMap().addControl(ADPCtrl);

**Zebulon777** · 13/12/2012, 13h50

Je ne comprends pas.
J'ai beau lire et relire le code, je ne vois pas ce qui empêche le fonctionnement correct.

Ci-joint l'image qui s'affiche lorsque je clique sur Le Bourget, par exemple.

Ca marche !

Bon, y a pas à dire, je suis très fatigué ; je viens de voir ce qui manquait.

Maintenant, il faut que j'arrive à zoomer et centrer la carte quand je clique sur Paris.

**Zebulon777** · 17/12/2012, 10h07

Bon, ben je n'arrive pas à faire un petit encadrement jaune (style bulle d'aide) qui s'afficherait au passage de la souris.

**Zebulon777** · 18/12/2012, 11h25

Après quelques recherches, j'ai trouvé ça :

Code :

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

1
2
3
4
	document.write('<layer bgColor="#ffffdd" '
       +'style="width:150px;border:1px solid black;color:black">'
       + WAeroport + '</layer>' );

Mais le problème est que ça afficher le nom de l'aéroport non pas sur la carte, mais en remplacement de toute la fenêtre.

Comment faire ?

Affichage d'une bulle au survol des pointeurs ?

IGN API Géoportail

Discussions similaires

Partager

Partager