Pas d'affichage des labels avec IE7

**jeanluc35** · 28/06/2010, 14h07

Bonjour,

Il y des topics qui traitent des problèmes de labels au survol mais je n'en ai pas vu qui parlaient de celui-ci : avec IE7 (7.0.5730.11) le label ne s’affiche pas, il y a un trait vertical à la place, ce problème se produit avec cet exemple de l'iGN. La copie d'écran est jointe.

Je sèche sur ce problème, si vous une idée je suis preneur.

**dgrichard** · 28/06/2010, 14h46

Apparamment (mais, il faut tester) OpenLayers 2.9 a corrigé ce comportement. Voici le patch à appliquer (pour tester) :

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
64
65
66
67
68
69
70
71
    /**
     * Method: drawText
     * This method is only called by the renderer itself.
     *
     * Parameters:
     * featureId - {String}
     * style -
     * location - {<OpenLayers.Geometry.Point>}
     */
    OpenLayers.Renderer.VML.prototype.drawText= function(featureId, style, location) {
        var label = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX, "olv:rect");
        var textbox = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX + "_textbox", "olv:textbox");

        var resolution = this.getResolution();
        label.style.left = ((location.x/resolution - this.offset.x) | 0) + "px";
        label.style.top = ((location.y/resolution - this.offset.y) | 0) + "px";
        label.style.flip = "y";

        textbox.innerText = style.label;

        if (style.labelBackgroundColor) {
            textbox.style.backgroundColor = style.labelBackgroundColor;
        }
        if (style.labelBorderColor || style.labelBorderSize) {
            textbox.style.border = "solid " +
                (style.labelBorderSize ? style.labelBorderSize : "1px") + " " +
                (style.labelBorderColor ? style.labelBorderColor : "#000000");
        }

        if (style.fontColor) {
            textbox.style.color = style.fontColor;
        }
        if (style.fontOpacity) {
            textbox.style.filter = 'alpha(opacity=' + (style.fontOpacity * 100) + ')';
        }
        if (style.fontFamily) {
            textbox.style.fontFamily = style.fontFamily;
        }
        if (style.fontSize) {
            textbox.style.fontSize = style.fontSize;
        }
        if (style.fontWeight) {
            textbox.style.fontWeight = style.fontWeight;
        }
        if(style.labelSelect === true) {
            label._featureId = featureId;
            textbox._featureId = featureId;
            textbox._geometry = location;
            textbox._geometryClass = location.CLASS_NAME;
        }
        textbox.style.whiteSpace = "nowrap";
        // fun with IE: IE7 in standards compliant mode does not display any
        // text with a left inset of 0. So we set this to 1px and subtract one
        // pixel later when we set label.style.left
        textbox.inset = "1px,0px,0px,0px";

        if(!label.parentNode) {
            label.appendChild(textbox);
            this.textRoot.appendChild(label);
        }

        var align = style.labelAlign || "cm";
        var xshift = textbox.clientWidth *
            (OpenLayers.Renderer.VML.LABEL_SHIFT[align[0] || "c"]);
        var yshift = textbox.clientHeight *
            (OpenLayers.Renderer.VML.LABEL_SHIFT[align[1] || "m"]);
        label.style.left = parseInt(label.style.left)-xshift-1+"px";
        label.style.top = parseInt(label.style.top)+yshift+"px";

    };

**jeanluc35** · 28/01/2011, 14h22

Bonjour,

Je viens de passer à l'API 1.2-e sans aucune modification de code. Si le problème initial n'apparait plus sous IE7, un autre se produit sous IE7 et IE8: l'affichage du label n'est pas correct, dans cet exemple au survol du curseur de la souris le label devrait être bleu sur fond jaune, mais il n'y a que le nom qui s'affichage et pas le fond.
Il n'y a pas de problème ni avec GoogleChrome ni avec FireFox.

Merci pour votre expertise.

Jean-Luc.

**dgrichard** · 30/01/2011, 18h58

Apparamment l'ajout du halo autour des labels (http://trac.openlayers.org/ticket/2965) a cassé le fond derrière les labels

Peux-tu essayer le patch suivant (qui autorise l'une ou l'autre des décorations) ?

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
    /**
     * Method: drawText
     * This method is only called by the renderer itself.
     *
     * Parameters:
     * featureId - {String}
     * style -
     * location - {<OpenLayers.Geometry.Point>}
     */
    OpenLayers.Renderer.VML.prototype.drawText= function(featureId, style, location) {

        // If the user wants a halo, first draw the text with a
        // thick stroke (using the halo color) and then draw the
        // text normally over that
        // Idea from:
        // http://www.mail-archive.com/svg-developers@yahoogroups.com/msg01002.html
        if (style.labelHaloColor) {
            var haloStyle = OpenLayers.Util.extend({}, style);
            haloStyle.fontStrokeColor = haloStyle.labelHaloColor;
            haloStyle.fontStrokeWidth = haloStyle.labelHaloWidth || 2;
            delete haloStyle.labelHaloColor;
            if (haloStyle.labelBackgroundColor) {
                delete haloStyle.labelBackgroundColor;
            }
            if (haloStyle.labelBorderColor) {
                delete haloStyle.labelBorderColor;
            }
            if (haloStyle.labelBorderSize) {
                delete haloStyle.labelBorderSize;
            }
            this.drawText2(featureId, haloStyle, location, true);
            delete style.labelHaloColor;
            if (style.labelHaloWidth) {
                delete style.labelHaloWidth;
            }
            this.drawText2(featureId, style, location, false);
            return;
        }

        var label = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX, "olv:rect");
        var textbox = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX + "_textbox", "olv:textbox");

        var resolution = this.getResolution();
        label.style.left = ((location.x/resolution - this.offset.x) | 0) + "px";
        label.style.top = ((location.y/resolution - this.offset.y) | 0) + "px";
        label.style.flip = "y";

        textbox.innerText = style.label;

        if (style.labelBackgroundColor) {
            textbox.style.backgroundColor = style.labelBackgroundColor;
        }
        if (style.labelBorderColor || style.labelBorderSize) {
            textbox.style.border = "solid " +
                (style.labelBorderSize ? style.labelBorderSize : "1px") + " " +
                (style.labelBorderColor ? style.labelBorderColor : "#000000");
        }

        if (style.fontColor) {
            textbox.style.color = style.fontColor;
        }
        if (style.fontOpacity) {
            textbox.style.filter = 'alpha(opacity=' + (style.fontOpacity * 100) + ')';
        }
        if (style.fontFamily) {
            textbox.style.fontFamily = style.fontFamily;
        }
        if (style.fontSize) {
            textbox.style.fontSize = style.fontSize;
        }
        if (style.fontWeight) {
            textbox.style.fontWeight = style.fontWeight;
        }
        if (style.labelSelect === true) {
            label._featureId = featureId;
            textbox._featureId = featureId;
            textbox._geometry = location;
            textbox._geometryClass = location.CLASS_NAME;
        }
        textbox.style.whiteSpace = "nowrap";
        // fun with IE: IE7 in standards compliant mode does not display any
        // text with a left inset of 0. So we set this to 1px and subtract one
        // pixel later when we set label.style.left
        textbox.inset = "1px,0px,0px,0px";

        if(!label.parentNode) {
            label.appendChild(textbox);
            this.textRoot.appendChild(label);
        }

        var align = style.labelAlign || "cm";
        if (align.length == 1) {
            align += "m";
        }
        var xshift = textbox.clientWidth *
            (OpenLayers.Renderer.VML.LABEL_SHIFT[align.substr(0,1)]);
        var yshift = textbox.clientHeight *
            (OpenLayers.Renderer.VML.LABEL_SHIFT[align.substr(1,1)]);
        label.style.left = parseInt(label.style.left)-xshift-1+"px";
        label.style.top = parseInt(label.style.top)+yshift+"px";

    };

    /**
     * Method: drawText2
     * This method is only called by the renderer itself.
     * See also http://trac.openlayers.org/ticket/2965 (label halo)
     *
     * Parameters:
     * featureId - {String}
     * style -
     * location - {<OpenLayers.Geometry.Point>}
     * useHalo - {Boolean}
     */
    OpenLayers.Renderer.VML.prototype.drawText2= function(featureId, style, location, useHalo) {
        var label = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX +
                (useHalo ? this.HALO_ID_SUFFIX : ""), "olv:shape");

        // Add it to the DOM hierarchy
        if(!label.parentNode) {
            this.textRoot.appendChild(label);
        }

        // Set its dimension and position attributes
        var resolution = this.getResolution();
        label.style.left = ((location.x/resolution - this.offset.x) | 0) + "px";
        label.style.top = ((location.y/resolution - this.offset.y) | 0) + "px";
        label.style.flip = "y";
        label.style.position = "absolute";
        label.style.width = 1 + "px"; // some dummy value
        label.style.height = 1 + "px"; // some dummy value
        label.style.antialias = "true";

        /*
        // TODO: use built-in setStyle method for building style
        var nodeStyle = { fillColor: style.fontColor,
            fillOpacity: style.fontOpacity,
            strokeColor: style.fontStrokeColor,
            strokeWidth: style.fontHaloSize || 2,
            strokeOpacity: style.fontOpacity

        }
        var nodeOptions = {
            isFilled:  style.fontColor,
            isStroked: style.fontStrokeColor
        }

        this.setStyle(label, nodeStyle, nodeOptions, null);
        */
        // Create the fill object
        var myFill = document.createElement("olv:fill");
        myFill.on = "true";
        myFill.color = style.fontColor;

        // Add it to the DOM hierarchy
        label.appendChild(myFill);

        // Create the stroke object. We need to define the
        // stroke explicitly, otherwise we get a default
        // black outline
        var myStroke = document.createElement("olv:stroke");

        if (style.fontStrokeColor) {
            myStroke.on = "true";
            myStroke.color = style.fontStrokeColor;
        } else {
            myStroke.on = "false";
        }

        if (style.fontStrokeWidth) {
            myStroke.weight = style.fontStrokeWidth;
        }

        // Add it to the DOM hierarchy
        label.appendChild(myStroke);

        // Create the path object
        var myPath = document.createElement("olv:path");
        myPath.textpathok = "True";
        myPath.v = "m 0,0 l 200,0";

        // Add it to the DOM hierarchy
        label.appendChild(myPath);

        // Create the textpath object
        var myTextPath = document.createElement("olv:textpath");
        myTextPath.on = "true";
        myTextPath.fitpath = "false";
        myTextPath.string = style.label;

        label.appendChild(myTextPath);

        if (style.fontColor) {
            myTextPath.style.color = style.fontColor;
        }
        if (style.fontOpacity) {
            myFill.opacity = style.fontOpacity;
            myStroke.opacity = style.fontOpacity;
        }

        // Setting the font family does not seem to work
        // TODO: make this work!
        if (style.fontFamily) {
            myTextPath.style.fontFamily = style.fontFamily;
        }
        if (style.fontSize) {
            myTextPath.style.fontSize = style.fontSize;
        }
        if (style.fontWeight) {
            myTextPath.style.fontWeight = style.fontWeight;
        }

        var align = style.labelAlign || "cm";
        if (align.length == 1) {
            align += "m";
        }

        // Set the horizontal align
        var hAlign;
        switch (align.substr(0,1)) {
            case 'l': hAlign = "left"; break;
            case 'c': hAlign = "center"; break;
            case 'r': hAlign = "right"; break;
        }
        myTextPath.style['v-text-align'] = hAlign;

        if (style.labelSelect === true) {
            label._featureId = featureId;
            label._geometry = location;
            label._geometryClass = location.CLASS_NAME;
        }
        myTextPath.style.whiteSpace = "nowrap";
        // fun with IE: IE7 in standards compliant mode does not display any
        // text with a left inset of 0. So we set this to 1px and subtract one
        // pixel later when we set label.style.left
        myTextPath.inset = "1px,0px,0px,0px";

        var xshift = myTextPath.clientWidth *
            (OpenLayers.Renderer.VML.LABEL_SHIFT[align.substr(0,1)]);
        var yshift = myTextPath.clientHeight *
            (OpenLayers.Renderer.VML.LABEL_SHIFT[align.substr(1,1)]);
        label.style.left = parseInt(label.style.left)-xshift-1+"px";
        label.style.top = parseInt(label.style.top)+yshift+"px";

    };

**jeanluc35** · 30/01/2011, 20h29

J'ai mis tel quel ton patch dans mon code, avec IE7 j'ai l'erreur :

Message*: 'OpenLayers' est indéfini.

Il faut sans doute adapter ton patch, mais comment ?

Merci.

Jean-Luc.

**dgrichard** · 30/01/2011, 20h48

Envoyé par jeanluc35

Il faut sans doute adapter ton patch, mais comment ?

Code :

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

1
2
3
4
5
function initGeoportalMap() {
  // copier le patch
  ...
}

**jeanluc35** · 31/01/2011, 10h58

J'ai fait comme tu dis, la page se charge (à voir ici), mais dès que le curseur est sur un icone il se produit l'erreur (avec IE7)):

"undefined" is null or not an object

avec indication de la linge 69 qui correspond à :

switch (align.substr(0,1)) {

Cela concerne donc la variable align qui est déclarée plus loin dans le code.

Qu'en penses-tu ?

Jean-Luc.

**dgrichard** · 31/01/2011, 12h30

Envoyé par jeanluc35

Qu'en penses-tu ?

Je penses que tu utilises le premier patch (pas celui de 21h et des brouettes)

**dgrichard** · 03/02/2011, 16h39

Envoyé par dgrichard

Je penses que tu utilises le premier patch (pas celui de 21h et des brouettes)

Depuis lundi dernier, le patch ne devrait plus être utile

**jeanluc35** · 03/02/2011, 21h45

Envoyé par dgrichard

Depuis lundi dernier, le patch ne devrait plus être utile

Ah bon

! je vais retester sans car avec c'est OK pour IE8, mais avec IE7 je retrouve le problème initial.

**jeanluc35** · 03/02/2011, 22h04

Je viens de tester sans le patch, il y a le même comportement qu'avec : plus de problème avec IE8, avec IE7 je retrouve le problème initial

! moi qui voulais mettre ce post en résolu

!
Je suggère de

IE7.

**dgrichard** · 05/02/2011, 11h51

Envoyé par jeanluc35

Je viens de tester sans le patch, il y a le même comportement qu'avec : plus de problème avec IE8, avec IE7 je retrouve le problème initial

!

Je confirme ... je retourne chercher le problème pour IE7

**dgrichard** · 13/02/2011, 15h14

Envoyé par dgrichard

Je confirme ... je retourne chercher le problème pour IE7

J'ai fini pas trouver quelque chose: «IE7 ne supporte pas labelBorderColor ou labelBorderSize»

Il suffit de reprendre le patch précédent et de modifier :

Code :

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

1
2
3
4
5
6
        if (style.labelBorderColor || style.labelBorderSize) {
            textbox.style.border = "solid " +
                (style.labelBorderSize ? style.labelBorderSize : "1px") + " " +
                (style.labelBorderColor ? style.labelBorderColor : "#000000");
        }

et de remplacer par :

Code :

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

1
2
3
4
5
6
7
8
9
10
        // labelBorder breaks IE7:
        if (parseFloat((navigator.appVersion.match(/MSIE (\d+\.\d+);/i))[1])>=8) {
            if (style.labelBorderColor || style.labelBorderSize) {
                textbox.style.border =
                    (style.labelBorderSize || "1px") +
                    " solid " +
                    (style.labelBorderColor || "#000000");
            }
        }

**jeanluc35** · 14/02/2011, 21h40

Envoyé par dgrichard

J'ai fini pas trouver quelque chose: «IE7 ne supporte pas labelBorderColor ou labelBorderSize»

Effectivement l'application du patch au patch corrige le problème

. Voir
Merci beaucoup.

Ce patch sera-t-il généralisé ?

**dgrichard** · 15/02/2011, 17h53

Envoyé par jeanluc35

Ce patch sera-t-il généralisé ?

Oui, il fait partie des corrections de la prochaine mise-à-jour (et ... j'ai pas encore de date

)

Sinon, tu as noté qu'il n'y avait pas de bordure sous IE7 (alors qu'elles y sont sous IE8, et les autres butineurs

)

**jeanluc35** · 19/02/2011, 17h07

Envoyé par dgrichard

Oui, il fait partie des corrections de la prochaine mise-à-jour (et ... j'ai pas encore de date

)

C'est bien, tant pis pour la date, le principal c'est qu'il y ait une solution !

Je mets en résolu.

Envoyé par dgrichard

Sinon, tu as noté qu'il n'y avait pas de bordure sous IE7 (alors qu'elles y sont sous IE8, et les autres butineurs

)

Oui j'avais noté, mais bon ce n'est que IE7 ...

Pas d'affichage des labels avec IE7

IGN API Géoportail

Discussions similaires

Partager

Partager