Arborescence : rendre fonctionnel les popups pour le new OpenLayers.Layer.Vector

**Scarab Aware** · 30/04/2013, 15h50

Bonjour,

J'aurais souhaité savoir comment activer le popup pour des couches implémentées en l'arborescence avec des fichiers KML. Ainsi j'ai entre autre :

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
viewer.getMap().addLayer(
        new Geoportal.Layer.Aggregate(
            'Années de crues de la Meurthe',
            [
                new OpenLayers.Layer.Vector(
                    "Crue de 2006",
                   {
                        strategies: [new OpenLayers.Strategy.Fixed()] ,
						opacity :1,
						styleMap : new OpenLayers.StyleMap({'pointRadius': 0, fillColor: "green",
               fillOpacity: 0.5, strokeColor: "green", strokeOpacity : 0.5}),
			protocol : new OpenLayers.Protocol.HTTP({
			  url: "assets/meurthecrues/2006.kml",
			  format: new OpenLayers.Format.KML({
			    internalProjection: viewer.getMap().getProjection()
			  })
		       })
	             } ),

Et plus loin j'ai :

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
viewer.getMap().addControl(nhCntrl);
    var prCntrl= new Geoportal.Control.PrintMap();

    var queryableLayers=viewer.getMap().getLayersByClass("OpenLayers.Layer.WMS");
    for (var i=(queryableLayers.length-1);i>=0;i--){
        if (queryableLayers[i].queryable!=true){
            queryableLayers.splice(i);
        }
    }
    var wiCntrl= new OpenLayers.Control.WMSGetFeatureInfo({
        uiOptions:{title:'olControlWMSGetFeatureInfo.title'},
        queryVisible: true,
        layers: queryableLayers,
        maxFeatures: 10,
        infoFormat:'text/plain',
        eventListeners: {
            getfeatureinfo: function(evt) {
                //this===control
                var txt= '';
                if (typeof(evt.features)!='undefined') {
                    for (var i= 0, l= evt.features.length; i<l; i++) {
                        var T= Geoportal.Control.renderFeatureAttributes(evt.features[i]);
                        txt+= '<div class="gpPopupHead">' + T[0] + '</div>' +
                              '<div class="gpPopupBody">' + T[1] + '</div>';
                    }
                } else {
                    if (evt.text) {
                        var txt=
                            evt.object.infoFormat=='text/plain'?
                                '<div class="gpPopupBody">' +
                                    evt.text.replace(/[\r\n]/g,'<br/>').replace(/ /g,'&nbsp;') +
                                '</div>'
                            :   evt.text;
                    }
                }
                if (txt) {
                    this.map.addPopup(new OpenLayers.Popup.FramedCloud(
                        "chicken",
                        this.map.getLonLatFromPixel(evt.xy),
                        null,
                        Geoportal.Util.cleanContent(txt),
                        null,
                        true));
                }
            }
        }
    });

Que dois je changer pour avoir l'info bulle avec toute couche placée dans l'arborescence. Je précise qu'en dehors de l'Aggregate j'ai bien l'info bulle qui apparaît. Par ailleurs j'ai tenté de faire quelque chose en remplaçant WMS par Vector mais sans succès.

**gcebelieu** · 02/05/2013, 12h16

Bonjour,

le code que vous montrez permet d'activer le popup uniquement sur les couches WMS. En effet, il active le contrôle OpenLayers.Control.WMSGetFeatureInfo sur les couches de type OpenLayers.Layer.WMS, ce qui aura pour conséquence que lors d'un clic sur la carte, une requête GetFeatureInfo (spécifique au standard WMS) sera envoyée aux serveurs WMS qui servent les couches concernées et ces serveurs retourneront une information attributaire qui sera affichée par l'API dans une popup. Pour plus d'informations sur l'API et le standard WMS, je vous invite à consulter le tutoriel sur les couches WMS sur le site API.

Pour les couches vecteurs, que vous affichez, le mécanisme à mettre en place est différent. En gros, il faut :

1. créer un contrôle de type : OpenLayers.Control.SelectFeature en l'associant à la couche vecteur et en spécifiant la fonction qui sera exécuté lors du click ;

2. écrire la fonction qui sera exécutée

3. rajouter le contrôle à la carte.

Pour cela, je vous invite à vous référer au code de l'exemple suivant.

**Scarab Aware** · 02/05/2013, 16h22

Bonjour,

Merci beaucoup pour ces précisions et votre aide. Je vois ça et je vous tiens au courant de mon avancée, mais une question me vient. Est ce qu'il est vraiment obligatoire de rajouter un contrôle comme sur l'exemple pour que cela fonctionne ?

**gcebelieu** · 02/05/2013, 16h46

Est ce qu'il est vraiment obligatoire de rajouter un contrôle comme sur l'exemple pour que cela fonctionne ?

Le seul contrôle à rajouter est le OpenLayers.Control.SelectFeature. Le reste est pour la démo proposée par l'exemple cité.

**Scarab Aware** · 06/05/2013, 16h48

D'accord, bon j'ai fait bien des tentatives, avec l'exemple que vous me donnez et d'autres, mais sans succès jusque là...Soit ça ne fait rien, soit ça fait disparaître le gestionnaire de couches.

En mettant simplement : var = new OpenLayers.Control.SelectFeature; je n'obtiens riens. Ensuite j'ai bien tenté :

Code :

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

1
2
3
4
5
6
7
var Control = new OpenLayers.Control.SelectFeature(
    ['new OpenLayers.Layer.Vector'],
    {
        click: true,
        highlightOnly: true
    }
);

Il ne passe strictement rien au clic. J'ai aussi tenté en remplaçant 'new OpenLayers.Layer.Vector' par 'Crue de 1919'

Avec ceci :

Code :

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

1
2
3
4
5
var controleSelection = new OpenLayers.Control.SelectFeature(new OpenLayers.Layer.Vector);
map.addControl(controleSelection);
controleSelection.activate();
var features = new OpenLayers.Layer.Vector.getFeaturesByAttribute(10);
controleSelection.select(features[0]);

Tout disparaît, il ne reste plus que la carte toujours bien centrée.
J'ai bien d'autres tentatives de ce genre et sur plusieurs exemples rencontrés aucun ne se fait satisfaisant...
La fonction que je veux pouvoir exécuter lors du clic sur la couche surfacique ou en ponctuel est l'apparition de l'info-bulle donnant des renseignements.

Donc comment puis je arriver à provoquer l'effet voulu ?

J'ai également tenté de placer le control ici :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
new OpenLayers.Layer.Vector(
                    "Crue de 1919",
                   { 
                        strategies: [new OpenLayers.Strategy.Fixed()] ,
						opacity :1,
						styleMap : new OpenLayers.StyleMap({'pointRadius': 0, fillColor: "orange",
               fillOpacity: 0.5, strokeColor: "orange", strokeOpacity : 0.5}),
			protocol : new OpenLayers.Protocol.HTTP({
			  url: "assets/meurthecrues/1919.kml",
			  format: new OpenLayers.Format.KML({
			    internalProjection: viewer.getMap().getProjection()
			  })
		       })

ceci sans plus de succès. Sachant bien que je travaille à partir de cet exemple http://api.ign.fr/tech-docs-js/examp...sicViewer.html

De plus, en mettant de cette façon : var wiCntrl= new OpenLayers.Control.SelectFeature juste après l'ensemble suivant :

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
var queryableLayers=viewer.getMap().getLayersByClass("OpenLayers.Layer.WMS");
    for (var i=(queryableLayers.length-1);i>=0;i--){
        if (queryableLayers[i].queryable!=true){
            queryableLayers.splice(i);
        }
    }
    var wiCntrl= new OpenLayers.Control.WMSGetFeatureInfo({
        uiOptions:{title:'olControlWMSGetFeatureInfo.title'},
        queryVisible: true,
        layers: queryableLayers,
        maxFeatures: 10,
        infoFormat:'text/plain',
        eventListeners: {
            getfeatureinfo: function(evt) {
                //this===control
                var txt= '';
                if (typeof(evt.features)!='undefined') {
                    for (var i= 0, l= evt.features.length; i<l; i++) {
                        var T= Geoportal.Control.renderFeatureAttributes(evt.features[i]);
                        txt+= '<div class="gpPopupHead">' + T[0] + '</div>' +
                              '<div class="gpPopupBody">' + T[1] + '</div>';
                    }
                } else {
                    if (evt.text) {
                        var txt=
                            evt.object.infoFormat=='text/plain'?
                                '<div class="gpPopupBody">' +
                                    evt.text.replace(/[\r\n]/g,'<br/>').replace(/ /g,'&nbsp;') +
                                '</div>'
                            :   evt.text;
                    }
                }
                if (txt) {
                    this.map.addPopup(new OpenLayers.Popup.FramedCloud(
                        "chicken",
                        this.map.getLonLatFromPixel(evt.xy),
                        null,
                        Geoportal.Util.cleanContent(txt),
                        null,
                        true));
                }
            }
        }
    });

rien de plus ne se produit excepté la disparition de l'icone du getfeatureinfo dans la barre d'outils. Celui devient invisible mais est toujours présent.

En bref, j'ai quelques difficultés avec l'implémentation du OpenLayers.Control.SelectFeature est à travers l'exemple sur lequel je travaille, existe t'il une manière bien spécifique de le placer ?

**zainab_k** · 06/05/2013, 17h26

Bonjour,
Je n'ai pas suivi tout le fil de la discuession mais voici un bout de code qui utilise le contrôle de selection et qui fonctionne:

Code :

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

1
2
3
4
5
6
var clickCtrlOpts_gpx= { 
	onSelect: selection,
	autoActivate: true
};
var hoverCtrl= new OpenLayers.Control.SelectFeature([couche_gpx], clickCtrlOpts_gpx);
viewer.getMap().addControl(hoverCtrl);

**Scarab Aware** · 07/05/2013, 09h44

Bonjour,

Merci mais là non plus ça ne fonctionne pas sur l'arborescence. Cela a pour effet de faire disparaître le gestionnaire de couches.

Travaillant sur du KML j'ai aussi tenté ceci :

Code :

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

1
2
3
4
5
var clickCtrl= new OpenLayers.Control.SelectFeature(['Années de crues de la Meurthe'], clickCtrlOpts);
    viewer.getMap().addControl(clickCtrl);
    viewer.getMap().events.on({
        "changelayer":Geoportal.Map.onVisibilityChange,
        scope:clickCtrl});

Comme ceci il ne reste que la carte centrée sur la Lorraine affichée. Sans les '' autour de Années de crues de la Meurthe ça fait tout disparaître.

Une image de comment cela se présente :

Comme je l'ai dis auparavant, pour les couches hors arborescence comme stations vigicrues j'ai automatiquement l'info-bulle, c'est sur les années de crues, autres crues et missions photos que cela coince. Et le problème à l'air de pouvoir venir du "var wiCntrl= new OpenLayers.Control.WMSGetFeatureInfo" mais je ne puis l'enlever sous peine de la aussi faire disparaître le contrôle des couches, alors que je n'ai pas/plus besoin du control pour WMS

**gcebelieu** · 13/05/2013, 16h03

Si l'on reprend le code de zainab_k, je pense qu'il faut récupérer les couches en faisant un getLayersByName ou getLayersByClass et y appliquer le controle SelectFeature. Ce qui donnerait quelque chose comme ça :

Code :

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

1
2
3
4
5
6
7
8
var clickCtrlOpts= { 
	onSelect: selection,
	autoActivate: true
};
var vectorLayers= viewer.getMap().getLayersByClass('OpenLayers.Layer.Vector') ;
var hoverCtrl= new OpenLayers.Control.SelectFeature(vectorLayers, clickCtrlOpts);
viewer.getMap().addControl(hoverCtrl);

ou, avec getLayersByName :

Code :

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

1
2
3
4
5
6
7
8
var clickCtrlOpts= { 
	onSelect: selection,
	autoActivate: true
};
var layers= viewer.getMap().getLayersByName('Années de crues de la Meurthe') ;
var hoverCtrl= new OpenLayers.Control.SelectFeature(layers, clickCtrlOpts);
viewer.getMap().addControl(hoverCtrl);

**Scarab Aware** · 14/05/2013, 15h21

Merci, j'ai bien essayé avec les deux, et pour que rien ne disparaisse je dois mettre ceci un peu avant la fonction loadAPI.

Ce qui donne :

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
    viewer.getMap().addControl(inCntrl);
    inCntrl.activate();

    // default center and zoom location :
    viewer.getMap().setCenter(6.178368,49.580152,10);
	
	var clickCtrlOpts= { 
	onSelect: selection,
	autoActivate: true
};
var layers= viewer.getMap().getLayersByName('Années de crues de la Meurthe') ;
var hoverCtrl= new OpenLayers.Control.SelectFeature(layers, clickCtrlOpts);
viewer.getMap().addControl(hoverCtrl);

    // enhancing additions :
    Geoportal.Control.addEnhanceEffectOnPanel(toolsPanel,[nhCntrl.previous, nhCntrl.next]);
    Geoportal.Control.addEnhanceEffectOnPanel(mdCntrl);
}

/**
 * Function: loadAPI
 * Load the configuration related with the API keys.
 * Called on "onload" event.
 * Call <initMap>() function to load the interface.
 */

Mais j'ai beau tenter, retenter autrement, rien n y fait ça ne veut toujours pas fonctionner

J'ai même essayé en écrivant VectorLayers ou Layers.Vector au lieu de Layers mais pareil aucun résultat. Du coup...peut être quelque chose de plus spécifique ?

~~On va m'entendre pousser un de ces cris de joie quand ça va réussir...~~

**gcebelieu** · 14/05/2013, 17h41

J'ai un peu de mal à vous aider à debugger avec ce bout de code. Pouvez-vous : soit fournir l'intégralité du code de votre page, soit fournir un code "allégé" qui reproduit le problème, soit mettre en ligne une page qui reproduit ce pb et nous donner l'url de la page ?

**Scarab Aware** · 15/05/2013, 09h15

Bonjour,

je vous le met donc en 2 parties

Partie 1 :

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
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
1313
1314
1315
1316
1317
1318
1319
1320
1321
1322
1323
1324
1325
1326
1327
1328
1329
1330
1331
1332
1333
1334
/*
 * Copyright (c) 2008-2013 Institut National de l'information Geographique et forestiere France, released under the
 * BSD license.
 */
/**
 * Property: viewer
 * {<Geoportal.Viewer>} the viewer global instance.
 */
var viewer= null;

/**
 * Function: initMap
 * Load the application. Called when all information have been loaded by
 * <loadAPI>().
 */
function initMap() {
    //The api is loaded at this step
    //L'api est chargée à cette étape

    // ==========================================================================================================

    /*
     * Copyright (c) 2008-2010 Institut National de l'information Geographique et forestiere France, released
     * under the BSD license.
     */
    /*
     * AT.requires Geoportal/Viewer.js
     * AT.requires Geoportal/Util.js
     * AT.requires Geoportal/Control/Logo.js
     */
    /**
     * Class: Geoportal.Viewer.Basic
     * A viewer that mimic default OpenLayers map !
     * Class which must be instanciated to create a map viewer. This is a
     * helper class of the API for embedding a <Geoportal.Map>.
     *
     * Inherits from:
     *  - <Geoportal.Viewer>
     */
    Geoportal.Viewer.Basic= OpenLayers.Class( Geoportal.Viewer, {

        /**
         * Property: defaultControls
         * {Object} Control's that are added to the viewer.
         *      Currently supported controls are:
         *      * <OpenLayers.Control.KeyboardDefaults> ;
         *      * <Geoportal.Control.Logo> ;
         */
        defaultControls: {
            'OpenLayers.Control.KeyboardDefaults':{
                activeOverMapOnly: true
            },
            'Geoportal.Control.Logo':{
                logoSize: 0,
                destroy: function() {
                    if (this.map.getApplication()) {
                        this.map.getApplication().logoCntrl= null;
                    }
                    Geoportal.Control.Logo.prototype.destroy.apply(this,arguments);
                },
                viewerProperty: 'logoCntrl'
            }
        },
        /**
         * Constructor: Geoportal.Viewer.Basic
         * Generates the Geoportal OpenLayers like viewer. Controls are not
         * automatically added by the viewer as it is the case for
         * <Geoportal.Viewer.Default> and <Geoportal.Viewer.Standard>.
         *
         * Parameters:
         * div - {String} Id of the DIV tag in which you want
         *       to insert your viewer.
         *       Default is "geoportalViewerDiv".
         * options - {Object} Optional object with properties to
         *       tag onto the viewer.
         *       Supported options are : mode, territory,
         *       projection, displayProjection, proxy,
         *       nameInstance, [apiKey], {apiKey{}}, tokenServerUrl, tokenTtl.
         *       * mode defaults to *normal*
         *       * territory defaults to *FXX*
         *       * nameInstance defaults to *geoportalMap*
         *       Other options like resolutions, center, minExtent, maxExtent,
         *       zoom, minZoomLevel, maxZoomLevel, scales, minResolution,
         *       maxResolution,
         *       minScale, maxScale, numZoomLevels, events, restrictedExtent,
         *       fallThrough, eventListeners are handed over to the
         *       underlaying
         *       <Geoportal.Map>.
         */
        initialize: function(div, options) {
            if (this.defaultControls['Geoportal.Control.Logo'].logoSize==0) {
                this.defaultControls['Geoportal.Control.Logo'].logoSize=
                    Geoportal.Control.Logo.WHSizes.normal;
            }
            Geoportal.Viewer.prototype.initialize.apply(this,arguments);
        },

        /**
         * APIMethod: render
         * Render the map to a specified container.
         *
         * Parameters:
         * div - {String|DOMElement} The container that the map should be rendered
         *     to. If different than the current container, the map viewport
         *     will be moved from the current to the new container.
         */
        render: function(div) {
            if (this.getMap()) {
                this.getMap().render(div);
            }
        },

        /**
         * APIMethod: loadLayout
         * {Function} Called before creating the {<Geoportal.Map>} map.
         *      It expects an object parameter taken from options.layoutOptions of
         *      the constructor.
         *      It returns the id of the <OpenLayers.Map> div.
         *
         * Parameters:
         * options - {Object}
         *
         * Returns:
         * {DOMElement} the OpenLayers map's div.
         */
        loadLayout: function(options) {
            this.div.style.overflow= "hidden";

            OpenLayers.Element.addClass(this.div, 'gpMainMap');
            OpenLayers.Element.addClass(this.div, 'gpMainMapCellSimple');
            OpenLayers.Element.addClass(this.div, 'olMap');
            OpenLayers.Element.addClass(this.div, 'gpMap');
            return this.div;
        },

        /**
         * APIMethod: setSize
         * Defines the view viewer size.
         *
         * Parameters:
         * width - {String} The new width of the viewer.
         * height - {String} The new height of the viewer.
         * rendered size.
         */
        setSize: function(width, height) {
            width= typeof(width)=='number'? width+'px':width;//ensure compatibility with width in pixels
            var w= Geoportal.Util.convertToPixels(width,true);
            height= typeof(height)=='number'? height+'px':height;//ensure compatibility with height in pixels
            var h= Geoportal.Util.convertToPixels(height,false);

            var wg= this.div.offsetWidth - w;
            this.div.style.width= width;
            var hg= this.div.offsetHeight - h;
            this.div.style.height= height;
            this.getMap().updateSize();
            if (wg!=0 || hg!=0) {//width or height has changed ...
                // force computation :
                this.render(this.div);
            }
        },

        /**
         * Constant: CLASS_NAME
         * {String} *"Geoportal.Viewer.Basic"*
         */
        CLASS_NAME: "Geoportal.Viewer.Basic"
    });

    /*
     * Copyright (c) 2008-2010 Institut National de l'information Geographique et forestiere France, released
     * under the BSD license.
     */
    /*
     * AT.requires Geoportal/Control/LayerSwitcher.js
     */
    /**
     * Class: Geoportal.Control.TreeLayerSwitcher
     * Layer switcher class that display layers using a tree.
     *
     * The control's structure is as follows :
     *
     * (start code)
     * <div id="#{id}" class="gpControlTreeLayerSwitcher olControlNoSelect gpMainDivClass">
     *   <div id="#{id}_layersDiv" class="gpLayersClass">
     *     <div id="#{id}_layer_title" class="gpControlLabelClass"></div>
     *     <div id="#{id}_layers_container" class="gpGroupDivClass">
     *       <div id="#{id}_#{layer.id} class="gpLayerDivClass">
     *         <div class="gpLayerNameGroupDivClass">
     *           <div id="node1_#{layer.id}" class="gpTree gpBar|gpCorner|gpTee|gpCornerPlus|gpCornerMinus|gpTeePlus|gpTeeMinus" title=""></div>
     *           <div id="node2_#{layer.id}" class="gpTree gpLine|gpCorner|gpTee|gpCheckedAggregate|gpPartialCheckedAggregate|gpUnCheckedAggregate" title=""></div>
     *           <div id="node3_#{layer.id}" class="gpTree gpLayerVisible|gpLayerNotVisible" title=""></div>
     *           <div id="node4_#{layer.id}" class="gpTree gpLayerQueryable|gpLayerNotQueryable|gpLayerQueryableForbidden" title=""></div>
     *           <div id="node5_#{layer.id}" class="gpTree gpLayerFeatureQueryable|gpLayerFeatureNotQueryable|gpBlank"></div>
     *           <div id="basic_#{LayerId}" class="gpControlBasicLayerToolbar olControlNoSelect" style="display:"></div>
     *           <div id="buttonsChangeOrder_#{layer.id} class="gpButtonsChangeOrderClass">
     *             <div id="buttonUp_#{layer.id} class="gpButtonUp"></div>
     *             <div id="buttonDown_#{layer.id} class="gpButtonDown"></div>
     *           </div>
     *           <span id="label_#{layer.id}" class="gpLayerSpanClass">name</span>
     *           <div id="loading_#{layer.id} class="gpControlLoading olControlNoSelect" style="display:"></div>
     *         </div>
     *       </div>
     *     </div>
     *   </div>
     * </div>
     * (end)
     *
     * Inherits from:
     * - {<Geoportal.Control.LayerSwitcher>}
     */
    Geoportal.Control.TreeLayerSwitcher= OpenLayers.Class( Geoportal.Control.LayerSwitcher, {
        /**
         * Constant: EVENT_TYPES
         * {Array(String)} Supported application event types.
         *      Events are :
         *      - *beforegroupopened* Triggered before opening an aggregate;
         *      - *beforegroupclosed* Triggered before closing an aggregate;
         *      - *groupopened* Triggered after opening an aggregate;
         *      - *groupclosed* Triggered after closing an aggregate.
         */
        EVENT_TYPES: ["beforegroupopened", "groupopened",
                      "beforegroupclosed", "groupclosed"],

        /**
         * Property: layersMap
         * {Object} A map of layer's id and their rank in the layerStates array.
         *
         */
        layersMap: null,

        /**
         * Constructor: Geoportal.Control.TreeLayerSwitcher
         * Build the layer switcher.
         *
         * Parameters:
         * options - {Object}
         */
        initialize: function(options) {
            // concatenate events specific to this control with those from the base
            this.EVENT_TYPES =
                Geoportal.Control.TreeLayerSwitcher.prototype.EVENT_TYPES.concat(
                Geoportal.Control.LayerSwitcher.prototype.EVENT_TYPES
            );
            Geoportal.Control.LayerSwitcher.prototype.initialize.apply(this, arguments);
            this.layersMap= {};
        },

        /**
         * APIMethod: destroy
         * The DOM elements handling base layers are not suppressed.
         */
        destroy: function() {
            this.layersMap= null;
            Geoportal.Control.LayerSwitcher.prototype.destroy.apply(this, arguments);
        },

        /**
         * APIMethod: clearLayersArray
         * User specifies either "base" or "data". we then clear all the
         *     corresponding listeners, the div, and reinitialize a new array.
         *
         * Parameters:
         * layersType - {String}
         */
        clearLayersArray: function(layersType) {
            var layers= this[layersType + "Layers"];
            if (layers) {
                for(var i= 0, len= layers.length; i<len; i++) {
                    var layer= layers[i];
                    if (layer.isAnAggregate) {
                        OpenLayers.Event.stopObservingElement(layer.d1);
                        OpenLayers.Event.stopObservingElement(layer.d2);
                    } else {
                        OpenLayers.Event.stopObservingElement(layer.d3);
                        OpenLayers.Event.stopObservingElement(layer.d4);
                    }
                    OpenLayers.Event.stopObservingElement(layer.labelSpan);
                    OpenLayers.Event.stopObservingElement(OpenLayers.Util.getElement("buttonUp_"+layer.id));
                    OpenLayers.Event.stopObservingElement(OpenLayers.Util.getElement("buttonDown_"+layer.id));
                }
            }
            this[layersType + "LayersDiv"].innerHTML= "";
            this[layersType + "Layers"]= [];
        },

        /**
         * APIMethod: redraw
         *  Goes through and takes the current state of the Map and rebuilds the
         *  control to display that state.  Show layers using folder tree display.
         *
         * Returns:
         * {DOMElement} A reference to the DIV DOMElement containing the control
         */
        redraw: function() {
            //if the state hasn't changed since last redraw, no need
            // to do anything. Just return the existing div.
            if (!Geoportal.Control.TreeLayerSwitcher.prototype.checkRedraw.apply(this,arguments)) {
                return this.div;
            }

            var i, j, l= this.map.layers.length;
            var layer;
            // Save state -- for checking layer if the map state changed.
            // We save this before redrawing, because in the process of redrawing
            // we will trigger more visibility changes, and we want to not redraw
            // and enter an infinite loop. Same for opacity changes.
            this.layerStates= [];
            this.layersMap= {};
            for (i= 0; i<l; i++) {
                layer= this.map.layers[i];
                // adding preventControls option to disallow some control's class by the user
                if (!layer.preventControls) {
                    layer.preventControls= {};
                }
                OpenLayers.Util.extend(layer.preventControls, this.preventControls);
                this.layerStates[i]= {
                    'displayInLayerSwitcher': layer.displayInLayerSwitcher,
                    'name': layer.name,
                    'visibility': layer.visibility,
                    'opacity': layer.opacity,
                    'inRange': layer.inRange,
                    'id': layer.id,
                    'visibilityRatio': this.dataLayers && this.dataLayers[i]? this.dataLayers[i].visibilityRatio || 0 : 0,
                    'unfolded': this.dataLayers && this.dataLayers[i]? this.dataLayers[i].unfolded : undefined
                };
                for (var x in this.cntrlKeys) {
                    var cntrl= this.map.getControl(x+'_'+this.layerStates[i].id);
                    if (cntrl) {
                        var searchDiv= cntrl.div;
                        if (searchDiv.parentNode!=null) {
                            searchDiv.parentNode.removeChild(searchDiv);
                        }
                    }
                }
                this.layersMap[layer.id]= i;
            }

            //clear out previous layers, build clean array :
            this.clearLayersArray("data");
            this.dataLayers= [];
            for (i= 0; i<l; i++) {
                this.dataLayers.push({});
            }

            var containsOverlays= false;

            var layers= this.map.layers.slice();
            var groupDiv= this.dataLayersDiv;
            var lup= false, ldown= false;
            for (i= l-1; i>=0; i--) {
                // don't want baseLayers ...
                if (layers[i].displayInLayerSwitcher && !layers[i].baseLayer) {
                    containsOverlays= true;
                    layer= layers[i];

                    var infos= this.drawLayer(layers,l,i,this.layerStates[i]);
                    groupDiv.appendChild(infos.elem);

                    this.dataLayers[i]= {
                        'layer': layer,
                        'inputElem': infos.elem,
                        'd1': infos.d1,
                        'd2': infos.d2,
                        'd3': infos.d3,
                        'd4': infos.d4,
                        'd5': infos.d5,
                        'labelSpan': infos.span,
                        'isAnAggregate': layer.layers!=null,
                        'isAggregated': false,
                        'visibilityRatio': layer.layers!=null? this.layerStates[i].visibilityRatio : 0,
                        'unfolded': layer.layers!=null? this.layerStates[i].unfolded : undefined
                    };

                    if (layer.layers!=null) {
                        // display aggregation's content
                        var innerLayers= layer.layers.slice();
                        var ll= innerLayers.length;
                        for (var ii= ll-1; ii>=0; ii--) {
                            var lyr= innerLayers[ii];
                            var rank= this.layersMap[lyr.id];
                            var innerInfos= this.drawLayer(innerLayers,ll,ii,this.layerStates[rank]);
                            // is the aggregate open ?
                            if (this.layerStates[i].unfolded!==true) {
                                innerInfos.elem.style.display= 'none';
                            }
                            groupDiv.appendChild(innerInfos.elem);
                            // insert at the right rank (same as map's layers'
                            // rank !)
                            this.dataLayers[rank]= {
                                'layer': lyr,
                                'inputElem': innerInfos.elem,
                                'd1': innerInfos.d1,
                                'd2': innerInfos.d2,
                                'd3': innerInfos.d3,
                                'd4': innerInfos.d4,
                                'd5': innerInfos.d5,
                                'labelSpan': innerInfos.span,
                                'isAnAggregate': false,
                                'isAggregated': true,
                                'visibilityRatio': 0,
                                'unfolded': undefined
                            };
                        }
                    }
                }
            }

            if (!this.outsideViewport) {
                // if no overlays, don't display the overlay label
                this.dataLbl.style.display= containsOverlays? '' : 'none';
            }

            return this.div;
        },

        /**
         * Method: drawLayer
         * Build the layer's informations in the switcher.
         *
         * Parameters:
         * layers - {<OpenLayers.Layer>} the array of layers the current layer belongs to.
         * len - {Integer} total number of layers in the array.
         * rank - {Integer} the current layer's position within the array of layers.
         * state - {Object} the current layer's state.
         *
         * Returns:
         * {Object} An object {'elem', 'd1', 'd2', 'd3', 'd4', 'd5', 'span'} having the div
         * containing the layer's informations and its span.
         */
        drawLayer: function(layers,len,rank,state) {
            var layer= layers[rank];
            var checked= layer.getVisibility();
            var isAnAggregate= layer.layers!=null;
            var isAggregated= layer.aggregate!=null;
            var layerDiv= document.createElement("div");
            layerDiv.id= this.id+"_"+layer.id;
            layerDiv.className= "gpLayerDivClass";
            layerDiv.checked= checked;

            // +, -, |-, -, | icon :
            var d1= document.createElement('div');
            d1.id= "node1_"+layer.id;
            OpenLayers.Element.addClass(d1, 'gpTree');
            var isLast= true;
            for (var j=rank-1; j>=0; j--) {
                if (((!isAggregated && layers[j].displayInLayerSwitcher) || isAggregated) && !layers[j].baseLayer) {
                    isLast= false;
                    break;
                }
            }
            var isFirst= true;
            for (var j= rank+1; j<len; j++) {
                if (((!isAggregated && layers[j].displayInLayerSwitcher) || isAggregated) && !layers[j].baseLayer) {
                    isFirst= false;
                    break;
                }
            }
            if (isAnAggregate) {
                if (isLast) {
                    if (state.unfolded===true) {
                        OpenLayers.Element.addClass(d1, 'gpCornerMinus');
                    } else {
                        OpenLayers.Element.addClass(d1, 'gpCornerPlus');
                    }
                } else {
                    if (state.unfolded===true) {
                        OpenLayers.Element.addClass(d1, 'gpTeeMinus');
                    } else {
                        OpenLayers.Element.addClass(d1, 'gpTeePlus');
                    }
                }
                if (state.unfolded===true) {
                    d1.title= OpenLayers.i18n('gpControlTreeLayerSwitcher.aggregate.unfolded.title');
                } else {
                    d1.title= OpenLayers.i18n('gpControlTreeLayerSwitcher.aggregate.folded.title');
                }
            } else {
                if (isAggregated) {
                    OpenLayers.Element.addClass(d1, 'gpBar');
                } else {
                    if (isLast) {
                        OpenLayers.Element.addClass(d1, 'gpCorner');
                    } else {
                        OpenLayers.Element.addClass(d1, 'gpTee');
                    }
                }
            }
            OpenLayers.Event.observe(
                d1,
                "click",
                OpenLayers.Function.bindAsEventListener(
                    this.onFolderClick,
                    ({
                        'inputElem': layerDiv,
                        'd1': d1,
                        'layer': layer,
                        'isLast': isLast,
                        'layerSwitcher': this
                    })));
            layerDiv.appendChild(d1);

            // X, - icon :
            var d2= document.createElement('div');
            d2.id= "node2_"+layer.id;
            OpenLayers.Element.addClass(d2, 'gpTree');
            if (isAnAggregate) {
                state.visibilityRatio= 0;
                for (var ii= 0, ll= layer.layers.length; ii<ll; ii++) {
                    if (layer.layers[ii].getVisibility()) {
                        state.visibilityRatio+= 1;
                    }
                }
                if (checked) {
                    d2.title= OpenLayers.i18n('gpControlTreeLayerSwitcher.aggregate.checked.title');
                    if (state.visibilityRatio==layer.layers.length) {
                        OpenLayers.Element.addClass(d2, 'gpCheckedAggregate');
                    } else {
                        OpenLayers.Element.addClass(d2, 'gpPartialCheckedAggregate');
                    }
                } else {
                    d2.title= OpenLayers.i18n('gpControlTreeLayerSwitcher.aggregate.unchecked.title');
                    OpenLayers.Element.addClass(d2, 'gpUnCheckedAggregate');
                }
                layerDiv.visibilityRatio= state.visibilityRatio;
            } else {
                if (isAggregated) {
                    if (isLast) {
                        OpenLayers.Element.addClass(d2, 'gpCorner');
                    } else {
                        OpenLayers.Element.addClass(d2, 'gpTee');
                    }
                } else {
                    OpenLayers.Element.addClass(d2, 'gpLine');
                }
            }
            OpenLayers.Event.observe(
                d2,
                "click",
                OpenLayers.Function.bindAsEventListener(
                    this.onCheckClick,
                    ({
                        'inputElem': layerDiv,
                        'd2': d2,
                        'layer': layer,
                        'layerSwitcher': this
                    })));
            layerDiv.appendChild(d2);

            var d3= null, d4= null, d5= null;
            if (!isAnAggregate) {
                // o, x icon :
                d3= document.createElement('div');
                d3.id= "node3_"+layer.id;
                OpenLayers.Element.addClass(d3, 'gpTree');
                if (checked) {
                    d3.title= OpenLayers.i18n('gpControlTreeLayerSwitcher.layer.checked.title');
                    OpenLayers.Element.addClass(d3, 'gpLayerVisible');
                } else {
                    d3.title= OpenLayers.i18n('gpControlTreeLayerSwitcher.layer.unchecked.title');
                    OpenLayers.Element.addClass(d3, 'gpLayerNotVisible');
                }
                //FIXME: title (minScale/maxScale)
                OpenLayers.Event.observe(
                    d3,
                    "click",
                    OpenLayers.Function.bindAsEventListener(
                        this.onInputClick,
                        ({
                            'inputElem': layerDiv,
                            'd3': d3,
                            'layer': layer,
                            'layerSwitcher': this
                        })));
                layerDiv.appendChild(d3);

                // i icon
                d4= document.createElement('div');
                d4.id= "node4_"+layer.id;
                OpenLayers.Element.addClass(d4, 'gpTree');
                if (layer instanceof OpenLayers.Layer.WMS) {
                    if (layer.queryable===true) {
                        if (checked) {
                            d4.title= OpenLayers.i18n('gpControlTreeLayerSwitcher.wmslayer.queryable.checked.title');
                            OpenLayers.Element.addClass(d4, 'gpLayerQueryable');
                        } else {
                            d4.title= OpenLayers.i18n('gpControlTreeLayerSwitcher.wmslayer.queryable.unchecked.title');
                            OpenLayers.Element.addClass(d4, 'gpLayerQueryableForbidden');
                        }
                    } else {
                        if (layer.queryable===false) {
                            if (checked) {
                                d4.title= OpenLayers.i18n('gpControlTreeLayerSwitcher.wmslayer.notqueryable.checked.title');
                                OpenLayers.Element.addClass(d4, 'gpLayerNotQueryable');
                            } else {
                                d4.title= OpenLayers.i18n('gpControlTreeLayerSwitcher.wmslayer.notqueryable.unchecked.title');
                                OpenLayers.Element.addClass(d4, 'gpLayerQueryableForbidden');
                            }
                        } else {
                            d4.title= OpenLayers.i18n('gpControlTreeLayerSwitcher.wmslayer.notqueryable.unchecked.title');
                            OpenLayers.Element.addClass(d4, 'gpLayerQueryableForbidden');
                        }
                    }
                } else {
                    d4.title= OpenLayers.i18n('gpControlTreeLayerSwitcher.layer.notwmsqueryable.title');
                    OpenLayers.Element.addClass(d4, 'gpBlank');
                }
                var context4= {
                };
                OpenLayers.Event.observe(
                    d4,
                    "click",
                    OpenLayers.Function.bindAsEventListener(
                        this.onQueryableClick,
                        ({
                            'inputElem': layerDiv,
                            'd4': d4,
                            'layer': layer,
                            'layerSwitcher': this
                        })));
                layerDiv.appendChild(d4);

                //FIXME: # icon : GetFeature ?
                d5= document.createElement('div');
                d5.id= "node5_"+layer.id;
                OpenLayers.Element.addClass(d5, 'gpTree');
                if (layer instanceof OpenLayers.Layer.WFS) {
                    if (layer.queryable===true && checked) {
                        d5.title= OpenLayers.i18n('gpControlTreeLayerSwitcher.wfslayer.queryable.checked.title');
                        OpenLayers.Element.addClass(d5, 'gpLayerFeatureQueryable');
                    } else {
                        d5.title= OpenLayers.i18n('gpControlTreeLayerSwitcher.wfslayer.notqueryable.checked.title');
                        OpenLayers.Element.addClass(d5, 'gpLayerFeatureNotQueryable');
                    }
                } else {
                    d5.title= OpenLayers.i18n('gpControlTreeLayerSwitcher.layer.notwfsqueryable.title');
                    OpenLayers.Element.addClass(d5, 'gpBlank');
                }
                layerDiv.appendChild(d5);

                // trash, opacity slider, zoom to extent icons :
                if (layer.preventControls['Geoportal.Control.BasicLayerToolbar']!==true &&
                    ((layer.view && (layer.view.drop || layer.view.zoomToExtent)) ||
                     (layer.opacity!=undefined))) {
                    var ctrlId= 'basic_'+layer.id;
                    var basicCtrl= this.map.getControl(ctrlId);
                    if (basicCtrl) {
                        layerDiv.appendChild(basicCtrl.div);
                        for (var ibc= 0, lbc= basicCtrl.controls.length; ibc<lbc; ibc++) {
                            if (basicCtrl.controls[ibc] instanceof Geoportal.Control.LayerOpacity) {
                                basicCtrl.controls[ibc].refreshOpacity();
                                break;
                            }
                        }
                    } else {
                        var basicCtrlDiv= document.createElement('div');
                        basicCtrlDiv.id= ctrlId;
                        basicCtrlDiv.className= 'gpControlBasicLayerToolbar olControlNoSelect';
                        //TODO: title = opacity%
                        var basicCtrl= new Geoportal.Control.BasicLayerToolbar(
                                                layer, {
                                                    id : basicCtrlDiv.id,
                                                    div: basicCtrlDiv
                                                });
                        layerDiv.appendChild(basicCtrlDiv);
                        this.map.addControl(basicCtrl);
                        for (var ibc= 0, lbc= basicCtrl.controls.length; ibc<lbc; ibc++) {
                            if (basicCtrl.controls[ibc] instanceof Geoportal.Control.PanelToggle) {
                                basicCtrl.activateControl(basicCtrl.controls[ibc]);
                            }
                        }
                    }
                }

            }

            // Layers order management:
            var buttons= document.createElement('div');
            buttons.idt='buttonsChangeOrder'+layer.id;
            buttons.className= 'gpButtonsChangeOrderClass';
            layerDiv.appendChild(buttons);

            // Moving a layer up ...
            var buttonUp= document.createElement('div');
            buttonUp.id="buttonUp_" +layer.id;
            buttonUp.className= "gpButtonUp";
            // if it is the first displayed in layer stack ...
            if (isFirst) {
                buttonUp.className+= "Deactive";
            }
            OpenLayers.Event.observe(
                buttonUp,
                "click",
                OpenLayers.Function.bindAsEventListener(
                    this.onButtonUpClick,
                    ({
                        'layerSwitcher':this,
                        'layerRank':isAggregated? this.layersMap[layer.id] : rank
                    })
                ));
            buttons.appendChild(buttonUp);

            //Moving a layer down ...
            var buttonDown= document.createElement('div');
            buttonDown.id="buttonDown_" +layer.id;
            buttonDown.className= "gpButtonDown";
            // if it is the last displayed in layer stack ...
            if (isLast) {
                buttonDown.className+= "Deactive";
            }
            OpenLayers.Event.observe(
                buttonDown,
                "click",
                OpenLayers.Function.bindAsEventListener(
                    this.onButtonDownClick,
                    ({
                        'layerSwitcher':this,
                        'layerRank':isAggregated? this.layersMap[layer.id] : rank
                    })
                ));
            buttons.appendChild(buttonDown);

            // display name
            var labelSpan= document.createElement("span");
            labelSpan.id= 'label_' + layer.id;
            var layerLab= OpenLayers.i18n(layer.name);
            // convert HTML entities to get the right length :
            var entityBuffer= document.createElement("textarea");
            entityBuffer.innerHTML= layerLab.replace(/</g,"&lt;").replace(/>/g,"&gt;");
            layerLab= entityBuffer.value;
            entityBuffer= null;
            if (!isAnAggregate && layerLab.length >= Geoportal.Control.LayerSwitcher.LAYER_LABEL_MAXLENGTH) {
                //FIXME : HTML tags within string
                layerLab= layerLab.substring(0,Geoportal.Control.LayerSwitcher.LAYER_LABEL_REPLACEMENT_INDEX)+
                          Geoportal.Control.LayerSwitcher.LAYER_LABEL_SUFFIX_REPLACEMENT;
            }
            labelSpan.innerHTML= layerLab;
            labelSpan.className= "gpLayerSpanClass";
            labelSpan.title= OpenLayers.i18n(layer.name);
            if (!layer.inRange) {
                labelSpan.className+= "NotInRange";
            }
            if (layer.description || layer.dataURL || layer.metadataURL || layer.legends) {
                labelSpan.style.cursor= "help";
                // a pop-up for description, dataURL, metadataURL, ...
                var context= {
                    'inputElem': layerDiv,
                    'layer': layer,
                    'layerSwitcher': this
                };
                OpenLayers.Event.observe(
                    labelSpan,
                    "click",
                    OpenLayers.Function.bindAsEventListener(this.onLabelClick,context)
                );
            }
            layerDiv.appendChild(labelSpan);

            var ctrlId= 'loading_'+layer.id;
            var loadingCtrl= this.map.getControl(ctrlId);
            if (loadingCtrl) {
                layerDiv.appendChild(loadingCtrl.div);
            } else {
                var loadingCtrlDiv= document.createElement('div');
                loadingCtrlDiv.id= ctrlId;
                loadingCtrlDiv.className= 'gpControlLoading olControlNoSelect';
                loadingCtrl= new Geoportal.Control.Loading(
                                    layer, {
                                        id : loadingCtrlDiv.id,
                                        div: loadingCtrlDiv
                                    });
                layerDiv.appendChild(loadingCtrlDiv);
                this.map.addControl(loadingCtrl);
            }

            return {'elem':layerDiv, 'd1':d1, 'd2':d2, 'd3':d3, 'd4':d4, 'd5':d5, 'span': labelSpan};
        },
		

        /**
         * APIMethod: onFolderClick
         * A folder icon has been clicked, display or hide the aggregate's content
         * and change the icon accordingly.
         *
         * Parameters:
         * e - {Event}
         *
         * Context:
         * inputElem - {DOMElement}
         * layerSwitcher - {<Geoportal.Control.LayerSwitcher>}
         * isLast - {Boolean}
         * d1 - {DOMElement}
         * layer - {<OpenLayers.Layer>}
         */
        onFolderClick: function(e) {
            if (e != null) {
                OpenLayers.Event.stop(e);
            }
            if (this.layer.layers && this.layer.inRange) {
                var rank= this.layerSwitcher.layersMap[this.layer.id];
                var state= this.layerSwitcher.layerStates[rank];
                if (this.layerSwitcher.events.triggerEvent("beforegroup"+(state.unfolded===true? "closed":"opened"), {
                        'state':state
                    })===false) {
                    return;
                }
                for (var i= 0, l= this.layer.layers.length; i<l; i++) {
                    var innerRank= this.layerSwitcher.layersMap[this.layer.layers[i].id];
                    if (state.unfolded===true) {
                        this.layerSwitcher.dataLayers[innerRank].inputElem.style.display= 'none';
                    } else {
                        this.layerSwitcher.dataLayers[innerRank].inputElem.style.display= 'block';
                    }
                }
                if (state.unfolded===true) {
                    state.unfolded= false;
                    this.layerSwitcher.dataLayers[rank].unfolded= false;
                    if (this.isLast) {
                        OpenLayers.Element.removeClass(this.d1,'gpCornerMinus');
                        OpenLayers.Element.addClass(this.d1,'gpCornerPlus');
                    } else {
                        OpenLayers.Element.removeClass(this.d1,'gpTeeMinus');
                        OpenLayers.Element.addClass(this.d1,'gpTeePlus');
                    }
                } else {
                   state.unfolded= true;
                    this.layerSwitcher.dataLayers[rank].unfolded= true;
                    if (this.isLast) {
                        OpenLayers.Element.removeClass(this.d1,'gpCornerPlus');
                        OpenLayers.Element.addClass(this.d1,'gpCornerMinus');
                    } else {
                        OpenLayers.Element.removeClass(this.d1,'gpTeePlus');
                        OpenLayers.Element.addClass(this.d1,'gpTeeMinus');
                    }
                }
                if (this.layerSwitcher.events.triggerEvent("group"+(state.unfolded===true? "opened":"closed"), {
                        'state':state
                    })===false) {
                    return;
                }
            }
        },

        /**
         * APIMethod: onCheckClick
         * A visibility aggregate's icon has been clicked, display or hide its corresponding
         * layer and change the icon accordingly.
         *
         * Parameters:
         * e - {Event}
         *
         * Context:
         * inputElem - {DOMElement}
         * layerSwitcher - {<Geoportal.Control.LayerSwitcher>}
         * d2 - {DOMElement}
         * layer - {<OpenLayers.Layer>}
         */
        onCheckClick: function(e) {
            if (e != null) {
                OpenLayers.Event.stop(e);
            }
            if (this.layer.layers && this.layer.inRange) {
                if (this.inputElem.checked) {
                    if (this.inputElem.visibilityRatio==this.layer.layers.length) {
                        OpenLayers.Element.removeClass(this.d2,'gpCheckedAggregate');
                    } else {
                        OpenLayers.Element.removeClass(this.d2,'gpPartialCheckedAggregate');
                    }
                    OpenLayers.Element.addClass(this.d2,'gpUnCheckedAggregate');
                    this.inputElem.visibilityRatio= 0;
                } else {
                    OpenLayers.Element.removeClass(this.d2,'gpUnCheckedAggregate');
                    OpenLayers.Element.addClass(this.d2,'gpCheckedAggregate');
                    this.inputElem.visibilityRatio= this.layer.layers.length;
                }
                this.inputElem.checked= !this.inputElem.checked;
                this.layerSwitcher.updateMap();
            }
        },

        /**
         * APIMethod: onInputClick
         * A visibility icon has been clicked, display or hide its corresponding
         * layer and change the icon accordingly.
         *
         * Parameters:
         * e - {Event}
         *
         * Context:
         * inputElem - {DOMElement}
         * layerSwitcher - {<Geoportal.Control.LayerSwitcher>}
         * d3 - {DOMElement}
         * layer - {<OpenLayers.Layer>}
         */
        onInputClick: function(e) {
            if (e != null) {
                OpenLayers.Event.stop(e);
            }
            if (this.layer.inRange) {
                if (this.inputElem.checked) {
                    OpenLayers.Element.removeClass(this.d3,'gpLayerVisible');
                    OpenLayers.Element.addClass(this.d3,'gpLayerNotVisible');
                } else {
                    OpenLayers.Element.removeClass(this.d3,'gpLayerNotVisible');
                    OpenLayers.Element.addClass(this.d3,'gpLayerVisible');
                }
                if (this.layer.aggregate) {//belongs to an aggregation
                    var rank= this.layerSwitcher.layersMap[this.layer.aggregate.id];
                    var ie= this.layerSwitcher.dataLayers[rank].inputElem;
                    var d2= this.layerSwitcher.dataLayers[rank].d2;
                    var ag= this.layerSwitcher.dataLayers[rank].layer;
                    var inc= this.inputElem.checked? -1 : 1;
                    var vr= ie.visibilityRatio+inc;
                    ie.visibilityRatio+= inc;
                    this.layerSwitcher.dataLayers[rank].visibilityRatio= ie.visibilityRatio;
                    if (vr==this.layer.aggregate.layers.length) {
                        ie.checked= ag.visibility= true;
                    } else if (vr!=0) {
                        ie.checked= ag.visibility= true;
                    } else {
                        ie.checked= ag.visibility= false;
                    }
                }
                this.inputElem.checked= !this.inputElem.checked;
                this.layerSwitcher.updateMap();
            }
        },

        /**
         * APIMethod: onQueryableClick
         * A queryable icon has been clicked.
         *
         * Parameters:
         * e - {Event}
         *
         * Context:
         * inputElem - {DOMElement}
         * layerSwitcher - {<Geoportal.Control.LayerSwitcher>}
         * d4 - {DOMElement}
         * layer - {<OpenLayers.Layer>}
         */
        onQueryableClick: function(e) {
            if (e != null) {
                OpenLayers.Event.stop(e);
            }
            if ((this.layer instanceof OpenLayers.Layer.WMS) && this.inputElem.checked) {
                if (typeof(this.layer.queryable)!=='undefined') {
                    if (this.layer.queryable===true) {
                        OpenLayers.Element.removeClass(this.d4, 'gpLayerQueryable');
                        this.d4.title= OpenLayers.i18n('gpControlTreeLayerSwitcher.wmslayer.notqueryable.checked.title');
                        OpenLayers.Element.addClass(this.d4, 'gpLayerNotQueryable');
                    } else {
                        OpenLayers.Element.removeClass(this.d4, 'gpLayerNotQueryable');
                        this.d4.title= OpenLayers.i18n('gpControlTreeLayerSwitcher.wmslayer.queryable.checked.title');
                        OpenLayers.Element.addClass(this.d4, 'gpLayerQueryable');
                    }
                    this.layer.queryable= !this.layer.queryable;
                }
            }
        },

        /**
         * APIMethod: onButtonUpClick
         * the button up has been clicked, move layer accordingly
         *
         * Parameters:
         * e - {Event}
         *
         * Context:
         * layerSwitcher - {<Geoportal.Control.LayerSwitcher>}
         * layerRank - {Integer}
         */
        onButtonUpClick: function(e) {
            var lastlayer= null;
            var orderCanBeChanged= false;
            var layersTemp= this.layerSwitcher.map.layers;
            var layer= layersTemp[this.layerRank];//layer moving up
            var layerRank= this.layerRank;
            var candidateLayer, candidateRank;
            for (var i= this.layerRank+1, n= layersTemp.length; i<n; i++) {
                candidateLayer= layersTemp[i];
                candidateRank= i;
                // candidate is not a baselayer :
                if (candidateLayer.isBaseLayer) {
                    continue;
                }
                if (layer.layers) {
                    // layer is an aggregate : exchange only with aggregates or standalone layers :
                    if (!(candidateLayer.layers || !candidateLayer.aggregate)) {
                        continue;
                    }
                } else {
                    // layer is aggregated : exchange only with aggregated layers of the same aggregate :
                    if (layer.aggregate) {
                        if (!(candidateLayer.aggregate===layer.aggregate)) {
                            continue;
                        }
                    } else {
                        // layer is standalone : exchange only with aggregates or standalone layers :
                        if (!(candidateLayer.layers || !candidateLayer.aggregate)) {
                            continue;
                        }
                    }
                }
                // layer is displayable (not aggregated)=> candidate too
                // layer is not displayable (aggregated)=> candidate too
                if (!(layer.displayInLayerSwitcher===candidateLayer.displayInLayerSwitcher)) {
                    continue;
                }
                orderCanBeChanged= true;
                lastlayer= candidateLayer;//layer to switch with
                var zIndexTemp= lastlayer.getZIndex();
                lastlayer.setZIndex(layer.getZIndex());
                layer.setZIndex(zIndexTemp);
                break;
            }
            if (orderCanBeChanged) {
                if (layer.aggregate) {
                    var r= -1, cr= -1;
                    for (var i= 0, n= layer.aggregate.layers.length; i<n; i++) {
                        if (layer.aggregate.layers[i]===layer) {
                            r= i;
                            if (cr!=-1) { break; }
                        }
                        if (layer.aggregate.layers[i]===candidateLayer) {
                            cr= i;
                            if (r!=-1) { break; }
                        }
                    }
                    var lyr= layer.aggregate.layers[r];
                    layer.aggregate.layers[r]= layer.aggregate.layers[cr];
                    layer.aggregate.layers[cr]= lyr;
                }
                var d= this.layerSwitcher.dataLayers[layerRank];
                layersTemp[layerRank]= lastlayer;
                layersTemp[candidateRank]= layer;
                this.layerSwitcher.layersMap[layer.id]= candidateRank;
                this.layerSwitcher.layersMap[lastlayer.id]= layerRank;
                this.layerSwitcher.dataLayers[layerRank]= this.layerSwitcher.dataLayers[candidateRank];
                this.layerSwitcher.dataLayers[candidateRank]= d;
                this.layerSwitcher.redraw();
            }
            if (e != null) {
                OpenLayers.Event.stop(e);
            }
        },

        /**
         * APIMethod: onButtonDownClick
         * the button down has been clicked, move layer accordingly
         *
         * Parameters:
         * e - {Event}
         *
         * Context:
         * layerSwitcher - {<Geoportal.Control.LayerSwitcher>}
         * layerRank - {Integer}
         */
        onButtonDownClick: function(e) {
            var lastlayer= null;
            var orderCanBeChanged= false;
            var layersTemp= this.layerSwitcher.map.layers;
            var layer= layersTemp[this.layerRank];//layer moving down
            var layerRank= this.layerRank;
            var candidateLayer, candidateRank;
            for (var i= this.layerRank-1; i>=1; i--) {
                candidateLayer= layersTemp[i];
                candidateRank= i;
                // candidate is not a baselayer :
                if (candidateLayer.isBaseLayer) {
                    continue;
                }
                if (layer.layers) {
                    // layer is an aggregate : exchange only with aggregates or standalone layers :
                    if (!(candidateLayer.layers || !candidateLayer.aggregate)) {
                        continue;
                    }
                } else {
                    // layer is aggregated : exchange only with aggregated layers of the same aggregate :
                    if (layer.aggregate) {
                        if (!(candidateLayer.aggregate===layer.aggregate)) {
                            continue;
                        }
                    } else {
                        // layer is standalone : exchange only with aggregates or standalone layers :
                        if (!(candidateLayer.layers || !candidateLayer.aggregate)) {
                            continue;
                        }
                    }
                }
                orderCanBeChanged= true;
                lastlayer= candidateLayer;//layer to switch with
                var zIndexTemp= lastlayer.getZIndex();
                lastlayer.setZIndex(layer.getZIndex());
                layer.setZIndex(zIndexTemp);
                break;
            }
            if (orderCanBeChanged) {
                var r= this.layerSwitcher.layersMap[layer.id];
                var cr= this.layerSwitcher.layersMap[lastlayer.id];
                var d= this.layerSwitcher.dataLayers[r];
                layersTemp[r]= lastlayer;
                layersTemp[cr]= layer;
                this.layerSwitcher.dataLayers[r]= this.layerSwitcher.dataLayers[cr];
                this.layerSwitcher.dataLayers[cr]= d;
                this.layerSwitcher.redraw();
            }
            if (e != null) {
                OpenLayers.Event.stop(e);
            }
        },

        /**
         * APIMethod: loadContents
         * Set up the labels and divs for the control.
         * DOM elements for the base layers are not created here.
         */
        loadContents: function() {
            OpenLayers.Element.addClass(this.div, "gpMainDivClass");

            OpenLayers.Event.observe(
                this.div,
                "dblclick",
                OpenLayers.Function.bindAsEventListener(this.ignoreEvent,this)
            );
            OpenLayers.Event.observe(
                this.div,
                "click",
                OpenLayers.Function.bindAsEventListener(this.ignoreEvent,this)
            );
            OpenLayers.Event.observe(
                this.div,
                "mousedown",
                OpenLayers.Function.bindAsEventListener(this.mouseDown,this)
            );
            OpenLayers.Event.observe(
                this.div,
                "mouseup",
                OpenLayers.Function.bindAsEventListener(this.mouseUp,this)
            );

            // layers list div
            this.layersDiv= document.createElement("div");
            this.layersDiv.id= this.id+"_layersDiv";
            this.layersDiv.className= "gpLayersClass";

            if (!this.outsideViewport) {
                this.dataLbl= document.createElement("div");
                this.dataLbl.id= this.id+"_layer_title";
                this.dataLbl.innerHTML= OpenLayers.i18n(this.getDisplayClass()+'.label');
                this.dataLbl.className= "gpControlLabelClass";
                OpenLayers.Event.observe(
                    this.dataLbl,
                    "click",
                    OpenLayers.Function.bindAsEventListener(this.clickOnLabel,this)
                );
                OpenLayers.Event.observe(
                    this.dataLbl,
                    "dblclick",
                    OpenLayers.Function.bindAsEventListener(this.clickOnLabel,this)
                );
                this.layersDiv.appendChild(this.dataLbl);
            }

            this.dataLayersDiv= document.createElement("div");
            this.dataLayersDiv.id= this.id+"_layers_container";
            this.dataLayersDiv.className= "gpGroupDivClass";
            this.layersDiv.appendChild(this.dataLayersDiv);
            if (this.outsideViewport) {
                this.dataLayersDiv.style.display= 'block';
            }

            this.div.appendChild(this.layersDiv);
        },

        /**
         * APIMethod: clickOnLabel
         * In case of double click on the label, open or close it.
         *
         * Parameters:
         * evt - {Event} the browser event
         */
        clickOnLabel: function(evt) {
            var minimize= this.dataLayersDiv.style.display=="block";
            this.showControls(minimize);
            this.ignoreEvent(evt);
        },

        /**
         * Constant: CLASS_NAME
         * {String} *"Geoportal.Control.TreeLayerSwitcher"*
        */
        CLASS_NAME: "Geoportal.Control.TreeLayerSwitcher"
    });

    /*
     * Copyright (c) 2008-2010 Institut National de l'information Geographique et forestiere France, released
     * under the BSD license.
     */
    /*
     * AT.requires Geoportal/Control/LayerSwitcher.js
     */
    /**
     * Class: Geoportal.Control.GetLegendGraphics
     * Layer switcher class that display layer's legend.
     *
     * The control's structure is as follows :
     *
     * (start code)
     * <div id="#{id}" class="gpControlGetLegendGraphics olControlNoSelect gpLegendMainDivClass">
     *   <div id="#{id}_layersDiv" class="gpLegendLayersClass">
     *     <div id="#{id}_layer_title" class="gpControlLegendLabelClass"></div>
     *     <div id="#{id}_layers_container" class="gpLegendGroupDivClass">
     *       <div id="#{id}_#{layer.id} class="gpLegendLayerDivClass(|Aggregate|Aggregated)">
     *         <div class="gpLegendLayerNameGroupDivClass">
     *           <span id="label_#{layer.id}" class="gpLegendLayerSpanClass(|Aggregate|Aggregated)">name</span>
     *         </div>
     *       </div>
     *     </div>
     *   </div>
     * </div>
     * (end)
     *
     * Inherits from:
     * - {<Geoportal.Control.LayerSwitcher>}
     */
    Geoportal.Control.GetLegendGraphics= OpenLayers.Class( Geoportal.Control.LayerSwitcher, {
        /**
         * Property: layersMap
         * {Object} A map of layer's id and their rank in the layerStates array.
         *
         */
        layersMap: null,

        /**
         * Constructor: Geoportal.Control.GetLegendGraphics
         * Build the layer's legend switcher.
         *
         * Parameters:
         * options - {Object}
         */
        initialize: function(options) {
            //TODO: Lang/*.js :
            Geoportal.Lang.add({
                'gpControlGetLegendGraphics.label':{
                    'de':"Legenden",
                    'en':"Legends",
                    'es':"Leyendas",
                    'fr':"Légendes",
                    'it':"Leggende"
                },
                'gpControlGetLegendGraphics.noLegend':{
                    'de':"Keine legende definiert",
                    'en':"No legend defined",
                    'es':"Ninguna leyenda definido",
                    'fr':"Pas de légende définie",
                    'it':"No leggenda definito"
                }
            });
            Geoportal.Control.LayerSwitcher.prototype.initialize.apply(this, arguments);
            this.layersMap= {};
        },

        /**
         * APIMethod: destroy
         * The DOM elements handling base layers are not suppressed.
         */
        destroy: function() {
            this.layersMap= null;
            OpenLayers.Event.stopObservingElement(this.div);

            this.layerStates= [];
            this.preventControls= null;
            if (this.dataLbl) {
                OpenLayers.Event.stopObservingElement(this.dataLbl);
            }
            this.clearLayersArray("data");
            if (this.masterSwitcher) {
                this.masterSwitcher.events.unregister("groupopened",this,this.onGroupOpened);
                this.masterSwitcher.events.unregister("groupclosed",this,this.onGroupClosed);
                this.masterSwitcher= null;
            }
            if (this.map) {
                this.map.events.un({
                    "addlayer": this.redraw,
                    "changelayer": this.redraw,
                    "changebaselayer": this.redraw,
                    "removelayer": this.removeLayer,
                    scope:this});
            }

            Geoportal.Control.prototype.destroy.apply(this, arguments);
        },

        /**
         * APIMethod: setMap
         * Register events and set the map.
         *
         * Parameters:
         * map - {<OpenLayers.Map>}
         */
        setMap: function(map) {
            Geoportal.Control.prototype.setMap.apply(this, arguments);

            this.map.events.on({
                "addlayer": this.redraw,
                "changelayer": this.redraw,
                "changebaselayer": this.redraw,
                "removelayer": this.removeLayer,
                scope: this});
            if (this.masterSwitcher) {
                this.masterSwitcher.events.register("groupopened",this,this.onGroupOpened);
                this.masterSwitcher.events.register("groupclosed",this,this.onGroupClosed);
            }
        },

        /**
         * Method: onGroupOpened
         * Callback when layer switcher raises "groupopened" event.
         *
         * Parameters:
         * evt - {Event} event fired.
         *      evt.state contains information about the opened aggregate.
         */
        onGroupOpened: function(evt) {
            if (evt==null) { return; }
            OpenLayers.Event.stop(evt);
            var rank= this.layersMap[evt.state.id];
            this.dataLayers[rank].inputElem.style.display= '';
            this.dataLayers[rank].unfolded= this.layerStates[rank].unfolded= true;
            var layers= this.dataLayers[rank].layer.layers;
            for (var i= 0, l= layers.length; i<l; i++) {
                this.dataLayers[this.layersMap[layers[i].id]].inputElem.style.display= '';
            }
        },

**Scarab Aware** · 15/05/2013, 09h15

Partie 2 :

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
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
        /**
         * Method: onGroupClosed
         * Callback when layer switcher raises "groupclosed" event.
         *
         * Parameters:
         * evt - {Event} event fired.
         *      evt.state contains information about the closed aggregate.
         */
        onGroupClosed: function(evt) {
            if (evt==null) { return; }
            OpenLayers.Event.stop(evt);
            var rank= this.layersMap[evt.state.id];
            var layers= this.dataLayers[rank].layer.layers;
            for (var i= 0, l= layers.length; i<l; i++) {
                this.dataLayers[this.layersMap[layers[i].id]].inputElem.style.display= 'none';
            }
            this.dataLayers[rank].inputElem.style.display= 'none';
            this.dataLayers[rank].unfolded= this.layerStates[rank].unfolded= false;
        },

        /**
         * APIMethod: clearLayersArray
         * User specifies either "base" or "data". we then clear all the
         *     corresponding listeners, the div, and reinitialize a new array.
         *
         * Parameters:
         * layersType - {String}
         */
        clearLayersArray: function(layersType) {
            this[layersType + "LayersDiv"].innerHTML= "";
            this[layersType + "Layers"]= [];
        },

        /**
         * APIMethod: redraw
         *  Goes through and takes the current state of the Map and rebuilds the
         *  control to display that state.  Show layers using folder tree display.
         *
         * Returns:
         * {DOMElement} A reference to the DIV DOMElement containing the control
         */
        redraw: function() {
            //if the state hasn't changed since last redraw, no need
            // to do anything. Just return the existing div.
            if (!Geoportal.Control.GetLegendGraphics.prototype.checkRedraw.apply(this,arguments)) {
                return this.div;
            }

            var i, j, l= this.map.layers.length;
            var layer;
            // Save state -- for checking layer if the map state changed.
            // We save this before redrawing, because in the process of redrawing
            // we will trigger more visibility changes, and we want to not redraw
            // and enter an infinite loop. Same for opacity changes.
            this.layerStates= [];
            this.layersMap= {};
            for (i= 0; i<l; i++) {
                layer= this.map.layers[i];
                // adding preventControls option to disallow some control's class by the user
                if (!layer.preventControls) {
                    layer.preventControls= {};
                }
                OpenLayers.Util.extend(layer.preventControls, this.preventControls);
                this.layerStates[i]= {
                    'displayInLayerSwitcher': layer.displayInLayerSwitcher,
                    'name': layer.name,
                    'visibility': layer.visibility,
                    'inRange': layer.inRange,
                    'id': layer.id,
                    'unfolded': this.dataLayers && this.dataLayers[i]? this.dataLayers[i].unfolded : undefined
                };
                this.layersMap[layer.id]= i;
            }

            //clear out previous layers, build clean array :
            this.clearLayersArray("data");
            this.dataLayers= [];
            for (i= 0; i<l; i++) {
                this.dataLayers.push({});
            }

            var containsOverlays= false;

            var layers= this.map.layers.slice();
            var groupDiv= this.dataLayersDiv;
            var lup= false, ldown= false;
            for (i= l-1; i>=0; i--) {
                // don't want baseLayers ...
                if (layers[i].displayInLayerSwitcher && !layers[i].baseLayer) {
                    containsOverlays= true;
                    layer= layers[i];

                    var infos= this.drawLayer(layers,l,i,this.layerStates[i]);
                    // is the aggregate open ?
                    if (layer.layers && this.layerStates[i].unfolded!==true) {
                        infos.elem.style.display= 'none';
                    }
                    groupDiv.appendChild(infos.elem);

                    this.dataLayers[i]= {
                        'layer': layer,
                        'inputElem': infos.elem,
                        'legend': infos.legend,
                        'labelSpan': infos.span,
                        'isAnAggregate': layer.layers!=null,
                        'isAggregated': false,
                        'unfolded': layer.layers!=null? this.layerStates[i].unfolded : undefined
                    };

                    if (layer.layers!=null) {
                        // display aggregation's content
                        var innerLayers= layer.layers.slice();
                        var ll= innerLayers.length;
                        for (var ii= ll-1; ii>=0; ii--) {
                            var lyr= innerLayers[ii];
                            var rank= this.layersMap[lyr.id];
                            var innerInfos= this.drawLayer(innerLayers,ll,ii,this.layerStates[rank]);
                            // is the aggregate open ?
                            if (this.layerStates[i].unfolded!==true) {
                                innerInfos.elem.style.display= 'none';
                            }
                            groupDiv.appendChild(innerInfos.elem);
                            // insert at the right rank (same as map's layers' rank !
                            this.dataLayers[rank]= {
                                'layer': lyr,
                                'inputElem': innerInfos.elem,
                                'legend': innerInfos.legend,
                                'labelSpan': innerInfos.span,
                                'isAnAggregate': false,
                                'isAggregated': true,
                                'unfolded': undefined
                            };
                        }
                    }
                }
            }

            if (!this.outsideViewport) {
                // if no overlays, don't display the overlay label
                this.dataLbl.style.display= containsOverlays? '' : 'none';
            }

            return this.div;
        },

        /**
         * Method: drawLayer
         * Build the layer's informations in the switcher.
         *
         * Parameters:
         * layers - {<OpenLayers.Layer>} the array of layers the current layer belongs to.
         * len - {Integer} total number of layers in the array.
         * rank - {Integer} the current layer's position within the array of layers.
         * state - {Object} the current layer's state.
         *
         * Returns:
         * {Object} An object {'elem', 'legend', 'span'} having the div
         * containing the layer's informations and its span.
         */
        drawLayer: function(layers,len,rank,state) {
            var layer= layers[rank];
            var checked= layer.getVisibility();
            var isAnAggregate= layer.layers!=null;
            var isAggregated= layer.aggregate!=null;
            var layerDiv= document.createElement("div");
            layerDiv.id= this.id+"_"+layer.id;
            layerDiv.className= "gpLegendLayerDivClass";
            if (isAnAggregate) {
                layerDiv.className+= "Aggregate";
            }
            if (isAggregated) {
                layerDiv.className+= "Aggregated";
            }
            layerDiv.checked= checked;

            var labelSpan= document.createElement("span");
            labelSpan.id= 'label_' + layer.id;
            var layerLab= OpenLayers.i18n(layer.name);
            // convert HTML entities to get the right length :
            var entityBuffer= document.createElement("textarea");
            entityBuffer.innerHTML= layerLab.replace(/</g,"&lt;").replace(/>/g,"&gt;");
            layerLab= entityBuffer.value;
            entityBuffer= null;
            labelSpan.innerHTML= layerLab;
            labelSpan.className= "gpLegendLayerSpanClass";
            if (isAnAggregate) {
                labelSpan.className+= "Aggregate";
            }
            if (isAggregated) {
                labelSpan.className+= "Aggregated";
            }
            if (!layer.inRange) {
                labelSpan.className+= "NotInRange";
            }
            layerDiv.appendChild(labelSpan);

            if (!isAnAggregate) {
                var layerLegend= document.createElement("div");
                layerLegend.id= 'legends_'+layer.id;
                layerLegend.className= "gpLegendLayerLegendsDivClass";
                if (layer.legends) {
                    for (var i=0, l= layer.legends.length; i<l; i++) {
                        var legend= layer.legends[i];
                        var img= document.createElement("img");
                        img.id= 'legend_' + i + '_' + (legend.style ||'') + '_' + layer.id;
                        img.src= legend.href.replace(/&amp;/g,'&');
                        if (legend.width && legend.height) {
                            img.width= legend.width;
                            img.height= legend.height;
                        }
                        if (legend.title) {
                            img.alt= legend.title;
                            img.title= legend.title;
                        }
                        img.vspace= img.hspace= 0;
                        layerLegend.appendChild(img);
                    }
                } else {
                    layerLegend.className+= "No";
                    var span= document.createElement("span");
                    span.id= 'nolegends_'+layer.id;
                    span.className= "gpLegendLayerNoLegend";
                    if (!layer.inRange) {
                        span.className+= "NotInRange";
                    }
                    span.innerHTML= OpenLayers.i18n('gpControlGetLegendGraphics.noLegend');
                    layerLegend.appendChild(span);
                }
                layerDiv.appendChild(layerLegend);
            }

            return {'elem':layerDiv, 'legend': layerLegend, 'span': labelSpan};
        },

        /**
         * APIMethod: loadContents
         * Set up the labels and divs for the control.
         * DOM elements for the base layers are not created here.
         */
        loadContents: function() {
            OpenLayers.Element.addClass(this.div, "gpLegendMainDivClass");

            OpenLayers.Event.observe(
                this.div,
                "dblclick",
                OpenLayers.Function.bindAsEventListener(this.ignoreEvent,this)
            );
            OpenLayers.Event.observe(
                this.div,
                "click",
                OpenLayers.Function.bindAsEventListener(this.ignoreEvent,this)
            );
            OpenLayers.Event.observe(
                this.div,
                "mousedown",
                OpenLayers.Function.bindAsEventListener(this.mouseDown,this)
            );
            OpenLayers.Event.observe(
                this.div,
                "mouseup",
                OpenLayers.Function.bindAsEventListener(this.mouseUp,this)
            );

            // layers list div
            this.layersDiv= document.createElement("div");
            this.layersDiv.id= this.id+"_layersDiv";
            this.layersDiv.className= "gpLegendLayersClass";

            if (!this.outsideViewport) {
                this.dataLbl= document.createElement("div");
                this.dataLbl.id= this.id+"_layer_title";
                this.dataLbl.innerHTML= OpenLayers.i18n(this.getDisplayClass()+'.label');
                this.dataLbl.className= "gpControlLegendLabelClass";
                OpenLayers.Event.observe(
                    this.dataLbl,
                    "click",
                    OpenLayers.Function.bindAsEventListener(this.clickOnLabel,this)
                );
                OpenLayers.Event.observe(
                    this.dataLbl,
                    "dblclick",
                    OpenLayers.Function.bindAsEventListener(this.clickOnLabel,this)
                );
                this.layersDiv.appendChild(this.dataLbl);
            }

            this.dataLayersDiv= document.createElement("div");
            this.dataLayersDiv.id= this.id+"_layers_container";
            this.dataLayersDiv.className= "gpLegendGroupDivClass";
            this.layersDiv.appendChild(this.dataLayersDiv);
            if (this.outsideViewport) {
                this.dataLayersDiv.style.display= 'block';
            }

            this.div.appendChild(this.layersDiv);
        },

        /**
         * Constant: CLASS_NAME
         * {String} *"Geoportal.Control.GetLegendGraphics"*
        */
        CLASS_NAME: "Geoportal.Control.GetLegendGraphics"
    });

    OpenLayers.Control.MouseWheel= OpenLayers.Class(OpenLayers.Control, {
        /**
         * APIProperty: handleRightClicks
         * {Boolean} Whether or not to handle right clicks. Default is false.
         */
        handleRightClicks: false,

        /**
         * Constructor: OpenLayers.Control.MouseWheel
         * Create a new mouse wheel control
         *
         * Parameters:
         * options - {Object} An optional object whose properties will be set on
         *                    the control
         */
        initialize: function(options) {
            this.handlers = {};
            OpenLayers.Control.prototype.initialize.apply(this, arguments);
        },

        /**
         * Method: destroy
         * The destroy method is used to perform any clean up before the control
         * is dereferenced.  Typically this is where event listeners are removed
         * to prevent memory leaks.
         */
        destroy: function() {
            this.deactivate();
            OpenLayers.Control.prototype.destroy.apply(this,arguments);
        },

        /**
         * Method: activate
         */
        activate: function() {
            this.handlers.wheel.activate();
            this.handlers.click.activate();
            return OpenLayers.Control.prototype.activate.apply(this,arguments);
        },

        /**
         * Method: deactivate
         */
        deactivate: function() {
            this.handlers.click.deactivate();
            this.handlers.wheel.deactivate();
            return OpenLayers.Control.prototype.deactivate.apply(this,arguments);
        },

        /**
         * Method: draw
         */
        draw: function() {
            // disable right mouse context menu for support of right click events
            if (this.handleRightClicks) {
                this.map.viewPortDiv.oncontextmenu= function () { return false;};
            }

            var clickCallbacks= {};
            var clickOptions= {
                'double': false,
                'stopDouble': false
            };
            this.handlers.click= new OpenLayers.Handler.Click(
                this, clickCallbacks, clickOptions
            );
            this.handlers.wheel= new OpenLayers.Handler.MouseWheel(
                this, {
                    "up"  : this.wheelUp,
                    "down": this.wheelDown
                });
            this.activate();
        },

        /**
         * Method: wheelChange
         *
         * Parameters:
         * evt - {Event}
         * deltaZ - {Integer}
         */
        wheelChange: function(evt, deltaZ) {
            var newZoom= this.map.getZoom() + deltaZ;
            if (!this.map.isValidZoomLevel(newZoom)) {
                return;
            }
            var size= this.map.getSize();
            var deltaX= size.w/2 - evt.xy.x;
            var deltaY= evt.xy.y - size.h/2;
            var newRes= this.map.baseLayer.getResolutionForZoom(newZoom);
            var zoomPoint= this.map.getLonLatFromPixel(evt.xy);
            var newCenter= new OpenLayers.LonLat(
                                zoomPoint.lon + deltaX * newRes,
                                zoomPoint.lat + deltaY * newRes );
            this.map.setCenter( newCenter, newZoom );
        },

        /**
         * Method: wheelUp
         * User spun scroll wheel up
         *
         * Parameters:
         * evt - {Event}
         */
        wheelUp: function(evt) {
            this.wheelChange(evt, 1);
        },

        /**
         * Method: wheelDown
         * User spun scroll wheel down
         *
         * Parameters:
         * evt - {Event}
         */
        wheelDown: function(evt) {
            this.wheelChange(evt, -1);
        },

        /**
         * Method: disableZoomWheel
         */
        disableZoomWheel: function() {
            this.zoomWheelEnabled= false;
            this.handlers.wheel.deactivate();
        },

        /**
         * Method: enableZoomWheel
         */
        enableZoomWheel: function() {
            this.zoomWheelEnabled= true;
            if (this.active) {
                this.handlers.wheel.activate();
            }
        },

        CLASS_NAME: "OpenLayers.Control.MouseWheel"
    });

    /**
     * APIFunction: enhancingHover
     * Change the background image of a {DOMElement} attached to a control when the mouse
     * is over the control's container to get a enhancing effect.
     *      The scope of the call is an object embeded in the control that
     *      supports :
     *      * mouseEvents : the listener (mouseover and mouseout events);
     *      * w, h : width and height of the control's container;
     *      * x, y : top and left absolute position of the control's container.
     *
     * Parameters:
     * evt - {<Event>} the current mouseover event.
     */
    Geoportal.Control.enhancingHover= function(evt) {
        if (!evt || !evt.element) { return; }
        if (this.enhanced===true) { return; }
        var elt= evt.element;
        this.enhanced= true;
        var bgi= OpenLayers.Element.getStyle(elt, 'background-image');
        elt.style.backgroundImage= 'none';
        var img= elt.ownerDocument.createElement('img');
        img.src= bgi.replace(/^\s*url\("?/,'').replace(/"?\)\s*$/,'');
        img.width= 2*this.w;
        img.height= 2*this.h;
        img.style.top= (-this.w/2)+"px";
        img.style.left= (-this.h/2)+"px";
        img.style.position= "relative";
        img.style.zIndex= 7000;
        this.mouseEvents.un({
            'mouseover': Geoportal.Control.enhancingHover
        });
        elt.appendChild(img);
        OpenLayers.Event.stop(evt);
    };

    /**
     * APIFunction: enhancingClean
     * Reset the control's container to the original layout.
     *
     * Parameters:
     * obj - {Object} the object embeded in the control for enhancing the background image.
     * elt - {DOMElement} the control's container.
     */
    Geoportal.Control.enhancingClean= function(obj, elt) {
        elt.style.backgroundImage= "";
        elt.innerHTML= "";
        obj.enhanced= false;
    };

    /**
     * APIFunction: enhancingOut
     * Change the background image of a {DOMElement} attached to a control when the mouse
     * is leaving the control's container to get the original rendering.
     *      For the scope, See <Geoportal.Control.enhancingHover>.
     *
     * Parameters:
     * evt - {<Event>} the current mouseover event.
     */
    Geoportal.Control.enhancingOut= function(evt) {
        if (!evt || !evt.element) { return; }
        var elt= evt.element;
        if (this.enhanced!==true) { return; }
        if (!((this.x<=evt.clientX && evt.clientX<this.x+this.w) &&
              (this.y<=evt.clientY && evt.clientY<this.y+this.h))) {
            Geoportal.Control.enhancingClean(this, elt);
            this.mouseEvents.on({
                'mouseover': Geoportal.Control.enhancingHover
            });
        }
        OpenLayers.Event.stop(evt);
    };

    /**
     * APIFunction: addEnhanceEffectOnControl
     * Add the enhancing effect on a basic control.
     *
     * Parameters:
     * control - {<OpenLayers.Control>} the control to enhance.
     */
    Geoportal.Control.addEnhanceEffectOnControl= function(control) {
        var pfDestroy= control.destroy;
        control.destroy= function() {
            if (this.enhance) {
                if (this.enhance.mouseEvents) {
                    this.enhance.mouseEvents.destroy();
                    this.enhance.mouseEvents= null;
                }
            }
            pfDestroy.apply(this,arguments);
        };
        var elt= control.getUI().getDom();
        var p= OpenLayers.Util.pagePosition(elt);
        control.enhance= {};
        control.enhance.mouseEvents= new OpenLayers.Events(control.enhance, elt, null, true);
        control.enhance.w= elt.clientWidth || parseInt(OpenLayers.Element.getStyle(elt, 'width'));
        control.enhance.h= elt.clientHeight || parseInt(OpenLayers.Element.getStyle(elt, 'height'));
        control.enhance.x= p[0];
        control.enhance.y= p[1];
        control.enhance.mouseEvents.on({
            'mouseover': Geoportal.Control.enhancingHover,
            'mouseout' : Geoportal.Control.enhancingOut
        });
    };

    /**
     * APIFunction: addEnhanceEffectOnPanel
     * Add the enhancing effect on controls embedded in a panel.
     *
     * Parameters:
     * panel - {<OpenLayers.Control.Panel>} the panel to modify.
     */
    Geoportal.Control.addEnhanceEffectOnPanel= function (panel) {
        var pfOnClick= OpenLayers.Control.Panel.prototype.onClick;
        panel.onClick= function(ctrl, evt) {
            if (ctrl.enhance) {
                Geoportal.Control.enhancingClean(ctrl.enhance, ctrl.getUI().getDom());
            }
            pfOnClick.apply(this,arguments);
            if (ctrl.enhance) {
                ctrl.enhance.mouseEvents.on({
                    'mouseover': Geoportal.Control.enhancingHover
                });
            }
        };
        for (var i= 0, l= panel.controls.length; i<l; i++) {
            var cntrl= panel.controls[i];
            var elt= cntrl.getUI().getDom();
            OpenLayers.Event.stopObservingElement(elt);
            Geoportal.Control.addEnhanceEffectOnControl(cntrl);
            OpenLayers.Event.observe( elt, "click",
                OpenLayers.Function.bind(panel.onClick, panel, cntrl));
            OpenLayers.Event.observe( elt, "dblclick",
                OpenLayers.Function.bind(panel.onDoubleClick, panel, cntrl));
            OpenLayers.Event.observe( elt, "mousedown",
                OpenLayers.Function.bindAsEventListener(OpenLayers.Event.stop));
        }
    };
    // ==========================================================================================================
    // add translations
    translate();
    // ==========================================================================================================
    //add translations
    translate(['legendFormGazetteer','fieldLblGazetteer','searchGazetteer']);
	viewer= new Geoportal.Viewer.Basic(
        "viewerDiv",                                // div id where to display dataset
        OpenLayers.Util.extend({                    // viewer parameters :
                nameInstance:'viewer',
                territory:'FXX',                    // map's area of interest
                //displayProjection:'IGNF:RGF93', // allowed display projections - could be an array of strings
                //proxy: '/geoportail/api/xmlproxy'+'?url='
            },
            window.gGEOPORTALRIGHTSMANAGEMENT===undefined?
                {apiKey:['z7c65psd75i0framb0ti52zg']}:gGEOPORTALRIGHTSMANAGEMENT // API configuration with regard to the API key
        )
    );
	
    if (!viewer) {
        OpenLayers.Console.error(OpenLayers.i18n('new.instance.failed'));
        return;
    }

    viewer.addGeoportalLayers([                    // load some available layers
        'ORTHOIMAGERY.ORTHOPHOTOS',
        'GEOGRAPHICALGRIDSYSTEMS.MAPS'],
        {
		'GEOGRAPHICALGRIDSYSTEMS.MAPS':{visibility:false},
	 global:{opacity:0.75}
        });
	viewer.div.style[OpenLayers.String.camelize('background-image')]= 'none';

    var olsLayer= new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
        'PositionOfInterest:OPENLS;Geocode',//layer name
        {
            maximumResponses:100,
            formatOptions: {
            },
            // define your own picto instead of default:
            marker:"http://maps.gstatic.com/intl/fr_fr/mapfiles/ms/icons/blue-dot.png"
        }
    );

    var gazetteer= new Geoportal.Control.LocationUtilityService.GeoNames(olsLayer, {
        // force drawLocation
        drawLocation:true,
        // suffix of all fields' form - suffixe des champs du formulaire
        id:'Gazetteer',
        outsideViewport:true,
        // place where to display results - endroit où lister les résultats
        resultDiv: OpenLayers.Util.getElement('resultsGazetteer'),
        fields:{
            'q0':'name',
            'c' :null,
            's' :'search',
            'w' :null
        },
        activate: function() {
            this.layer.selectCntrl.deactivate();
            this.layer.destroyFeatures();
            this.loadContent(OpenLayers.Util.getElement('gpSearch'));
            if (!this.layer.map) {
                this.map.addLayer(this.layer);
            }
            this.resultDiv.innerHTML= '';
            this.resultDiv.style.display= 'none';

            // turn auto-completion on :
            if (this.autoCompleteControl) {
                this.map.addControl(this.autoCompleteControl);
            }

        },
        deactivate: function() {
            this.layer.cleanQueries();
        },
        loadContent: function(form) {
            // add mapping :
            this.inputs[this.fields.q0]= OpenLayers.Util.getElement('nameGazetteer');
            this.buttons[this.fields.s]= OpenLayers.Util.getElement('searchGazetteer');
            // add listeners :
            var e= this.buttons[this.fields.s];
            OpenLayers.Event.observe(
                form,
                "keypress",
                OpenLayers.Function.bind(function(evt) {
                    if (evt.keyCode==13 || evt.keyCode==10) {
                        return this.onSearchClick.apply(this,[e,evt]);
                    }
                    return true;
                },this)
            );
            e.onclick= OpenLayers.Function.bind(this.onSearchClick,this,e);

            // turn auto-completion on :
            if (this.autoCompleteOptions) {
                this.autoCompleteControl= new Geoportal.Control.AutoComplete(
                    this.inputs[this.fields.q0],
                    OpenLayers.Util.extend({
                        url: this.getAutoCompleteUrl(),
                        type: this.countryCode
                    }, this.autoCompleteOptions)
                );
            }

        },
        closeForm: function() {
            this.layer.abortRequest();
            this.inputs[this.fields.q0].value= '';
            this.resultDiv.innerHTML= '';
            this.resultDiv.style.display= 'none';
        },
        //set appropriate zoom (instead of 10 ...)
        setZoom: Geoportal.Control.LocationUtilityService.GeoNames.setZoomForBDNyme,

        // turn auto-completion on :
        autoCompleteOptions: {}

    });
	gazetteer.countryCode= 'PositionOfInterest,StreetAddress';
    viewer.getMap().addControls([gazetteer]);
    gazetteer.activate();
    // ==========================================================================================================
	 viewer.getMap().addLayer(
	"KML",
	'Limite départementale',
	"./assets/dpt54.kml",
	{
		visibility:true,
		opacity:1
	}
); 
	viewer.getMap().addLayer(
	"KML",
	'photos crues 1983',
	"./assets/photos/p1983.kml",
	{
		visibility:false,
		opacity:1
	}
	);
	 viewer.getMap().addLayer(
	"KML",
	'Effondrements minier',
	"./assets/effminier/effminier.kml",
	{
		visibility:false,
		opacity:1
	}
);
	viewer.getMap().addLayer(
	"KML",
	'Mouvements de terrain',
	"./assets/mvt/mvt.kml",
	{
		legends:[{
            href:'http://imageshack.us/a/img708/9838/mvt.png'
        }],
		visibility:false,
		opacity:1
	}
);
	viewer.getMap().addLayer(
	"KML",
	"Couverture DECI",
	"./assets/deci/couverture.kml",
	{
		visibility:false,
		opacity:1		
	}
);
	viewer.getMap().addLayer(
	"KML",
	"Points d'eau DECI",
	"./assets/deci/deci.kml",
	
	{
		visibility:false,
		opacity:1		
	}
);
	viewer.getMap().addLayer(
	"KML",
	'Liste ETARE',
	"./assets/sdis54/sdis54.kml",
	{
		legends:[],
		visibility:false,
		opacity:1
	}
);
	
	viewer.getMap().addLayer(
	"KML",
	'Repères de crues',
	"./assets/reperes crues/reperes.kml",
	{
		legends:[],
		visibility:false,
		opacity:1
	}
	
	);
	viewer.getMap().addLayer(
	"KML",
	'Hydrographie de la Lorraine',
	"./assets/hydrolor2.kml",
	{
		legends:[],
		visibility:false,
		opacity:1
	}
);
	viewer.getMap().addLayer(
	"KML",
	'Réseau hydrique du Grand Nancy (CUGN)',
	"./assets/CUGN/cugnreso.kml",
	{
		legends:[],
		visibility:false,
		opacity:1
	}
);
	viewer.getMap().addLayer(
	"KML",
	'Etablissements recevant du public',
	"./assets/ERP/ERP.kml",
	{
		legends:[],
		visibility:false,
		opacity:1
	}
);
	viewer.getMap().addLayer(
	"KML",
	'Stations vigicrues',
	"./assets/vigicrue/stvigicrues.kml",
	{
		legends:[],
		visibility:false,
		opacity:1
	}
);
    viewer.getMap().addLayer(
	"KML",
	'Centres du SDIS54',
	"./assets/sdis54/sdis54.kml",
	{
		legends:[],
		visibility:false,
		opacity:1
	}
);
	viewer.getMap().addLayer(
	"KML",
	'Surface en eau',
	"./assets/sdis54/sdis54.kml", //à mettre à jour
	{
		legends:[],
		visibility:false,
		opacity:1
	}
);
viewer.getMap().addLayer(
	"KML",
	'Réseau hydrographique',
	"./assets/sdis54/sdis54.kml", //à mettre à jour
	{
		legends:[],
		visibility:false,
		opacity:1
	}
);

    // ==========================================================================================================
    /*Geoportal.Lang.add({

    });*/
    viewer.getMap().setCenterAtLonLat(6.291246,48.963230,9);
	
	viewer.getMap().addLayer(
        new Geoportal.Layer.Aggregate(
            'Missions photos aériennes de Crues',
            [
		new OpenLayers.Layer.Vector(
                    "Crues de 1983",
                   {
                        strategies: [new OpenLayers.Strategy.Fixed()] ,
						opacity :1,
						styleMap : new OpenLayers.StyleMap({'pointRadius': 5, fillColor: "red",
               fillOpacity: 0.5, strokeColor: "red", strokeOpacity : 0.5}),
			protocol : new OpenLayers.Protocol.HTTP({
			  url: "assets/Photos/p1983.kml",
			  format: new OpenLayers.Format.KML({
			    internalProjection: viewer.getMap().getProjection(),
			  })
		       })
	             } ),
		new OpenLayers.Layer.Vector(
                    "Crue de 1982",
                   {
                        strategies: [new OpenLayers.Strategy.Fixed()] ,
						opacity :1,
						styleMap : new OpenLayers.StyleMap({'pointRadius': 5, fillColor: "aqua",
               fillOpacity: 0.5, strokeColor: "aqua", strokeOpacity : 0.5}),
			protocol : new OpenLayers.Protocol.HTTP({
			  url: "assets/Photos/p1982.kml",
			  format: new OpenLayers.Format.KML({
			    internalProjection: viewer.getMap().getProjection(),
			  })
		       })
	             } ),
				 
				],
				{
                visibility: false,
                originators:[
                    {
                        logo:'SDIS 54',
                        pictureUrl:'http://www.klekoon.com/dematernet/illustration/88570_Logo%20SDIS54.jpg',
                        url:'http://www.sdis54.fr/index.php3'
                    },
                ]
            }
        ));
	viewer.getMap().addLayer(
        new Geoportal.Layer.Aggregate(
            'Autres crues de Meurthe et Moselle',
            [
		new OpenLayers.Layer.Vector(
                    "Crue de la Vezouze (2004)",
                   {
                        strategies: [new OpenLayers.Strategy.Fixed()] ,
						opacity :1,
						styleMap : new OpenLayers.StyleMap({'pointRadius': 0, fillColor: "aqua",
               fillOpacity: 0.5, strokeColor: "aqua", strokeOpacity : 0.5}),
			protocol : new OpenLayers.Protocol.HTTP({
			  url: "assets/autrescrues/Vezouze2004.kml",
			  format: new OpenLayers.Format.KML({
			    internalProjection: viewer.getMap().getProjection()
			  })
		       })
	             } ),
				new OpenLayers.Layer.Vector(
                    "Crue de la Vezouze (1998)",
                   {
                        strategies: [new OpenLayers.Strategy.Fixed()] ,
						opacity :1,
						styleMap : new OpenLayers.StyleMap({'pointRadius': 0, fillColor: "aqua",
               fillOpacity: 0.5, strokeColor: "aqua", strokeOpacity : 0.5}),
			protocol : new OpenLayers.Protocol.HTTP({
			  url: "assets/autrescrues/Vezouze98.kml",
			  format: new OpenLayers.Format.KML({
			    internalProjection: viewer.getMap().getProjection()
			  })
		       })
	             } ),
				new OpenLayers.Layer.Vector(
                    "Crue de 1983 hors Nancy",
                   {
                        strategies: [new OpenLayers.Strategy.Fixed()] ,
						opacity :1,
						styleMap : new OpenLayers.StyleMap({'pointRadius': 0, fillColor: "aqua",
               fillOpacity: 0.5, strokeColor: "aqua", strokeOpacity : 0.5}),
			protocol : new OpenLayers.Protocol.HTTP({
			  url: "assets/autrescrues/1983horsnancy.kml",
			  format: new OpenLayers.Format.KML({
			    internalProjection: viewer.getMap().getProjection()
			  })
		       })
	             } ),
				new OpenLayers.Layer.Vector(
                    "Crue du Madon (1996)",
                   {
                        strategies: [new OpenLayers.Strategy.Fixed()] ,
						opacity :1,
						styleMap : new OpenLayers.StyleMap({'pointRadius': 0, fillColor: "aqua",
               fillOpacity: 0.5, strokeColor: "aqua", strokeOpacity : 0.5}),
			protocol : new OpenLayers.Protocol.HTTP({
			  url: "assets/autrescrues/96Madon.kml",
			  format: new OpenLayers.Format.KML({
			    internalProjection: viewer.getMap().getProjection()
			  })
		       })
	             } ),
			new OpenLayers.Layer.Vector(
                    "Crue du Madon (1990)",
                   {
                        strategies: [new OpenLayers.Strategy.Fixed()] ,
						opacity :1,
						styleMap : new OpenLayers.StyleMap({'pointRadius': 0, fillColor: "aqua",
               fillOpacity: 0.5, strokeColor: "aqua", strokeOpacity : 0.5}),
			protocol : new OpenLayers.Protocol.HTTP({
			  url: "assets/autrescrues/90Madon.kml",
			  format: new OpenLayers.Format.KML({
			    internalProjection: viewer.getMap().getProjection()
			  })
		       })
	             } ),
			new OpenLayers.Layer.Vector(
                    "Crue de Lunéville (1988)",
                   {
                        strategies: [new OpenLayers.Strategy.Fixed()] ,
						opacity :1,
						styleMap : new OpenLayers.StyleMap({'pointRadius': 0, fillColor: "aqua",
               fillOpacity: 0.5, strokeColor: "aqua", strokeOpacity : 0.5}),
			protocol : new OpenLayers.Protocol.HTTP({
			  url: "assets/autrescrues/88lun.kml",
			  format: new OpenLayers.Format.KML({
			    internalProjection: viewer.getMap().getProjection()
			  })
		       })
	             } ),
				 new OpenLayers.Layer.Vector(
                    "Crue de la Seille (1981)",
                   {
                        strategies: [new OpenLayers.Strategy.Fixed()] ,
						opacity :1,
						styleMap : new OpenLayers.StyleMap({'pointRadius': 0, fillColor: "aqua",
               fillOpacity: 0.5, strokeColor: "aqua", strokeOpacity : 0.5}),
			protocol : new OpenLayers.Protocol.HTTP({
			  url: "assets/autrescrues/81seille.kml",
			  format: new OpenLayers.Format.KML({
			    internalProjection: viewer.getMap().getProjection()
			  })
		       })
	             } ),
				],
            {
                visibility: false,
                originators:[
                    {
                        logo:'SDIS 54',
                        pictureUrl:'http://www.klekoon.com/dematernet/illustration/88570_Logo%20SDIS54.jpg',
                        url:'http://www.sdis54.fr/index.php3'
                    },
                ]
            }
        ));
		
	viewer.getMap().addLayer(
        new Geoportal.Layer.Aggregate(
            'Années de crues de la Meurthe',
            [
                new OpenLayers.Layer.Vector(
                    "Crue de 2006",
                   {
                        strategies: [new OpenLayers.Strategy.Fixed()] ,
						opacity :1,
						styleMap : new OpenLayers.StyleMap({'pointRadius': 0, fillColor: "green",
               fillOpacity: 0.5, strokeColor: "green", strokeOpacity : 0.5}),
			protocol : new OpenLayers.Protocol.HTTP({
			  url: "assets/meurthecrues/2006.kml",
			  format: new OpenLayers.Format.KML({
			    internalProjection: viewer.getMap().getProjection()
			  })
		       })
	             } ),
				new OpenLayers.Layer.Vector(
                    "Crue de 1999",
                   {
                        strategies: [new OpenLayers.Strategy.Fixed()] ,
						opacity :1,
						styleMap : new OpenLayers.StyleMap({'pointRadius': 0, fillColor: "beige",
               fillOpacity: 0.5, strokeColor: "beige", strokeOpacity : 0.5}),
			protocol : new OpenLayers.Protocol.HTTP({
			  url: "assets/meurthecrues/1999.kml",
			  format: new OpenLayers.Format.KML({
			    internalProjection: viewer.getMap().getProjection()
			  })
		       })
	             } ),
				new OpenLayers.Layer.Vector(
                    "Crue de mai 1983",
                   {
                        strategies: [new OpenLayers.Strategy.Fixed()] ,
						opacity :1,
						styleMap : new OpenLayers.StyleMap({'pointRadius': 0, fillColor: "crimson",
               fillOpacity: 0.5, strokeColor: "crimson", strokeOpacity : 0.5}),
			protocol : new OpenLayers.Protocol.HTTP({
			  url: "assets/meurthecrues/mai1983.kml",
			  format: new OpenLayers.Format.KML({
			    internalProjection: viewer.getMap().getProjection()
			  })
		       })
	             } ),
				new OpenLayers.Layer.Vector(
                    "Crue de 1982",
                   {
                        strategies: [new OpenLayers.Strategy.Fixed()] ,
						opacity :1,
						styleMap : new OpenLayers.StyleMap({'pointRadius': 0, fillColor: "beige",
               fillOpacity: 0.5, strokeColor: "beige", strokeOpacity : 0.5}),
			protocol : new OpenLayers.Protocol.HTTP({
			  url: "assets/meurthecrues/1982.kml",
			  format: new OpenLayers.Format.KML({
			    internalProjection: viewer.getMap().getProjection()
			  })
		       })
	             } ),
				new OpenLayers.Layer.Vector(
                    "Crue de 1947",
                   {
                        strategies: [new OpenLayers.Strategy.Fixed()] ,
						opacity :1,
						styleMap : new OpenLayers.StyleMap({'pointRadius': 0, fillColor: "red",
               fillOpacity: 0.5, strokeColor: "red", strokeOpacity : 0.5}),
			protocol : new OpenLayers.Protocol.HTTP({
			  url: "assets/meurthecrues/1947.kml",
			  format: new OpenLayers.Format.KML({
			    internalProjection: viewer.getMap().getProjection()
			  })
		       })
	             } ),
				new OpenLayers.Layer.Vector(
                    "Crue de 1919",
                   { 
                        strategies: [new OpenLayers.Strategy.Fixed()] ,
						opacity :1,
						styleMap : new OpenLayers.StyleMap({'pointRadius': 0, fillColor: "orange",
               fillOpacity: 0.5, strokeColor: "orange", strokeOpacity : 0.5}),
			protocol : new OpenLayers.Protocol.HTTP({
			  url: "assets/meurthecrues/1919.kml",
			  format: new OpenLayers.Format.KML({
			    internalProjection: viewer.getMap().getProjection()
			  })
		       })
	             } ),
			],
      
            {
                visibility: false,
                originators:[
                    {
                        logo:'SDIS 54',
                        pictureUrl:'http://www.klekoon.com/dematernet/illustration/88570_Logo%20SDIS54.jpg',
                        url:'http://www.sdis54.fr/index.php3'
                    },
                ]
            }
        ));
    // ==========================================================================================================
       /* Geoportal.Lang.add({

    });*/
    var dpCntrl= new OpenLayers.Control.DragPan({
        type:OpenLayers.Control.TYPE_TOGGLE,
        uiOptions:{title:'olControlDragPan.title'}
    });
    var ziCntrl= new OpenLayers.Control.ZoomBox({
        uiOptions:{title:'olControlZoomBox.title'}
    });
    var zoCntrl= new OpenLayers.Control.ZoomOut({
        uiOptions:{title:'olControlZoomOut.title'}
    });
    var zxCntrl= new OpenLayers.Control.ZoomToMaxExtent({
        uiOptions:{title:'olControlZoomToMaxExtent.title'}
    });
    var nhCntrl= new OpenLayers.Control.NavigationHistory({
        uiOptions:{title:'olControl.NavigationHistory.title'},
        previousOptions:{
            uiOptions:{title:'olControlNavigationHistory.previous.title'}
        },
        nextOptions:{
            uiOptions:{title:'olControlNavigationHistory.next.title'}
        }
    });
	
    viewer.getMap().addControl(nhCntrl);
    var prCntrl= new Geoportal.Control.PrintMap();

    var queryableLayers=viewer.getMap().getLayersByClass("OpenLayers.Layer.WMS");
    for (var i=(queryableLayers.length-1);i>=0;i--){
        if (queryableLayers[i].queryable!=true){
            queryableLayers.splice(i);
        }
    }
    var wiCntrl= new OpenLayers.Control.WMSGetFeatureInfo({
        uiOptions:{title:'olControlWMSGetFeatureInfo.title'},
        queryVisible: true,
        layers: queryableLayers,
        maxFeatures: 10,
        infoFormat:'text/plain',
        eventListeners: {
            getfeatureinfo: function(evt) {
                //this===control
                var txt= '';
                if (typeof(evt.features)!='undefined') {
                    for (var i= 0, l= evt.features.length; i<l; i++) {
                        var T= Geoportal.Control.renderFeatureAttributes(evt.features[i]);
                        txt+= '<div class="gpPopupHead">' + T[0] + '</div>' +
                              '<div class="gpPopupBody">' + T[1] + '</div>';
                    }
                } else {
                    if (evt.text) {
                        var txt=
                            evt.object.infoFormat=='text/plain'?
                                '<div class="gpPopupBody">' +
                                    evt.text.replace(/[\r\n]/g,'<br/>').replace(/ /g,'&nbsp;') +
                                '</div>'
                            :   evt.text;
                    }
                }
                if (txt) {
                    this.map.addPopup(new OpenLayers.Popup.FramedCloud(
                        "chicken",
                        this.map.getLonLatFromPixel(evt.xy),
                        null,
                        Geoportal.Util.cleanContent(txt),
                        null,
                        true));
                }
            }
        }
    });
	
    var toolsPanel= new Geoportal.Control.Panel({
        div:OpenLayers.Util.getElement('outilsBar')
    });
    toolsPanel.addControls([
        dpCntrl,
        ziCntrl, zoCntrl, zxCntrl,
        nhCntrl.previous, nhCntrl.next,
        wiCntrl,
        prCntrl
    ]);
    toolsPanel.defaultControl= dpCntrl;
    viewer.getMap().addControl(toolsPanel);

    var mdCntrl= new Geoportal.Control.MeasureToolbar({
        div:OpenLayers.Util.getElement('mesuresBar'),
        displaySystem: (viewer.getMap().getProjection().getProjName()=='longlat'? 'geographic':'metric'),
        targetElement: OpenLayers.Util.getElement('mesures')
    });
    viewer.getMap().addControl(mdCntrl);

    var zwCntrl= new OpenLayers.Control.MouseWheel();
    viewer.getMap().addControl(zwCntrl);
    zwCntrl.activate();

    var lsCntrl= new Geoportal.Control.TreeLayerSwitcher({
        div:OpenLayers.Util.getElement('themes')
    });
    viewer.getMap().addControl(lsCntrl);
    lsCntrl.activate();

    var lgCntrl= new Geoportal.Control.GetLegendGraphics({
        //div:OpenLayers.Util.getElement('legends'),
        //masterSwitcher:lsCntrl
    });
    //viewer.getMap().addControl(lgCntrl);
    //lgCntrl.activate();

    var inCntrl= new Geoportal.Control.Information({
        div:OpenLayers.Util.getElement('informations'),
        displayProjections: viewer.allowedDisplayProjections,
        // prevent minimizing
        toggleControls:function(minimize) {
        }
    });
    viewer.getMap().addControl(inCntrl);
    inCntrl.activate();

    // default center and zoom location :
    viewer.getMap().setCenter(6.178368,49.580152,10);
	
    // enhancing additions :
    Geoportal.Control.addEnhanceEffectOnPanel(toolsPanel,[nhCntrl.previous, nhCntrl.next]);
    Geoportal.Control.addEnhanceEffectOnPanel(mdCntrl);
	
	var clickCtrlOpts= { 
	onSelect: selection,
	autoActivate: true
};
var layers= viewer.getMap().getLayersByName('Années de crues de la Meurthe') ;
var hoverCtrl= new OpenLayers.Control.SelectFeature(layers, clickCtrlOpts);
viewer.getMap().addControl(hoverCtrl);

}

/**
 * Function: loadAPI
 * Load the configuration related with the API keys.
 * Called on "onload" event.
 * Call <initMap>() function to load the interface.
 */
function loadAPI() {
    // wait for all classes to be loaded
    // on attend que les classes soient chargées
    if (checkApiLoading('loadAPI();',['OpenLayers','Geoportal','Geoportal.Viewer'])===false) {
        return;
    }

    // load API keys configuration, then load the interface
    // on charge la configuration de la clef API, puis on charge l'application
    Geoportal.GeoRMHandler.getConfig(['z7c65psd75i0framb0ti52zg'], null,null, {
        onContractsComplete: initMap
    });
}

// assign callback when "onload" event is fired
// assignation de la fonction à appeler lors de la levée de l'évènement
// "onload"
window.onload= loadAPI;

**gcebelieu** · 15/05/2013, 10h19

OK. Je n'y vois pas beaucoup plus clair, mais j'avancerais quelques pistes :

1. la couche correspondant à "Années de crues de la Meurthe" est de type OpenLayers.Layer.Aggregate et non de type OpenLayers.Layer.Vector. Or, le SelectFeature fonctionne sur des couches de type OpenLayers.Layer.Vector uniquement.

vous devriez donc tester avec, par exemple la couche "Crue de 2006" :

Code :

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

1
2
var layers= viewer.getMap().getLayersByName('Crue de 2006') ;

ou, comme je vous le suggérais avec toutes les couches de type OpenLayers.Layer.Vector en procédant ainsi :

Code :

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

1
2
3
4
5
6
7
8
var clickCtrlOpts= { 
	onSelect: selection,
	autoActivate: true
};
var vectorLayers= viewer.getMap().getLayersByClass('OpenLayers.Layer.Vector') ;
var hoverCtrl= new OpenLayers.Control.SelectFeature(vectorLayers, clickCtrlOpts);
viewer.getMap().addControl(hoverCtrl);

2. Si ça ne marche toujours pas, essayez de rajouter à la suite un hoverCtrl.activate() à tout hasard...

**Scarab Aware** · 15/05/2013, 11h38

D'accord, bon j'ai bien retenté de cette façon mais ça ne change toujours rien même avec le hoverCtrl.activate() en plus. A moins de devoir complètement le faire dans le code d'ajout de la couche ? J'ai encore testé quelques options la aussi au cas où mais aucune ne fonctionne.

J'ai tenté :
-hoverCtrl: new OpenLayers.Control.SelectFeature,
-hoverCtrl: true,
-Click: true,
-clickCtrlOpts: new OpenLayers.Control.SelectFeature(vectorLayers, clickCtrlOpts),

J'implémente entre le styleMap et le protocol :

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
                new OpenLayers.Layer.Vector(
                    "Crue de 2006",
                   {
                        strategies: [new OpenLayers.Strategy.Fixed()] ,
						opacity :1,
						styleMap : new OpenLayers.StyleMap({'pointRadius': 0, fillColor: "green",
               fillOpacity: 0.5, strokeColor: "green", strokeOpacity : 0.5}),
			   clickCtrlOpts: new OpenLayers.Control.SelectFeature(vectorLayers, clickCtrlOpts),
			protocol : new OpenLayers.Protocol.HTTP({
			  url: "assets/meurthecrues/2006.kml",
			  format: new OpenLayers.Format.KML({
			    internalProjection: viewer.getMap().getProjection()
			  })
		       })
	             } ),

Et là je met seulement les tests qui ne font pas disparaître le contrôle des couches ou la totalité de la carte. Est ce qu'il est possible que l'Aggregate ou autre chose puisse produire un blocage de fonction ?

**gcebelieu** · 15/05/2013, 16h22

OK, j'ai trouvé : si on reprend le code indiqué :

Code :

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

1
2
3
4
5
6
7
8
var clickCtrlOpts= { 
	onSelect: selection,
	autoActivate: true
};
var vectorLayers= viewer.getMap().getLayersByClass('OpenLayers.Layer.Vector') ;
var hoverCtrl= new OpenLayers.Control.SelectFeature(vectorLayers, clickCtrlOpts);
viewer.getMap().addControl(hoverCtrl);

il ne faut pas oublier de déclarer la fonction selection qui sera appelée lors du click !
Cela donne donc le code suivant à rajouter :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* fonction appelée lors du click sur un objet vecteur
* f - objet sélectionné lors du click
*/
function selection(f) {
  f.popup= new OpenLayers.Popup.FramedCloud(
		  "id",
		  f.geometry.getBounds().getCenterLonLat(),
		  new OpenLayers.Size(50,50),
		  "*** mettre ici le code html qui va s'afficher dans la popup et qui va contenir les propriétés de l'objet f ***"
		); 
  viewer.getMap().addPopup(f.popup);  
}

**Scarab Aware** · 16/05/2013, 14h41

OUF un grand OUF tiens

, merci vraiment beaucoup, enfin ça fonctionne

Et fait particulier, je dois mettre ce morceau juste après les paramètres du "var wiCntrl= new OpenLayers.Control.WMSGetFeatureInfo" pour que ça marche.

Dans le contexte ça donne :

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
var queryableLayers=viewer.getMap().getLayersByClass("OpenLayers.Layer.WMS");
    for (var i=(queryableLayers.length-1);i>=0;i--){
        if (queryableLayers[i].queryable!=true){
            queryableLayers.splice(i);
        }
    }
    var wiCntrl= new OpenLayers.Control.WMSGetFeatureInfo({
        uiOptions:{title:'olControlWMSGetFeatureInfo.title'},
        queryVisible: true,
        layers: queryableLayers,
        maxFeatures: 10,
        infoFormat:'text/plain',
        eventListeners: {
            getfeatureinfo: function(evt) {
                //this===control
                var txt= '';
                if (typeof(evt.features)!='undefined') {
                    for (var i= 0, l= evt.features.length; i<l; i++) {
                        var T= Geoportal.Control.renderFeatureAttributes(evt.features[i]);
                        txt+= '<div class="gpPopupHead">' + T[0] + '</div>' +
                              '<div class="gpPopupBody">' + T[1] + '</div>';
                    }
                } else {
                    if (evt.text) {
                        var txt=
                            evt.object.infoFormat=='text/plain'?
                                '<div class="gpPopupBody">' +
                                    evt.text.replace(/[\r\n]/g,'<br/>').replace(/ /g,'&nbsp;') +
                                '</div>'
                            :   evt.text;
                    }
                }
                if (txt) {
                    this.map.addPopup(new OpenLayers.Popup.FramedCloud(
                        "chicken",
                        this.map.getLonLatFromPixel(evt.xy),
                        null,
                        Geoportal.Util.cleanContent(txt),
                        null,
                        true));
                }
            }
        }
    });
	
	var clickCtrlOpts= { 
	onSelect: selection,
	autoActivate: true
};
var vectorLayers= viewer.getMap().getLayersByClass('OpenLayers.Layer.Vector') ;
var hoverCtrl= new OpenLayers.Control.SelectFeature(vectorLayers, clickCtrlOpts);
viewer.getMap().addControl(hoverCtrl);

/**
* fonction appelée lors du click sur un objet vecteur
* f - objet sélectionné lors du click
*/
function selection(f) {
  f.popup= new OpenLayers.Popup.FramedCloud(
		  "id",
		  f.geometry.getBounds().getCenterLonLat(),
		  new OpenLayers.Size(50,50),
		  "*** mettre ici le code html qui va s'afficher dans la popup et qui va contenir les propriétés de l'objet f ***"
		); 
  viewer.getMap().addPopup(f.popup);  
};

Maintenant quelques détails qui restent...Donc mon info-bulle apparaît bien mais ne se désactive pas si je clique en dehors de ma couche. Si j'en fais apparaître une autre, la première reste. Et pas moyen de mettre la main sur le paramètre de désactivation au clic.

J'ai tenté avec hover, toggle, Onunselect mais ça ne fait rien, donc quel est le paramètre de désélection ici ?

Autrement, j'ai une seconde question concernant ce passage : "*** mettre ici le code html qui va s'afficher dans la popup et qui va contenir les propriétés de l'objet f ***"
Pour les années de crues, à la rigueur je peux faire du getLayersByName et écrire couche par couche les infos mais pour les missions photos aériennes de crues c'est plus délicat...Donc, ma question est de savoir de quel type de code html il peut s'agir ?

**betechsud** · 16/05/2013, 15h05

J'ai tenté avec hover, toggle, Onunselect mais ça ne fait rien, donc quel est le paramètre de désélection ici ?

Moi j'ai utilisé le onUnselect et ça fonctionne.

voici un extrait de mon 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
35
36
37
38
39
40
41
42
43
44
45
function createPopup(feature)
{
   if (feature.attributes.indice < 0) return;
   var cent = centroides[feature.attributes.indice];
   var infoHtml =
      '<table style="font-family:Verdana,sans-serif;font-size:small;">' +
      '<tr><td style="font-size:medium;" align="center" colspan=2><a href="#" onclick="setNoDossier(&quot;' + cent.dossier + '&quot;); return false;"><b>' + cent.dossier + '</b></a></td></tr></table>';
   feature.popup = new OpenLayers.Popup.FramedCloud(
      "pop",
      feature.geometry.getBounds().getCenterLonLat(),
      null,
      infoHtml,
      null,
      true,
      function() {selControl.unselectAll();}
   );
   feature.popup.panMapIfOutOfView = false;
   feature.popup.keepInMap = true;
   feature.popup.minSize = new OpenLayers.Size(300, 150);
   feature.popup.maxSize = new OpenLayers.Size(500, 200);
   feature.popup.autoSize = true;
   viewer.getMap().addPopup(feature.popup, true);
}

function destroyPopup(feature)
{
   if (feature.attributes.indice < 0) return;
   feature.popup.destroy();
}

selControl = new OpenLayers.Control.SelectFeature(
   tabCentroides,
   {
      clickout: true,
      toggle: false,
      multiple: false,
      hover: false,
      onSelect: createPopup,
      onUnselect: destroyPopup
   }
);
tabCentroides = [];
viewer.getMap().addControl(selControl);
selControl.activate();

**Scarab Aware** · 17/05/2013, 08h30

Bah moi j'ai un onSelect: selection
Si je met onUnselect: deselection, ça fait disparaître le gestionnaire des couches. Même chose pour unselection ou unselected;
Avec onUnselect: selection, rien ne se passe
Si je tente de mettre quoique ce soit d'autre au onUnselect ça me fait la encore disparaître le gestionnaire.

Pour le code HTML que je dois mettre j'ai commencé par reprendre cette partie de votre code :

Code :

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

'<table style="font-family:Verdana,sans-serif;font-size:small;">'

Jusque là ça va, après je cherche pour l'intégration du dossier.

**gcebelieu** · 17/05/2013, 08h45

Envoyé par Scarab Aware

Bah moi j'ai un onSelect: selection
Si je met onUnselect: deselection, ça fait disparaître le gestionnaire des couches. Même chose pour unselection ou unselected;
Avec onUnselect: selection, rien ne se passe
Si je tente de mettre quoique ce soit d'autre au onUnselect ça me fait la encore disparaître le gestionnaire.

le problème est le même que précédemment :

quand on met onSelect: deselection (ou onSelect: toto), cela implique que l'on déclare une fonction deselection (ou toto) qui sera appelée lors de la "déselection" de l'objet. Cela donne, comme dans le code de betchesud :

Code :

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

1
2
3
4
5
6
function deselection(f) {
  if (f.popup) {
    f.popup.destroy() ;
  }
}

**Scarab Aware** · 17/05/2013, 11h14

Bon beh vala qui est bon, fonction déclarée et ça marche, merci à tous les deux.

Autrement pour le code HTML à mettre voici comment je procède :

Code :

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

1
2
3
4
5
6
7
8
9
10
function selection(f) {
  f.popup= new OpenLayers.Popup.FramedCloud(
		  "id",
		  f.geometry.getBounds().getCenterLonLat(),
		  new OpenLayers.Size(50,50),
		  '<table style="font-family:Verdana,sans-serif;font-size:small;">' +
      '<tr><td style="font-size:medium;" align="center" colspan=2><a href="#" onclick="API/assets(&quot;' + meurthecrues + '&quot;); return false;"><b>' + autrescrues + '</b></a></td></tr></table>';
		); 
  viewer.getMap().addPopup(f.popup);  
};

Mais ça ne me donne rien, une fois ceci mis le popup n'apparait plus. J'ai tenté de mettre : a href="OpenLayers.Layer.Vector" ou encore a href="kml" voir a href="API/assets"

Sur d'autres exemples j'en vois beaucoup avec .html, mais vous c'est de cette façon : onclick="setNoDossier("' + cent.dossier + '" ); return false;"><b>' + cent.dossier + '

Comment cela fonctionne ici ? Est ce que je peux lier à partir du répertoire assets ou dois je procéder d'une autre façon ?

Arborescence : rendre fonctionnel les popups pour le new OpenLayers.Layer.Vector

IGN API Géoportail

Discussions similaires

Partager

Partager