Discussion :

[Zebulon777]

Je relance le sujet car je viens de me rendre compte qu'il y avait des problèmes avec les coordonnées relatives.
Dans FF29 tout fonctionne correctement, mais dans IE, c'est tout décalé.



L'image de gauche est celle de IE et à droite, il y a FF.

Plusieurs problèmes sont remarquables :
- les icônes sont décalées.
- la couleur du cartouche n'est pas respectée.
- le pavé "flèches" est encore plus décalé.
- l'icône d'impression a disparu.

Au secours....

[jrenard]

Bonjour,

Avec quelle version d'IE travailles-tu ? Je viens de faire des tests de mon coté, et avec une page API modifiée de la même façon que la tienne (celle que je me suis construite au fur et à mesure de nos discussions dans ce sujet), je ne constate aucune modification sous IE sur les versions 9, 10 et 11 par rapport à ce que je constate sous Firefox ou sous Chrome. Sous IE8 en revanche, les modification de style appelées depuis le Javascript ne sont pas prises en compte du tout et je garde la mise en forme par défaut de la carte, la faute à la fonction getElementsByClassName non reconnue sous IE8 (le seul moyen de contourner ce problème sous IE8 étant d'utiliser du JQuery).

[Zebulon777]

C'est IE9.
Mais je remarque aussi de temps en temps que le pavé 4 flèches, n'est pas toujours à la même place : des fois il est très bien positionné et des fois, complètement décalé, mais je n'arrive pas à provoquer le problème.

Bizarre, bizarre.

[jrenard]

Aurais-tu une URL de test pour que je puisse aller jeter un oeil à ton code et tester de mon coté ?

[Zebulon777]

Malheureusement non, ce n'est pas encore public.
Il faudrait que je puisse te faire parvenir l'application en entier, mais en direct, pas sur le site.

[jrenard]

Sinon, pourrais-tu m'envoyer le code Javascript utilisé par l'API en message privé ?

[Zebulon777]

Bon, je ne trouve pas comment t'envoyer un fichier par MP !!!

[gcebelieu]

On ne peut visiblement pas le faire.
Dans ce cas, le copier / coller entre deux balises [code ] ... [/code ] est ton ami

[Zebulon777]

Jérémy, je t'envoie le code par MP.

[jrenard]

Vu, j'y regarde dans la journée.

[jrenard]

Premier diagnostic de mon coté:
- je ne constate pas de problème de déplacement du panneau directionnel à 4 flèches, quel que soit le navigateur et la dimension de la fenêtre
- je ne reproduis pas de bug sur la couleur de fond, en même temps dans le code que tu m'as fourni à aucun moment une couleur de fond n'est définie
- en revanche, j'ai bien des soucis de positionnement des pictos d'outils

Sur ce dernier point, les comportements sont assez étranges et parfois très différents selon les navigateurs. Cela ne devrait pas arriver, dans mes propres tests j'arrive à une portabilité parfaite sous tous navigateurs sans déplacement des pictos. Il doit donc y avoir quelque chose dans le code. Je vais étudier ça et j'espère revenir avec des explications.

[Zebulon777]

Merci J.
Si tu as besoin, je pourrai te faire parvenir le reste de l'application, mais il faudra obligatoirement passer par le mail.

[Zebulon777]

La couleur des cartouches est définie dans un CSS, mais je pense que ce serait plus simple de tout passer en Javascript.

Ca donne ç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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* -> COULEURS DES CARTOUCHES */
.gpControlLabelClass {
	background: none repeat scroll 0 0 #A49070;
	color: #FFFFFF;
	cursor: pointer;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 11px;
	font-weight: bold;
	padding: 2px 0;
	text-align: center;
}

.gpLayerNameGroupDivClass {
	background-color : rgb(195,181,155);
	border-bottom:1px solid #FFFFFF;
	color:#FFFFFF;
}

.gpControlBasicLayerToolbar {
	background-color : rgb(195,181,155);
}

.gpLayerDivClass {
	background-color : rgb(195,181,155);
	border:none;
}

.gpLayerDivClassAlternate {
	background-color : rgb(195,181,155);
	border:none;
}

.gpToolBoxContent {
	background-color : rgb(195,181,155);
}
/* FIN COULEURS DES CARTOUCHES */

Je pense que c'est pour cela que la couleur n'apparait pas sous IE, mais pour le moment, je n'arrive pas à tout passer en code javascript...

[jrenard]

Effectivement, je reproduis le bug.

J'avoue avoir du mal à comprendre ce qu'il se passe, IE9 n'arrive pas à reconnaître certaines couleurs de fond, je sèche un peu sur la raison et la correction à apporter sur le CSS.
La meilleure solution, comme tu l'as deviné, est de passer tout ça dans le Javascript. Je viens de tester, ça marche sans problème même sous IE9.

De façon générale (petite appréciation personnelle), je trouve qu'il est de toute façon plus propre de modifier l'affichage des éléments de l'API dans le Javascript. La raison ? Les modifier directement dans le CSS implique de placer les styles CSS après l'appel au Javascript (sinon les éléments ciblés par le CSS n'existent pas encore et il ne se passe rien). Or la modification des styles directement dans le HTML via des balises <style> trouve de façon préférable sa place dans l'en-tête de la page, à l'intérieur de la balise <head>, et il est déconseillé de les placer à l'intérieur de la balise <body>.

[Zebulon777]

Bon, je suis donc dans la bonne direction, chouette.
Sauf que ça ne fonctionne pas du tout.

Par exemple, j'essaye ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
.gpControlLabelClass {
	background: none repeat scroll 0 0 #A49070;
...
}

devient : 

var WCartoucheCouche = document.getElementsByClassName("gpControlLayerSwitcher")[0];
WCartoucheCouche.style.background = "#A49070";

Mais ça ne fonctionne point...

[jrenard]

Ca devrait mieux marcher avec le bon appel CSS

Code :

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

WCartoucheCouche.style.backgroundColor = "#A49070";

[Zebulon777]

Pas mieux... En fait j'avais déjà essayé.
J'ai été obligé de refaire une affectation, pour que ça fonctionne :

Code :

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

1
2
3
	C1 = document.getElementsByClassName("gpControlLabelClass")[1];
	C1.style.backgroundColor = "#A49070";

Edit : bon, c'est vraiment une galère, il n'y a pas une correspondance qui fonctionne !!!

Je ne comprends pas pourquoi ce code ne fonctionne pas :

Code :

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

1
2
3
var WCartoucheCouche = document.getElementsByClassName("gpControlLayerSwitcher")[0];
WCartoucheCouche.style.backgroundColor = "#A49070";

On dirait que le Javascript et le CSS ne pointe pas sur la même chose.

Je craque !

[jrenard]

Bonjour,

Affecter la couleur de fond en Javascript (element.style.backgroundColor = "..."; ) fonctionne bien, je viens de tester. En tous cas sur le cartouche outils (en-tête et contenu) et sur l'en-tête du cartouche de couches. Reste effectivement un problème sur les couches du catalogue de couches qui ne prennent pas en compte la couleur de fond demandée. J'ai déjà pointé quelques erreurs de code, mais ce n'est pas encore tout à fait concluant. Je vais pousser là-dessus pour offrir une solution satisfaisante.

Je poursuis le diagnostic sur d'autres points.

[jrenard]

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.

[jrenard]

Pour le problème de la couleur de fond du gestionnaire de couches, je viens de cibler le problème. En soi, il est très simple: dans ton code tu définis les couleur de fond avant l'ajout des couches. Donc tu applique des propriétés de style sur des div qui n'existent pas encore !

Pour régler cela, il faut bien faire attention dans ta fonction initMap() à appeler la personnalisation des cartouches après l'ajout de toutes les couches, idéalement à la toute fin de la fonction initMap(). Un peu plus subtil: dans ton code, tu ajoutes également un contrôle de graticule. Ce contrôle ajoute en fait une nouvelle couche à la carte, par-dessus toutes les autres, même si elle n'apparaît pas comme telle dans le gestionnaire de couches. Du coup cet ajout "invisible" de couche casse le contenu du gestionnaire de couche et les styles qui lui ont été attribués. Ta mise en forme de ce gestionnaire de couches doit donc intervenir après l'ajout du graticule.

En fait, dans l'idéal, le code de la fonction initMap() à devrait s'organiser dans l'ordre suivant:
- ajout des couches
- ajout des contrôles / mise en forme du cartouche outils
- mise en forme du cartouche couches

Enfin, tu ne cibles pas la bonne classe dans ton code pour attaquer les différentes couches du cartouche de couches. Ce n'est pas la classe .gpLayerNameGroupDivClass qui est concernée. En fait, les couches s'affichent alternativement avec deux classes .gpLayerDivClass et .gpLayerDivClassAlternate. Ce sont ces deux classes qui dictent la mise en forme des couches dans le gestionnaire de couches. Il faut donc appeler un par un tous les éléments ayant ces noms de classe, et leur appliquer les propriétés qui vont bien :

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 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 = "#C3B59B";
	C2.style.borderBottomColor = "#FFFFFF";
	C2.style.borderBottomStyle = "1px";
	C2.style.borderBottomStyle = "solid";
	C2.style.color = "#FFFFFF";
	
}

Avec ça, tu as un gestionnaire de couches au poil

Si je compte bien, il ne reste plus qu'un problème (en dehors du service d'impression qui est traité par ailleurs) : celui du décalage des pictos quand on change de navigateur. Je vais m'y pencher de ce pas.