Discussion :

[jrenard]

Sur la question du décalage des pictos, j'ai fait un petit tests très simple : j'ai gardé les pictos dans leur position par défaut en supprimant le positionnement relatif et les propriétés top et left. Et ce qui est étonnant, c'est que selon les navigateurs le positionnement par défaut n'est pas le même.

Avec Firefox :



Avec Chrome, IE et Safari :



Avec Opera :



Une bizarrerie d'interprétation des navigateurs qui est bien ennuyeuse et pour laquelle je n'ai pas de solution miracle qui va marcher à tous les coups. Le mieux que l'on puisse faire, c'est de calculer visuellement pour chacun de ces trois cas de figure les décalages relatifs nécessaires au bon positionnement des pictos (celui que tu obtiens à l'heure actuel sous Firefox). Une fois que tu as les bons décalages nécessaires en X et Y pour chaque picto et chaque navigateur, il va te falloir tester dans le code le navigateur en cours via les différentes valeurs de l'attribut browser du viewer de la carte, et en fonction du résultat obtenu affecter au picto le décalage qui va bien. Bref, pour chaque positionnement relatif de bouton, un squelette de code qui ressemblera à ça :

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
var decalageX = "";
var decalageY = "";
if (viewer.browser.mozilla) {
    decalageX = "..px" ; // décalage horizontal nécessaire calculé sous Firefox
    decalageY = "..px" // décalage vertical nécessaire calculé sous Firefox
} else if (viewer.browser.opera) {
    decalageX = "..px" ; // décalage horizontal nécessaire calculé sous Opera
    decalageY = "..px" // décalage vertical nécessaire calculé sous Opera
} else {
    decalageX = "..px" ; // décalage horizontal nécessaire calculé sous Chrome, IE et Safari
    decalageY = "..px" // décalage vertical nécessaire calculé sous Chrome, IE et Safari
}
bouton.style.position = "relative";
bouton.style.left = decalageX;
bouton.style.top = decalageY;

C'est un long et fastidieux car cela nécessite de re-mesurer plusieurs fois les décalages dans des configurations différentes, mais ça devrait bien se passer.

Dernier avertissement : comme le faisait remarquer Christian (http://www.developpez.net/forums/d14...lla-sous-ie11/) à l'heure actuelle le fait d'être en IE11 simule de façon erroné un affichage sous Firefox. Mais cela a été corrigé en interne et la correction devrait être propagée assez rapidement. Et comme de toute façon je crois que c'est IE9 qui t'intéresse, cela ne t'impactera pas.

Je crois que j'ai fait le tour ! Je te laisse tester tout ça.

[cmail]

Sur la question du décalage des pictos, j'ai fait un petit tests très simple : j'ai gardé les pictos dans leur position par défaut en supprimant le positionnement relatif et les propriétés top et left. Et ce qui est étonnant, c'est que selon les navigateurs le positionnement par défaut n'est pas le même.

Pour ma part, à mes vagues souvenirs, j'avais déjà constaté ce problème depuis un bout de temps... Je ne crois pas que cela date d'une version style.css récente ou des dernières générations navigateurs...
Il me semble que c'est un problème de margin (ou padding) pas sur les boutons mais sur les box (panel) qui les contiennent, et dont la longueur est interprétée différemment sous ie, chrome et ff, et résolu à l'époque par des css adéquats...

[jrenard]

J'ai également pensé à des interprétations diverses de marge par dféfaut sur les navigateurs, ce qui est courant. Pourtant, même en ajoutant une feuille de reset css pour forcer la réinitialisation préalable de toutes les valeurs par défaut, les comportements ne changent pas... Cela ne viendrait donc pas de là. Peut-être faut-il être plus subtil dans les css ciblés, je regarderai ça la semaine prochaine.

Sinon, je viens d'y penser, une autre méthode est de positionner les pictos en absolu plutot qu'en relatif, en calculant les bons positionnements comme pour le PanPanel. Avec ça on ne devrait plus avoir de surprise d'un navigateur à l'autre. Je verrai si ça marche lundi matin.

[jrenard]

Bonjour,

Je reviens sur ce point évoqué rapidement vendredi soir :

Sinon, je viens d'y penser, une autre méthode est de positionner les pictos en absolu plutot qu'en relatif.

Je pense que c'est finalement la meilleure méthode, car elle sera portable sans variation d'un navigateur à l'autre, et évitera de faire des tests sur le navigateur courant via viewer.browser.
L'idée est donc de positionner les boutons en position absolute et non plus relative. Le positionnement absolu d'un objet détermine la position fixe de cet élément par rapport à son élément parent. Dans notre cas, l'élément parent des différent boutons c'est la première partie du cartouche d'outils, celle qui contient tous les boutons d'outils. Il suffit de calculer la position souhaitée du bouton par rapport à un des coins de cet élément, est d'affecter au bouton ces valeurs. Si par exemple on veut placer notre bouton à 70px à gauche et 5px en haut du coin supérieur gauche de l'élément parent, voilà le bout de code à affecter (qui remplace bien entendu le positionnemen relatif que l'on a pu attribuer auparavant :

Code :

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

1
2
3
B_CentreHTML.style.position = "absolute";
B_CentreHTML.style.left = "70px";
B_CentreHTML.style.top = "5px";

Avec le résultat suivant :



Portabilité garantie sans décalages sur tous les navigateurs

[Zebulon777]

Désolé de ne pas avoir donner de nouvelles plus tôt, mais j'étais sur un autre projet urgent...
Bref, je reviens et je suis entrain de découvrir toutes les explications et de les mettre en oeuvre.
Encore merci et, bien sur, je tiens au courant la communauté et surtout Jérémy.

[Zebulon777]

Je poursuis sur la question du PanPanel qui se déplace. Cela n'a rien à voir avec le navigateur, mais avec la taille de la fenêtre ouverte. Dans ton code, tu as défini le placement de ce panel en coordonnées absolues depuis le coin supérieur gauche de la fenêtre cartographique. Mais dans le même temps, la dimension de ta fenêtre cartographique s'adapte à la largeur de ta fenêtre (ce qui est très bien en soi). Résultat: tu as entré des coordonnées absolues pour le positionnement de ton PanPanel dnas un certaine configuration de fenêtre, mais dès que tu affiches la carte dans nue fenêtre plus large ou moins large, le positionnement absolu du PanPanen ne change pas alors que le positionnement du cartouche d'outils lui s'adapte pour rester collé au bord droit. D'où le problème constaté.

C'est ce que je disais déjà dans un message précédent, là où l'on parlait de la vue plein écran :

Le contrôle de PanPanel dont la position a été défini par rapport au coin supérieur gauche risque de sortir du cartouche outils qui lui reste collé à droite. Dans ce cas, la valeur de position devra être calculée de façon dynamique par rapport au bord droit de la fenêtre. On calculera donc dans un premier temps la position en X du panel en fonction de taille de la fenêtre cartographique et du décalage par rapport au bord droit (puisque le cartouche outils reste lui invariant par rapport au bord droit). Par exemple, si la position d'origine du PanPanel correspond à 55px par rapport au bord droit et 80px par rapport au bord supérieur, on va désormais le définir comme suit :

Code :

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

1
2
3
// Ajout d'un contrôle OpenLayers de déplacement par flèches avec positionnement absolu dans le cartouche d'outils
var panPanelX = document.getElementById("DivCarte").clientWidth - 60;
viewer.getMap().addControl(new Geoportal.Control.PanPanel(), new OpenLayers.Pixel(panPanelX,80));

De cette manière, quelle que soit la taille de la fenêtre, le panPanel sera toujours bien placé dans le cartouche!

Attention, c'est quelque chose qu'il faut avoir en tête pour tous les éléments positionnés de façon absolu dans la fenêtre cartographique alors que leur positionnement est relatif au bord droit ou inférieur de la fenêtre.

Nickel ! Ca à l'air de fonctionner impec.
Au suivant...

[Zebulon777]

Bon, pour le décalage des icônes, c'est du tout bon, du moins pour IE et FF que j'ai pu tester.

Il reste donc la couleur du cartouche des couches qui ne fonctionne pas.
Du moins, pas les couches, alors que pour le titre c'est bon.

J'ai bien déplacé l'appel à la personnalisation des couches à la fin de la procédure InitMap, comme conseillé, mais ça ne change rien.

Dans la personnalisation, j'ai donc mis :

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
...
...
...
	var WCartoucheCouche = document.getElementsByClassName("gpControlLayerSwitcher")[0];
	WCartoucheCouche.style.width = "225px";// Permet de définir la largeur du gestionnaire de couche ici à 250px
	
	C1 = document.getElementsByClassName("gpControlLabelClass")[1];
	C1.style.backgroundColor = "#A49070";
	C1.style.cursor = "pointer";
	C1.style.fontFamily = "Arial,Helvetica,sans-serif";
	C1.style.fontSize = "11px";
	C1.style.fontWeight = "bold";
	C1.style.padding = "2px";
	C1.style.textAlign = "center";

var layers = document.getElementsByClassName("gpLayerDivClass");
for (var i=0;i<layers.length;i++) {
	C2 = layers[i];
	C2.style.backgroundColor = "#C3B59B";
	C2.style.borderBottomColor = "#FFFFFF";
	C2.style.borderBottomStyle = "1px";
	C2.style.borderBottomStyle = "solid";
	C2.style.color = "#FFFFFF";
}

layers = document.getElementsByClassName("gpLayerDivClassAlternate");
for (var i=0;i<layers.length;i++) {
	C2 = layers[i];
	C2.style.backgroundColor = "#B2C39B";
	C2.style.borderBottomColor = "#FFFFFF";
	C2.style.borderBottomStyle = "1px";
	C2.style.borderBottomStyle = "solid";
	C2.style.color = "#FFFFFF";
	
}

	//.gpToolBoxContent {
	C3 = document.getElementsByClassName("gpToolBoxContent")[0];
	C3.style.backgroundColor = "#C3B59B";
	C3 = document.getElementsByClassName("gpControlLabelClass ")[0];
	C3.style.backgroundColor = "#A49070";
...
...
...

C1 et C2 concernent toujours le cartouche "Couches" et C3 concerne le cartouche "Outils".

Les modifications C3 fonctionnent mais pas les C1 et C2.

[jrenard]

Du moins, pas les couches, alors que pour le titre c'est bon.

Les modifications C3 fonctionnent mais pas les C1 et C2.

Il y a comme une contradiction dans ce que tu écris : pour le titre du gestionnaire de couches (élément C1), la mise en forme est prise en compte ou pas ?

[Zebulon777]

Oups, désolé, je me suis trompé.
Donc C1 et C3 fonctionnent, c'est donc bien C2 qui ne fonctionne pas.

[jrenard]

Je ne comprends pas d'où vient le problème. Si je prends une page basique de l'API et que je colle juste à la fin de la fonction initMap() le code exact que tu viens de recopier dans ton message plus haut, les couleurs de fond du gestionnaire de couches sont bien prises en compte :



Es-tu bien sûr que plus aucune instruction Javascript n'est exécutée après ces instructions, qui pourraient ajouter des couches ou des contrôles, ou modifier d'autres propriétés CSS, et donc perturber la mise en forme du gestionnaire de couches ?

[Zebulon777]

Je crois que je viens de trouver le pourquoi du comment, mais je ne sais pas trop comment résoudre le problème.
Pour appeler la procédure en question, à la fin du InitMap, je fais :

Code :

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

1
2
3
4
// Procédure de configuration et de personnalisation de la carte, des cartouches, etc...
	PersonalisationCartouches(viewer, map, iv, "ACCUEIL");
	iv.setLayerVisibility('Principales villes', false); // A LAISSER, on affiche pas les villes sur la carte principale

Si j'ajoute le code de changement des couches juste après, ça fonctionne :

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
// Procédure de configuration et de personnalisation de la carte, des cartouches, etc...
	PersonalisationCartouches(viewer, map, iv, "ACCUEIL");
	iv.setLayerVisibility('Principales villes', false); // A LAISSER, on affiche pas les villes sur la carte principale
var layers = document.getElementsByClassName("gpLayerDivClass");
for (var i=0;i<layers.length;i++) {
	C2 = layers[i];
	C2.style.backgroundColor = "#C3B59B";
	C2.style.borderBottomColor = "#FFFFFF";
	C2.style.borderBottomStyle = "1px";
	C2.style.borderBottomStyle = "solid";
	C2.style.color = "#FFFFFF";
}

layers = document.getElementsByClassName("gpLayerDivClassAlternate");
for (var i=0;i<layers.length;i++) {
	C2 = layers[i];
	C2.style.backgroundColor = "#B2C39B";
	C2.style.borderBottomColor = "#FFFFFF";
	C2.style.borderBottomStyle = "1px";
	C2.style.borderBottomStyle = "solid";
	C2.style.color = "#FFFFFF";
	
}

Mais il suffit que je clique sur une des couches pour que les couleurs soient réinitialisées !!!
De plus, ça ne fonctionne pas sur les autres fenêtres.

Est-ce que tu veux que je te renvoies une partie du code ?

Ps : si je remets tout dans le fichier CSS de l'appli, tout fonctionne correctement... ou presque la couleur alternative ne s'affiche 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
.gpLayerDivClass {
	background-color: #C3B59B;
	border-bottom-color: #FFFFFF;
	border-bottom-style: 1px solid;
	color: #FFFFFF;
}

.gpLayerDivClassAlternate {
	background-color: #E8D3AD;
	border-bottom-color: #FFFFFF;
	border-bottom-style: 1px solid;
	color: #FFFFFF;
}

[jrenard]

Est-ce que tu veux que je te renvoies une partie du code ?

Pas la peine, je reproduis le comportement.
Je vais y regarder

[Zebulon777]

Je relance, car c'est un peu (beaucoup ?) la panique ici.

Ayant trop de problème de configuration, j'ai repassé toutes les configurations dans le CSS, mais ça soulève de nouveaux problèmes.

Le premier : Lorsque je clique sur "Outils", le cartouche se ferme normalement, mais il laisse une zone blanche, alors qu'avant, ça se passait très bien.[/S]
J'ai trouvé :

Code :

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

1
2
3
4
	var WCartoucheOutils = document.getElementsByClassName("gpToolBoxClass")[0];
	WCartoucheOutils.style.width = "130px";
//	WCartoucheOutils.style.height = "275px"; // MECHANTE LIGNE QUI PROVOQUE MON BLANC ;) ;) ;)

Par contre, je ne sais pas si je laisse la configuration dans le CSS ou si je réactive le code, sachant que C2 ne fonctionne toujours pas alors que dans le CSS, c'est bon ? Un conseil, docteur ?

[jrenard]

Ayant trop de problème de configuration, j'ai repassé toutes les configurations dans le CSS, mais ça soulève de nouveaux problèmes.

Je ne pense pas que ce soit la bonne solution, car tu vas créer de nouveaux problèmes, tu viens de t'en apercevoir toi-même.

Aux problèmes que tu rencontres actuellement, il n'y a que deux issues :
- soit on essaie de comprendre ce qu'il se passe chez toi alors que le code que tu m'as envoyé fonctionne parfaitement bien chez moi et pourrait être montré tel quel (ce que l'on est en train de faire dans le sujet d'à coté)
- soit tu repasses tout en version 2.0.3, ce qui n'est pas satisfaisant car tu ne bénéficies plus des évolutions de l'API => pour cela dans tous les appels à des fichiers sources issus de api.ign.fr (fichiers Javascript ou feuilles de styles CSS) tu remplaces la mention "latest" par "2.0.3".

[Zebulon777]

Okette, c'est fait, j'ai commenté les configurations de la feuilles de style.

[jrenard]

En regardant un peu le code de ton appli, la meilleure façon de gérer la couleur des couches est bien de passer directement par le fichier CSS. Mais attention ! Ce fichier CSS doit être appelé dans le header de ta page HTML (entre les balises <head>...</head>) et pas dans le body, sinon tu sors des recommandations et des usages du HTML et cela pourrait provoquer des effets de bord.

Si je déplace donc l'appel de la feuille de style au bon endroit et que j'appelle des propriétés CSS sur les gpLayerDivClass et Alternate, elles ne sont effectivement pas prises en compte, considérant que les éléments HTML concernés n'existent pas encore car créés par la suite ensuite par l'API :

Code :

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

1
2
3
4
5
6
7
.gpLayerDivClass {
	background-color: #C3B59B;
}

.gpLayerDivClassAlternate {
	background-color: #E8D3AD;
}

Pourtant, si l'on essaie d'attribuer des propriétés CSS à la classe gpLayerNameGroupDivClass (qui est parente des deux précédentes), surprise, ça marche ! On perd juste l'effet alterné car toutes les couches sont traitées de façon uniforme :

Code :

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

1
2
3
.gpLayerNameGroupDivClass {
	background-color: #C3B59B;
}

L'idée pour retrouver l'affichage alterné est de mixer ces deux morceaux de code : utiliser les classes alternées, mais pointer à l'intérieur de ces classes les éléments enfants que sont les gpLayerNameGroupDivClass. Cela donne le code suivant :

Code :

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

1
2
3
4
5
6
7
.gpLayerDivClass .gpLayerNameGroupDivClass{
	background-color: #C3B59B;
}

.gpLayerDivClassAlternate .gpLayerNameGroupDivClass{
	background-color: #E8D3AD;
}

Et là ... ça marche !

[Zebulon777]

Et là, c'est tout bon...

Je te remets le code de gestion du bouton du graticule, car c'est de lui que viennent les problèmes de souris.
Je me demande si ça ne vient pas de la classe ?
J'en ai essayé plusieurs, mais sans succès pour le moment.

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
// Ajout d'un bouton affichant un quadrillage cartographique ###########################################################################
WIconeGrille = "./Images/Grille.png";
// On ajoute le contrôle à la carte
var WGraticule = new Geoportal.Control.Graticule();
viewer.getMap().addControl(WGraticule);
//WGraticule.deactivate(); // Il ne faut pas que le graticule soit affiché à l'ouveture de la page.
var B_Grille = new OpenLayers.Control.Button({
	displayClass: "olControlGraticule",
	title: "Affiche du quadrillage cartographique avec latitude et longitude.",	
	trigger: function() {
		var gratCtrl = viewer.getMap().getControlsByClass('Geoportal.Control.Graticule');
		if (WGraticule.active) {
			WGraticule.deactivate();
		} else {
			WGraticule.activate();
		}
	}
});
// Création du bouton
var tbx2 = viewer.getMap().getControlsByClass('Geoportal.Control.NavToolbar')[0];
tbx2.addControls(B_Grille);
// Application d'un style au bouton
var B_GrilleHTML = document.getElementsByClassName("olControlZoomOnDefautItemInactive")[1];
B_GrilleHTML.style.background = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_GrilleHTML.style.border = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_GrilleHTML.style.backgroundImage = 'url("'+WIconeGrille+'")';
B_GrilleHTML.style.width = "16px";
B_GrilleHTML.style.height = "16px";
B_GrilleHTML.style.position = "absolute";
B_GrilleHTML.style.left = "95px";
B_GrilleHTML.style.top = "5px";
B_GrilleHTML.style.cursor = "Pointer";

Lorsque je commente ce bout de code, le fonctionnement est normal, mais en le laissant actif, la souris est un croix et il n'y a plus de réactions au clic ou au survols.

[jrenard]

Il y un problème majeur dans ce morceau de code, qui peut avoir des répercussions très ennuyeuses.

D'abord tu définis ton bouton de graticule avec un nom de classe "olControlGraticule" :

Code :

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

1
2
3
var B_Grille = new OpenLayers.Control.Button({
	displayClass: "olControlGraticule",
	...

Puis tu définis les styles sur un élément HTML qui a pour nom de classe "olControlZoomOnDefautItemInactive" :

Code :

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

var B_GrilleHTML = document.getElementsByClassName("olControlZoomOnDefautItemInactive")[1];

Si tu veux appliquer les styles au bon élément HTML qui pointe sur ton bouton de graticule, tu dois remplacer cette ligne par la suivante :

Code :

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

var B_GrilleHTML = document.getElementsByClassName("olControlGraticuleItemInactive")[0];

Je pense qu'avec ça, les choses devraient mieux se passer.

[Zebulon777]

Nan, ça fonctionne toujours pas normalement : le bouton apparait et est fonctionnel, mais dés que je met en fonction ce bout de code, la souris devient un croix, le clic et le survols ne fonctionnent plus.

Voici le code :

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
// Ajout d'un bouton affichant un quadrillage cartographique ###########################################################################
WIconeGrille = "./Images/Grille.png";
// On ajoute le contrôle à la carte
var WGraticule = new Geoportal.Control.Graticule();
viewer.getMap().addControl(WGraticule);
WGraticule.deactivate(); // Il ne faut pas que le graticule soit affiché à l'ouveture de la page.
var B_Grille = new OpenLayers.Control.Button({
	displayClass: "olControlGraticule",
	title: "Affiche du quadrillage cartographique avec latitude et longitude.",	
	trigger: function() {
		var gratCtrl = viewer.getMap().getControlsByClass('Geoportal.Control.Graticule');
		if (WGraticule.active) {
			WGraticule.deactivate();
		} else {
			WGraticule.activate();
		}
	}
});
// Création du bouton
var tbx2 = viewer.getMap().getControlsByClass('Geoportal.Control.NavToolbar')[0];
tbx2.addControls(B_Grille);
// Application d'un style au bouton
////var B_GrilleHTML = document.getElementsByClassName("olControlZoomOnDefautItemInactive")[1];
var B_GrilleHTML = document.getElementsByClassName("olControlGraticuleItemInactive")[0];
B_GrilleHTML.style.background = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_GrilleHTML.style.border = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_GrilleHTML.style.backgroundImage = 'url("'+WIconeGrille+'")';
B_GrilleHTML.style.width = "16px";
B_GrilleHTML.style.height = "16px";
B_GrilleHTML.style.position = "absolute";
B_GrilleHTML.style.left = "95px";
B_GrilleHTML.style.top = "5px";
B_GrilleHTML.style.cursor = "Pointer";

[jrenard]

Bonjour,

Avec strictement ce même bout de code copié-collé dans l'application que tu m'avais envoyé, je ne reproduis pas le comportement que tu décris. Ce bout de code seul ne saurait donc être en cause, surtout que je n'y vois aucune anomalie.

Une possibilité éventuellement : qu'il y ait des interférences entre ce bout de code et d'autres passages dans le reste du code, avec par exemple des variables différentes qui porteraient le même nom. N'as-tu pas quelque part ailleurs dans ton code une autre variable qui s'appellerait tbx2 ? Ou alors WIconeGrille, WGraticule, B_Grille, B_GrilleHTML ?