Modification de l'échelle

**Zebulon777** · 27/06/2014, 13h12

Super, et merci.

Pour le centrage, j'en suis là :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
	iv.addComponent('Geoportal.Control.GraphicScale'); // ajout du composant
	viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].barAreaWidth = 100; // largeur du composant
	viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].redraw();
	var scale = document.getElementsByClassName('gpControlGraphicScale')[1]; // récupération de l'élément HTML du composant
	document.getElementsByClassName('gpToolBoxContent')[0].appendChild(scale); // positionnement de l'élément HTML

	WL1 = parseInt(document.getElementsByClassName("gpToolBoxContent")[0].style.width);
	WL2 = viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].barAreaWidth;
        WP = (WL1 - WL2) / 2;
	scale.style.position = "relative"; // positionnement relatif par rapport aux autres éléments de la barre d'outils
	scale.style.marginTop = "-5px";
	scale.style.marginLeft = (WP - 5) + "px"; // On décale l'échelle vers la gauche

Ca fonctionne, mais lorsqu'on zoom, l'échelle devient plus petite que la résolution définit au départ, ce que je comprends bien, puisque c'est la résolution MAX.

Mais est-ce qu'il y a un moyen de la bloquer ?

**jrenard** · 30/06/2014, 10h07

Bonjour,

Ton idée est bonne, mais mal formalisée. Et elle m'a inspiré pour te proposer la solution suivante.

Faire la différence entre les largeurs des deux éléments imbriqués, puis la diviser par deux pour ajouter une marge à gauche, c'est une très bonne idée, mais il y a ici erreur sur la façon de calculer l'une des deux largeurs : tu récupères le barAreaWidth du contrôle, qui par définition est fixe et désigne la largeur maximale de ta barre d'échelle, et pas forcément la largeur courante de la barre d'échelle en cours d'affichage. Pour récupérer la largeur telle que tu la vois affichée, il faut cibler l'élément HTML gpControlGraphicScale et récupérer sa largeur. Cela donne la fonction de centrage suivante :

Code :

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

1
2
3
4
function centerScale() {
	var scale = document.getElementsByClassName('gpControlGraphicScale')[1];
	scale.style.marginLeft = parseInt((document.getElementsByClassName('gpToolBoxContent')[0].clientWidth - scale.clientWidth) / 2).toString()+"px";
}

Si tu fais appel à cette fonction juste après la création de ton contrôle, il sera automatiquement centré via la mise en place de la marge à gauche (éventuellement à ajuster de quelques pixels en fonction des padding de l'élément englobant).

Et pour terminer, si l'on veut que l'échelle continue à être centrée à chaque fois qu'elle va changer, il va falloir intercepter l'évènement "zoomend" de la carte, car c'est à chaque fin de zoom que l'échelle sera mise à jour, et y attribuer le lancement de la fonction centerScale. Ceci se fait en plaçant le code suivant dans ta fonction initMap() :

Code :

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

viewer.getMap().events.register('zoomend', viewer.getMap(), centerScale);

Je pense qu'on approche du résultat désiré

**Zebulon777** · 30/06/2014, 14h32

Presque

L'échelle reste obstinément tout en haut du cartouche et ce malgré l'ajout du positionnement.
J'ai essayé en position relative ou non et ça ne change rien.

Code :

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

1
2
3
4
5
6
7
8
// Centrage de l'échelle.
function centerScale() {
	var scale = document.getElementsByClassName('gpControlGraphicScale')[1];
	scale.style.position = "relative"; // positionnement relatif par rapport aux autres éléments de la barre d'outils
	scale.style.marginLeft = parseInt((document.getElementsByClassName('gpToolBoxContent')[0].clientWidth - scale.clientWidth) / 2).toString()+"px";
	scale.style.marginTop = "-5px";
}

**jrenard** · 30/06/2014, 15h12

J'ai du mal à comprendre, avec exactement le même code mon échelle vient se positionner juste sous la barre de zoom.
Tu peux mettre une impression d'écran du résultat que tu obtiens ?

**Zebulon777** · 01/07/2014, 10h08

Voila ce que ça donne :

Nom : Ech01.png
Affichages : 222
Taille : 14,4 Ko

**jrenard** · 01/07/2014, 15h37

Est-ce que modifier la propriété marginTop en lui affectant une valeur positive assez grande (205px par exemple) fait descendre l'échelle pour la mettre à la place désirée ?

**Zebulon777** · 02/07/2014, 08h14

Nan, ça change rien, j'ai aussi essayé de repasser en "absolute" et ça ne change rien.

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
// Afficher l'échelle
	iv.addComponent('Geoportal.Control.GraphicScale'); // ajout du composant
	viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].barAreaWidth = 120; // largeur du composant
	viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].redraw(); // On redessine l'échelle
	var scale = document.getElementsByClassName('gpControlGraphicScale')[1]; // récupération de l'élément HTML du composant
	document.getElementsByClassName('gpToolBoxContent')[0].appendChild(scale); // positionnement de l'élément HTML
	centerScale; // Centrage de l'échelle dans le cartouche.
...
...
...
// Centrage de l'échelle.
function centerScale() {
	var scale = document.getElementsByClassName('gpControlGraphicScale')[1];
	scale.style.position = "relative"; // positionnement relatif par rapport aux autres éléments de la barre d'outils
	scale.style.marginLeft = parseInt((document.getElementsByClassName('gpToolBoxContent')[0].clientWidth - scale.clientWidth) / 2).toString()+"px";
	scale.style.marginTop = "205px";
}

Dans le doute, j'ai aussi désactivé le code qui ferme le cartouche "Outils" mais ça ne change rien.

**jrenard** · 02/07/2014, 09h49

Vu que je ne reproduis pas le comportement avec exactement le même code, le problème vient peut-être de la façon dont est mis en forme le reste du cartouche. Pourrais-tu me faire suivre l'ensemble du code Javascript de mise en forme de ton cartouche outils ?

**Zebulon777** · 02/07/2014, 11h09

Voila :

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
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
function PersonalisationCartouches (viewer, map, iv, P_Pltf) {
//### PERSONNALISATION #########################################################################################################	
// Coordonnées des outils
XMn = "3px";
YMn = "0px";
XZi = "30px";
YZi = "0px";
XZo = "55px";
YZo = "0px";
XCt = "7px";
YCt = "27px";
XPe = "32px";
YPe = "27px";
XMv = "57px";
YMv = "27px";
XGr = "81px";
YGr = "27px";
XImp = "104px";
YImp = "27px";
XRech = "104px";
YRech = "5px";
XP4 = "80px";
YP4 = "calc(100% - 57px)";

viewer.getMap().events.register('zoomend', viewer.getMap(), centerScale);

// ### TRAITEMENT DE LA COUCHE DES PRINCIPALES VILLES ###########################################################################
	var Style_villes = new OpenLayers.StyleMap(
		{
			"default": new OpenLayers.Style(
				{
				pointRadius:0,
				fillText:'black',
				label:'${label}', 
		//      labelBackgroundColor:'black', 
				fontFamily:'Comic Sans MS',
				fontSize:'12',
				fontWeight:'bold',
				fontColor:'white',
				labelOutlineColor: "#000000", // Police blanche avec contour noir
                labelOutlineWidth: 3 // Police blanche avec contour noir
				}, 
				{
					context: {
						label: function(feature) 
						{
							return feature.attributes.NOM_COMM;
						}
					}
				}
			)
		}
	);
	var layer_villes = new OpenLayers.Layer.Vector(
		"Principales villes", 
		{
			styleMap:Style_villes, 
			projection: map.displayProjection,
			strategies: [new OpenLayers.Strategy.Fixed()],
			protocol: new OpenLayers.Protocol.HTTP(
				{
					url: "./KML/centroide_capitale_prefecture.geojson",
					format: new OpenLayers.Format.GeoJSON()
				}
			)
		}
	);
	map.addLayer(layer_villes);
//	iv.setLayerVisibility('Principales villes', true); // PAS INDISPENSABLE.
// ### FIN TRAITEMENT DE LA COUCHE DES PRINCIPALES VILLES

// ### MODIFICATION DU CARTOUCHES 'COUCHES'	###########################################################################
	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";

	C3 = document.getElementsByClassName("gpToolBoxContent")[0]; // Titre 
	C3.style.backgroundColor = "#C3B59B";
	C3 = document.getElementsByClassName("gpControlLabelClass ")[0];
	C3.style.backgroundColor = "#A49070";
	
// On ferme systématiquement le cartouche COUCHES
	document.getElementsByClassName("gpGroupDivClass")[0].style.display = 'none'; // ferme le cartouche couches
	
///* FIN COULEURS DES CARTOUCHES */
//
// La suite de la configuration du cartouches des couches est dans la feuille de style : FeuilleStyleEntract.css
// On efface les couches redondandes pour chaque aéroport.
	if (P_Pltf == "BALEMULHOUSE")
	{
		var WLayer = iv.getLayer("Arr. Nord").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Dep. Nord").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Arr. Sud").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Dep. Sud").displayInLayerSwitcher = false;
	};
	if (P_Pltf == "BEAUVAIS")
	{
		var WLayer = iv.getLayer("Arr. Nord-Ouest").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Dep. Nord-Ouest").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Arr. Sud-Est").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Dep. Sud-Est").displayInLayerSwitcher = false;
	};
	if (P_Pltf == "BORDEAUX")
	{
		var WLayer = iv.getLayer("Arr. Ouest").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Dep. Ouest").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Arr. Est").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Dep. Est").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Arr. Sud-Ouest").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Dep. Sud-Ouest").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Arr. Nord-Est").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Dep. Nord-Est").displayInLayerSwitcher = false;
	};
	if (P_Pltf == "LYON")
	{
		var WLayer = iv.getLayer("Arr. Nord").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Dep. Nord").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Arr. Sud").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Dep. Sud").displayInLayerSwitcher = false;
	};
	if (P_Pltf == "MARSEILLE")
	{
		var WLayer = iv.getLayer("Arr. Nord-Ouest").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Dep. Nord-Ouest").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Arr. Sud-Est").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Dep. Sud-Est").displayInLayerSwitcher = false;
	};
	if (P_Pltf == "NANTES")
	{
		var WLayer = iv.getLayer("Arr. Nord-Est").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Dep. Nord-Est").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Arr. Sud-Ouest").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Dep. Sud-Ouest").displayInLayerSwitcher = false;
	};
	if (P_Pltf == "NICE")
	{
		var WLayer = iv.getLayer("Arr. Nord-Est/ILS").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Dep. Nord-Est/ILS").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Arr. Nord-Est/VorA").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Dep. Nord-Est/VorA").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Arr. Sud-Ouest/VorB").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Dep. Sud-Ouest/VorB").displayInLayerSwitcher = false;
	};
	if (P_Pltf == "LBG" || P_Pltf == "CDG" || P_Pltf == "ORY" )
	{
		var WLayer = iv.getLayer("ORY Arr. Ouest").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("ORY Dep. Ouest").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("ORY Arr. Est").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("ORY Dep. Est").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("CDG Arr. Ouest").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("CDG Dep. Ouest").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("CDG Arr. Est").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("CDG Dep. Est").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("LBG Arr. Ouest").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("LBG Dep. Ouest").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("LBG Arr. Est").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("LBG Dep. Est").displayInLayerSwitcher = false;
	};
	if (P_Pltf == "STRASBOURG")
	{
		var WLayer = iv.getLayer("Arr. Nord-Est").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Dep. Nord-Est").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Arr. Sud-Ouest").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Dep. Sud-Ouest").displayInLayerSwitcher = false;
	};
	if (P_Pltf == "TOULOUSE")
	{
		var WLayer = iv.getLayer("Arr. Nord").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Dep. Nord").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Arr. Sud").displayInLayerSwitcher = false;
		var WLayer = iv.getLayer("Dep. Sud").displayInLayerSwitcher = false;
	};

// ### FIN MODIFICATION DU CARTOUCHES 'COUCHES'	

// ### MODIFICATION DU CARTOUCHE 'OUTILS' ###########################################################################
	WLatLong = map.getCenter();	// Mémorisation du point de centrage de la carte à l'ouverture
	WZoom = map.getZoom();	//  Mémorisation du niveau de zoom
	
	var WCartoucheOutils = document.getElementsByClassName("gpToolBoxClass")[0];
	WCartoucheOutils.style.width = "130px";
//	WCartoucheOutils.style.height = "275px";

	var outils = document.getElementsByClassName("gpToolBoxContent")[0];
	outils.style.width = "128px";
	outils.style.height = "220px";
	var outils2 = document.getElementsByClassName("gpControlNavToolbar")[0];
	outils2.style.height = "50px";
	outils2.style.paddingLeft = XMn; //"3px";
	outils2.style.paddingTop = YMn; //"0px";

// Ajout de 4 flèches permettant de se déplacer dans la carte. ###########################################################################
// Ajout d'un contrôle OpenLayers de déplacement par flèches avec positionnement absolu dans le cartouche d'outils
// => Calcul automatique de la position du module 4 flèches.
	viewer.getMap().addControl(new Geoportal.Control.PanPanel());
	document.getElementsByClassName('gpControlPanPanel')[0].style.top = XP4;//'80px';
	document.getElementsByClassName('gpControlPanPanel')[0].style.left = YP4;//'calc(100% - 49px)';
//
// Afficher l'échelle
	iv.addComponent('Geoportal.Control.GraphicScale'); // ajout du composant
	viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].barAreaWidth = 120; // largeur du composant
	viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].redraw(); // On redessine l'échelle
	var scale = document.getElementsByClassName('gpControlGraphicScale')[1]; // récupération de l'élément HTML du composant
	document.getElementsByClassName('gpToolBoxContent')[0].appendChild(scale); // positionnement de l'élément HTML
	centerScale; // Centrage de l'échelle dans le cartouche.
	
//////	WL1 = parseInt(document.getElementsByClassName("gpToolBoxContent")[0].style.width);
//////	WL2 = viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].barAreaWidth;
//////	WP = (WL1 - WL2) / 2;
//////	if (P_Pltf == "ACCUEIL")
//////	{
//////		WP = -5;
//////	};
//////	scale.style.position = "relative"; // positionnement relatif par rapport aux autres éléments de la barre d'outils
//////	scale.style.marginTop = "-5px";
//////	scale.style.marginLeft = (WP) + "px"; // On décale l'échelle vers la gauche
//////	viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].redraw(); // On redessine l'échelle

	// Suppression de l'échelle du catouche du bas (Pas la peine d'afficher 2 echelles)
	iv.removeComponent(viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[0].id);

//Controle d'affichage / effacement
	document.getElementsByClassName("gpControlLabelClass")[0].onclick = afficheOutilsSup; // ligne existante
	document.getElementsByClassName("gpControlLabelClass")[0].ondblclick = afficheOutilsSup; //ligne ajoutée
//
	var zoomBar = document.getElementsByClassName("gpZoomBarClass")[0];
//	zoomBar.style.paddingLeft = "24px"; // 120-72=48 -> 48/2=24 (72=largeur par défaut)
//	zoomBar.style.paddingTop = "10px";

// Ajoute le bouton Zoom OUT ###########################################################################
	var button = new OpenLayers.Control.ZoomOut({
		displayClass: "olControlZoomOut",
		title: "S'éloigner",
	});

	var tbx= viewer.getMap().getControlsByClass('Geoportal.Control.NavToolbar')[0];
	tbx.addControls(button);

// Inversion des boutons ZoomIn et ZoomOut
	var picto1 = document.getElementsByClassName("olControlZoomBoxItemInactive")[0];
	picto1.style.position = "absolute";
	picto1.style.left = XZi; //"30px";
	picto1.style.top = YZi; //"0px";
	
	var picto2 = document.getElementsByClassName("olControlZoomOutItemInactive")[0];
	picto2.style.position = "absolute";
	picto2.style.left = XZo; //"55px";
	picto2.style.top = YZo; //"0px";

//Ajout d'un bouton permettant de recentrer la carte sur l'aéoport en cours de vuisualisation ###################################################
	WIconeCentrage = "./Images/Centrage02.png";
	var B_Centre = new OpenLayers.Control.Button({
		displayClass: "olControlZoomOnDefaut",
		title: "Centrage de la carte sur l'aéroport en cours de visualisation et réinitialisation du zoom",	
		trigger: function() {
			map.setLonLatCenter(WLatLong.lon,WLatLong.lat,WZoom);
		}
	});
	var tbx = viewer.getMap().getControlsByClass('Geoportal.Control.NavToolbar')[0];
	tbx.addControls(B_Centre);
// Application d'un style au bouton
	var B_CentreHTML = document.getElementsByClassName("olControlZoomOnDefautItemInactive")[0];
	B_CentreHTML.style.background = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
	B_CentreHTML.style.border = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
	B_CentreHTML.style.backgroundImage = 'url("'+WIconeCentrage+'")';
	B_CentreHTML.style.width = "16px";
	B_CentreHTML.style.height = "16px";
	B_CentreHTML.style.position = "absolute";
	B_CentreHTML.style.left = XCt;//"7px";
	B_CentreHTML.style.top = YCt;//"27px";
	B_CentreHTML.style.cursor = "Pointer";

// Ajout d'un bouton affichant un quadrillage cartographique ###########################################################################
	WIconeGrille = "./Images/Grille.png";
// On ajoute le contrôle à la carte
	viewer.getMap().addControl(new Geoportal.Control.Graticule());
// On le masque par défaut
	var gratLayer = iv.getLayer("Graticule");
	gratLayer.displayInLayerSwitcher = false; // couche non affichée dans le gestionnaire de couches
	gratLayer.setVisibility(false); // graticule non visible sur la carte par défaut
//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() {
			if (gratLayer.visibility) {
				gratLayer.setVisibility(false); // si le graticule est visible, on le rend invisible
			} else {
				gratLayer.setVisibility(true); // si le graticule est invisible, on le rend visible
			}
		}
	});
// 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 = XGr;//"81px";
	B_GrilleHTML.style.top = YGr;//"27px";
	B_GrilleHTML.style.cursor = "Pointer";

//
// Ajout d'un bouton permettant d'afficher ou pas la mini-vue. ###########################################################################
// Création du controle de mini-vue
	var worldMap = getGeoportalLayer('FXX','GEOGRAPHICALGRIDSYSTEMS.MAPS',true);
	var tbx = viewer.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];
	var ovmap = new Geoportal.Control.OverviewMap({
		div:OpenLayers.Util.getElement(tbx.id+'_ovmap'),
		size: new OpenLayers.Size(128,130),
		layers:[worldMap],
		mapOptions:{
			resolutions:worldMap.options.nativeResolutions.slice(0,10),
			numZoomLevels:5,
			minZoomLevel:worldMap.options.minZoomLevel,
			maxZoomLevel:worldMap.options.maxZoomLevel,
			projection:worldMap.options.projection.clone(),
			maxExtent:worldMap.options.maxExtent,
			theme:null // prevent OL to insert style.css !
		}
	});

// Ajout du contrôle à la carte
	viewer.getMap().addControl(ovmap);
// Par défaut la mini-vue n'est pas visible
	document.getElementsByClassName('gpControlOverviewMapElement')[0].style.display = 'none';

// Définition du bouton d'affichage de la mini-vue
	WIconeMiniVue = "./Images/Minivue.png";
	var B_MiniVue = new OpenLayers.Control.Button({
		displayClass: "gpControlOvmap",
		title: "Affiche la mini-vue",	
		trigger: function() { // Fonction gérant le clic bouton
			var ovMapElt = document.getElementsByClassName('gpControlOverviewMapElement')[0];
			if (ovMapElt.style.display != 'none') {
				ovMapElt.style.display = 'none';
			} else {
				ovMapElt.style.display = 'block';
			}
		}
	});

// Ajout du bouton aux outils
	var tbx3 = viewer.getMap().getControlsByClass('Geoportal.Control.NavToolbar')[0];
	tbx3.addControls(B_MiniVue);

// Application d'un style au bouton
	var B_MiniVueHTML = document.getElementsByClassName("gpControlOvmapItemInactive")[0];
	B_MiniVueHTML.style.background = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
	B_MiniVueHTML.style.border = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
	B_MiniVueHTML.style.backgroundImage = 'url("'+WIconeMiniVue+'")';
	B_MiniVueHTML.style.width = "16px";
	B_MiniVueHTML.style.height = "16px";
	B_MiniVueHTML.style.position = "absolute";
	B_MiniVueHTML.style.left = XMv;//"57px";
	B_MiniVueHTML.style.top = YMv;//"27px";
	B_MiniVueHTML.style.cursor = "Pointer";

// Bouton Plein écran ##########################################################################################################
	WIconePEcran = "./Images/PleinEcran.png";
	var B_PEcran = new OpenLayers.Control.Button({
		displayClass: "olControlPEcran",
		title: "Ouverture de la carte en plein écran",	
		type: OpenLayers.Control.TYPE_TOGGLE,
		eventListeners: {
				"activate": function() { 
					enlargeWindow(); 
				},
				"deactivate": function() { 
					enlargeWindowBack(); 
				}
		}
	});	
	var tbx4 = viewer.getMap().getControlsByClass('Geoportal.Control.NavToolbar')[0];
	tbx4.addControls(B_PEcran);
// Application d'un style au bouton
	var B_PEcranHTML = document.getElementsByClassName("olControlPEcranItemInactive")[0];
	B_PEcranHTML .style.background = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
	B_PEcranHTML .style.border = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
	B_PEcranHTML .style.backgroundImage = 'url("'+WIconePEcran+'")';
	B_PEcranHTML .style.width = "16px";
	B_PEcranHTML .style.height = "16px";
	B_PEcranHTML .style.position = "absolute";
	B_PEcranHTML .style.left = XPe;//"32px";
	B_PEcranHTML .style.top = YPe;//"27px";
	B_PEcranHTML .style.cursor = "Pointer";
	
	var bodyWidth;
	var bodyHeight;
	var bodyMargin;
	var bodyOverflow;
	var divCarteWidth;
	var divCarteHeight;
	var divCartePosition;
	var divCarteTop;
	var divCarteLeft;
	var mainMapWidth;
	var mainMapHeight;
	var divCarteBorder;
	var mainMapBorder;

// Bouton IMPRIMER ##########################################################################################################
//Ajout du contrôle d'impression
	var nv = viewer.getMap().getControlsByClass("Geoportal.Control.NavToolbar")[0];
	nv.addControls([new Geoportal.Control.PrintMapDOM()]);
//nv.addControls([new Geoportal.Control.PrintMap()]);
	WIconeImp = "./Images/Imprimer.png";
//var B_ImpHTML = document.getElementsByClassName("gpControlPrintMapItemInactive")[0];
	var B_ImpHTML = document.getElementsByClassName("gpControlPrintMapDOMItemInactive")[0];
	B_ImpHTML.style.background = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
	B_ImpHTML.style.border = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
	B_ImpHTML.style.backgroundImage = 'url("'+WIconeImp+'")';
	B_ImpHTML.style.width = "16px";
	B_ImpHTML.style.height = "16px";
	B_ImpHTML.style.position = "absolute";
	B_ImpHTML.style.left = XImp;//"104px";
	B_ImpHTML.style.top = YImp;//"27px";
	B_ImpHTML.style.cursor = "Pointer";

// Bouton RECHERCHE PAR NOM DE COMMUNES
	if (P_Pltf != "ACCUEIL") // ON DESACTIVE LA RECHERCHE SUR LA PAGE D'ACCUEIL
	{
		//WIconeRech = "./Images/Recherche2.png";
		//Panel = '_search';
		//viewer.getMap().addControl (new Geoportal.Control.Panel({div:OpenLayers.Util.getElement(Panel)}));
		//var B_Recherche = new OpenLayers.Control.Button({
		//	displayClass: "gpControlLocationUtilityServiceGeoNamesItemInactive",
		//	title: "Recherche de communes",	
		//	trigger: function() {
		//var gazetteer= new Geoportal.Control.LocationUtilityService.GeoNames(
		//	new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
		//		'PositionOfInterest:OPENLS;Geocode',
		//	{
		//		formatOptions: {
		//		}
		//	}
		//	),{
		//	uiOptions:{title: 'gpControlLocationUtilityService.geonames.title'},
		//	setZoom:Geoportal.Control.LocationUtilityService.GeoNames.setZoomForBDNyme
		//	}
		//);
		//nv.addControls([gazetteer]);
		//	}
		//});
		//var tbx5 = viewer.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];
		//tbx5.addControls(B_Recherche);
		
		var tbx5 = viewer.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];
		WCoRech = tbx5.id+'_search';
		var B_Recherche = new Geoportal.Control.Panel({
			div:OpenLayers.Util.getElement(WCoRech)
		});
		//var gazetteer= new Geoportal.Control.LocationUtilityService.Geocode(
		//	new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
		//		'StreetAddress:OPENLS;Geocode',
		//	{
		//		formatOptions: {
		//		}
		//	}
		//	),{
		//    	uiOptions:{title: 'gpControlLocationUtilityService.geocode.title'},
		//	setZoom: Geoportal.Control.LocationUtilityService.Geocode.setZoomForBDNyme
		//	}
		//);
		var gazetteer= new Geoportal.Control.LocationUtilityService.GeoNames(
			new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
				'PositionOfInterest:OPENLS;Geocode',
			{
				formatOptions: {
				}
			}
			),{
			uiOptions:{title: 'gpControlLocationUtilityService.geonames.title'},
			setZoom:Geoportal.Control.LocationUtilityService.GeoNames.setZoomForBDNyme
			}
		);
		nv.addControls([gazetteer]);
		
		// Application d'un style au bouton
		WIconeRech = "./Images/Recherche2.png";
		//var B_RechHTML = document.getElementsByClassName("gpControlLocationUtilityServiceGeocodeItemInactive")[0];
		var B_RechHTML = document.getElementsByClassName("gpControlLocationUtilityServiceGeoNamesItemInactive")[0];
		B_RechHTML.style.background = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
		B_RechHTML.style.border = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
		B_RechHTML.style.backgroundImage = 'url("'+WIconeRech+'")';
		B_RechHTML.style.width = "16px";
		B_RechHTML.style.height = "16px";
		B_RechHTML.style.position = "absolute";
		B_RechHTML.style.left = XRech;//"104px";
		B_RechHTML.style.top = YRech;//"5px";
		B_RechHTML.style.cursor = "Pointer";
	};
// ### FIN MODIFICATION DU CARTOUCHE 'OUTILS'
	if (P_Pltf == "ACCUEIL") // On force la femeture du cartouche OUTILS pour la page d'accueil uniquement.
	{
		document.getElementsByClassName("gpToolBoxContentContainer")[0].style.display = "none"; 
		afficheOutilsSup();
	};
}
////### FIN PERSONNALISATION #########################################################################################################	

function afficheOutilsSup() {
	var tools = document.getElementsByClassName("gpToolBoxContentContainer")[0]; 
	var panPanel = document.getElementsByClassName("gpControlPanPanel")[0]; 
	var Echelle =  document.getElementsByClassName("gpControlGraphicScale")[1]; 
	if (tools.style.display == "none")
	 {
		panPanel.style.display = "none";
		Echelle.style.display = "none";
	} else
	 {
		panPanel.style.display = "block";
		Echelle.style.display = "block";
	}
}

function getGeoportalLayer (territory, name, base) {
	var lyrPrms= viewer.getMap().catalogue.getLayerParameters(territory, name);
		lyrPrms.options.isBaseLayer= base;
		lyrPrms.options.opacity= 1.0;
		lyrPrms.options.afterAdd= function() 
		{
			var k= viewer.getMap().catalogue.getLayerGeoRMKey(
				this.territory,
				this.name);
		};

	var lyr= new lyrPrms.classLayer(
		lyrPrms.options.name,
		lyrPrms.url,
		lyrPrms.params,
		lyrPrms.options);
		return lyr;
}

/**
 * Fonction passant la fenêtre cartographique en plein écran
 */
function enlargeWindow() {
	// Récupération du centrage et du zoom de la carte
	mapCenterLon = viewer.getMap().getCenter();
	mapZoom = viewer.getMap().getControlsByClass('Geoportal.Control.ZoomSlider')[0].getLevel()
	// Enregistrement des valeurs courantes des proriétés CSS (pour permettre un retour en arrière)
	bodyWidth = document.body.clientWidth;
	bodyHeight = document.body.clientHeight;
	bodyMargin = window.getComputedStyle(document.body).margin;
	bodyOverflow = "auto";
	divCarteWidth = window.getComputedStyle(document.getElementById('DivCarte')).width;
	divCarteHeight = window.getComputedStyle(document.getElementById('DivCarte')).height;
	divCartePosition = window.getComputedStyle(document.getElementById('DivCarte')).position;
	divCarteTop = window.getComputedStyle(document.getElementById('DivCarte')).top;
	divCarteLeft = window.getComputedStyle(document.getElementById('DivCarte')).left;
	mainMapWidth = window.getComputedStyle(document.getElementsByClassName('gpMainMap')[0]).width;
	mainMapHeight = window.getComputedStyle(document.getElementsByClassName('gpMainMap')[0]).height;
	divCarteBorder = window.getComputedStyle(document.getElementById('DivCarte')).border;
	mainMapBorder = window.getComputedStyle(document.getElementsByClassName('gpMainMap')[0]).border;
	// Affectation des valeurs des propriétés CSS forçant un passage en plein écran
	document.body.style.width = "100%";
	document.body.style.height = "100%";
	document.body.style.margin = "0";
	document.body.style.overflow = "hidden";
	document.getElementById("DivCarte").style.width = "100%";
	document.getElementById("DivCarte").style.height = "100%";
	document.getElementById("DivCarte").style.position = "fixed";
	document.getElementById("DivCarte").style.top = "0px";
	document.getElementById("DivCarte").style.left = "0px";
	document.getElementsByClassName("gpMainMap")[0].style.width = "100%";
	document.getElementsByClassName("gpMainMap")[0].style.height = "100%";
	document.getElementById("DivCarte").style.border = "none";
	document.getElementsByClassName("gpMainMap")[0].style.border = "none";	// Recentrage de la carte
	viewer.getMap().setLonLatCenter(mapCenterLon.lon, mapCenterLon.lat, mapZoom+1, false, false);
}

/**
 * Fonction annulant la mise en plein écran de la carte
 */
function enlargeWindowBack() {
	// Récupération du centrage et du zoom de la carte
	mapCenterLon = viewer.getMap().getCenter();
	mapZoom = viewer.getMap().getControlsByClass('Geoportal.Control.ZoomSlider')[0].getLevel()
	// Retour aux valeurs par défaut des propriétés CSS
	document.body.style.width = bodyWidth;
	document.body.style.height = bodyHeight;
	document.body.style.margin = bodyMargin;
	document.body.style.overflow = bodyOverflow;
	document.getElementById("DivCarte").style.width = divCarteWidth;
	document.getElementById("DivCarte").style.height = divCarteHeight;
	document.getElementById("DivCarte").style.position = divCartePosition;
	document.getElementById("DivCarte").style.top = divCarteTop;
	document.getElementById("DivCarte").style.left = divCarteLeft;
	document.getElementsByClassName("gpMainMap")[0].style.width = mainMapWidth;
	document.getElementsByClassName("gpMainMap")[0].style.height = mainMapHeight;
	document.getElementById("DivCarte").style.border = divCarteBorder;
	document.getElementsByClassName("gpMainMap")[0].style.border = mainMapBorder;	// Recentrage de la carte
	viewer.getMap().setLonLatCenter(mapCenterLon.lon, mapCenterLon.lat, mapZoom-1, false, false);
}

// Centrage de l'échelle.
function centerScale() {
	var scale = document.getElementsByClassName('gpControlGraphicScale')[1];
	scale.style.position = "absolute"; // positionnement relatif par rapport aux autres éléments de la barre d'outils
	scale.style.marginLeft = parseInt((document.getElementsByClassName('gpToolBoxContent')[0].clientWidth - scale.clientWidth) / 2).toString()+"px";
	scale.style.marginTop = "205px";
}

**jrenard** · 02/07/2014, 11h32

OK, j'ai compris ce qu'il se passe. Tu as défini dans ton fichier Cartouche.js ta fonction centerScale, mais en fait celle-ci n'est jamais traversée par le code, même lorsque tu fais un appel à centerScale(); La raison est que cette fonction a déjà été définie dans ton autre fichier js, celui qui contient la fonction initMap(), ce qui était nécessaire pour faire la mise à jour lors du zoom (interception de l'évènement 'zoomend'). Et donc en fait, c'est toujours la fonction principale qui est traversée, jamais celle qui se trouve dans le Cartouche.js.

Pour corriger ça, il faut que la fonction suivante existe dans ton fichier js principale, mais qu'elle soit supprimée du Cartouche.js :

Code :

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

1
2
3
4
5
6
7
// Centrage de l'échelle.
function centerScale() {
	var scale = document.getElementsByClassName('gpControlGraphicScale')[1];
	scale.style.position = "relative"; // positionnement relatif par rapport aux autres éléments de la barre d'outils
	scale.style.marginLeft = parseInt((document.getElementsByClassName('gpToolBoxContent')[0].clientWidth - scale.clientWidth) / 2 - 5).toString()+"px";
	scale.style.marginTop = "-5px";
}

Sans oublier que l'appel à cette fonction doit se faire avec des parenthèses (dernière ligne dans la portion de code suivante) :

Code :

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

1
2
3
4
5
6
7
// Afficher l'échelle
iv.addComponent('Geoportal.Control.GraphicScale'); // ajout du composant
viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].barAreaWidth = 120; // largeur du composant
viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].redraw(); // On redessine l'échelle
var scale = document.getElementsByClassName('gpControlGraphicScale')[1]; // récupération de l'élément HTML du composant
document.getElementsByClassName('gpToolBoxContent')[0].appendChild(scale); // positionnement de l'élément HTML
centerScale(); // Centrage de l'échelle dans le cartouche.

**Zebulon777** · 02/07/2014, 13h03

Ha yes, c'est de mieux en mieux, mais il persiste encore des problèmes de décalage :

A l'ouverture de la fenêtre :
Nom : Ech02.png
Affichages : 221
Taille : 11,5 Ko

Nom : Ech02.png
Affichages : 221
Taille : 11,5 Ko

Si je zoome / dézoome plusieurs fois :

Nom : Ech04.png
Affichages : 231
Taille : 11,8 Ko

Nom : Ech03.png
Affichages : 227
Taille : 10,5 Ko

**jrenard** · 02/07/2014, 13h48

Encore une fois, je ne reproduis pas ces décalages de mon coté, et j'ai un centrage parfait à partir du même code. Difficile donc de diagnostiquer d'où vient l'anomalie.
Tu dois avoir des problèmes de marges, je t'invite à explorer les propriétés de tes éléments HTML via l'outil dédié dans Firebug, de manière à comprendre ce qu'il se passe au niveau de tes marges, et à adapter ta fonction de centrage en fonction.

**Zebulon777** · 02/07/2014, 15h01

Ha mince, si tu ne reproduis pas le problème, ça va être plus compliqué

Je te précise que le problème survient de manière plus ou moins aléatoire en zoomant et dézoomant rapidement et sur plusieurs niveaux à l'aide de la molette de la souris.
Comme ça non plus, tu ne reproduis pas le problème ?

**jrenard** · 03/07/2014, 15h13

Je crois que j'ai compris, il y a incompréhension dans les deux échelles graphiques : celle qui existe par défaut et que l'on supprime, et celle qui est manuellement ajoutée. Au début, la première est désignée par viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[0] et la deuxième par viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1]. Mais après suppression de la première, la deuxième devient naturellement viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[0], d'où confusion.

Pour éviter ça, plutôt que de supprimer l'échelle par défaut et d'en ajouter une autre, on va travailler directement sur l'échelle par défaut. C'est ce que je faisais de mon coté, ce qui m'empêchait de reproduire le comportement en anomalie que tu décrivais. Le code de mise en forme de l'échelle devient alors le suivant :

Code :

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

1
2
3
4
5
6
7
// Afficher l'échelle
viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[0].barAreaWidth = 120; // largeur du composant
viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[0].redraw(); // On redessine l'échelle
var scale = document.getElementsByClassName('gpControlGraphicScale')[0]; // récupération de l'élément HTML du composant
document.getElementsByClassName('gpToolBoxContent')[0].appendChild(scale); // positionnement de l'élément HTML
centerScale(); // Centrage de l'échelle dans le cartouche.

Quand à la fonction centerScale, elle va désormais en toute logique appeler le contrôle d'échelle de numéro 0 :

Code :

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

1
2
3
4
5
6
function centerScale() {
	var scale = document.getElementsByClassName('gpControlGraphicScale')[0];
	scale.style.position = "relative"; // positionnement relatif par rapport aux autres éléments de la barre d'outils
	scale.style.marginLeft = parseInt((document.getElementsByClassName('gpToolBoxContent')[0].clientWidth - scale.clientWidth) / 2 - 5).toString()+"px";
	scale.style.marginTop = "-5px";
}

Et avec ça, plus de confusion, et le centrage sera respecté.

**Zebulon777** · 07/07/2014, 10h32

Je n'ai plus le problème de centrage, mais j'ai toujours 2 échelles, mais la première est tout en haut à gauche, juste en dessous du mot "Couches" ?

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
//////// Afficher l'échelle
	iv.addComponent('Geoportal.Control.GraphicScale'); // ajout du composant
//////	viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].barAreaWidth = 120; // largeur du composant
//////	viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[1].redraw(); // On redessine l'échelle
//////	var scale = document.getElementsByClassName('gpControlGraphicScale')[1]; // récupération de l'élément HTML du composant
//////	document.getElementsByClassName('gpToolBoxContent')[0].appendChild(scale); // positionnement de l'élément HTML
//////	centerScale(); // Centrage de l'échelle dans le cartouche.
//////	// Suppression de l'échelle du catouche du bas (Pas la peine d'afficher 2 echelles)
//////	iv.removeComponent(viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[0].id);

	// Afficher l'échelle
	viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[0].barAreaWidth = 120; // largeur du composant
	viewer.getMap().getControlsByClass('Geoportal.Control.GraphicScale')[0].redraw(); // On redessine l'échelle
	var scale = document.getElementsByClassName('gpControlGraphicScale')[0]; // récupération de l'élément HTML du composant
	document.getElementsByClassName('gpToolBoxContent')[0].appendChild(scale); // positionnement de l'élément HTML
	centerScale(); // Centrage de l'échelle dans le cartouche.

Et si je remets la ligne "RemoveComponent", c'est l'échelle qui est dans le cartouche qui est supprimée.

**jrenard** · 07/07/2014, 10h44

Raison simple: cette échelle qui apparaît en haut à gauche est celle que tu as ajoutée via la ligne suivante (et pour laquelle aucune mise en forme et aucun positionnement n'est appliqué) :

Code :

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

iv.addComponent('Geoportal.Control.GraphicScale'); // ajout du composant

Cette ligne n'a plus de raison d'être, tu peux la supprimer, et ta deuxième échelle disparaîtra en même temps.

**Zebulon777** · 07/07/2014, 11h19

Bah, je veux bien, moi, mais c'est lui qui veux pas

Si je l'enlève, ça plante !

Oups, j'ai trouvé, il restait un petit "var Echelle = document.getElementsByClassName("gpControlGraphicScale")[1];" caché, le coquin.

Génial, tout fonctionne nickel.

Merci encore Jérémy.

Modification de l'échelle

IGN API Géoportail

Discussions similaires

Partager

Partager