API 1.3 Barre d'outil personnalisée

**trukker** · 19/02/2012, 14h27

Bonjour,

Je modifie mon code pour la version 1.3 et j'ai une barre d'outils d'édition personalisée.

Tous les boutons fonctionnent sauf le bouton de sauvegarde qui ne s'affiche pas.

Voici le code d'ajout de la barre d'outils avec en rouge le bouton qui ne s'affiche pas :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
var panelControls = [
			new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.Point, {
				title : 'ajout point',
				displayClass: 'olControlDrawFeaturePoint'
			}),
			new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.Path, {
				title : 'ajout ligne',
				displayClass: 'olControlDrawFeaturePath'
			}),
			new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.Polygon, {
				title : 'ajout polygone',
				displayClass: 'olControlDrawFeaturePolygon'
			}),
			new Geoportal.Control.DeleteFeature(vectors, {
				title: "Suppression",
				displayClass: 'olControlDeleteFeature'
			}),
			new OpenLayers.Control.Button({
				title: "Sauvegarde",
				name: "sauve",
				displayClass: 'olControlSaveFeatures',
				trigger: saveFeatures
			}),
			new OpenLayers.Control.DragFeature(vectors,{
				title: "Déplacement",
				displayClass: 'olControlDragFeature'
			}),
			new OpenLayers.Control.ModifyFeature(vectors,{
				title: "Modification",
				displayclass: 'olControlModifyFeature'				
			})
		];
		var toolbar = new OpenLayers.Control.Panel({
			displayClass: 'customEditingToolbar',
			allowDepress: true
		});
				
		toolbar.addControls(panelControls);
		viewer.getMap().addControl(toolbar);

Dans firebug, j'ai l'erreur :

Code :

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

1
2
3
4
5
this.labelContainer is null

this.labelContainer.nodeValue=OpenLayers.i18n(this.label||"")

http://depot.ign.fr/geoportail/api/j...talExtended.js Line 23074

Il semble manquer un label pour la traduction, mais je n'utilise pas la traduction.

**dgrichard** · 19/02/2012, 17h19

1/ Quant tu as un problème comme cela, il faut pointer sur http://depot.ign.fr/geoportail/api/j...b/Geoportal.js : comme cela tu charges (c'est plus long) l'API en mode décompressé et du coup on a la ligne où l'erreur se trouve ...

2/ OpenLayers.Control.Button est sensé générée un ... bouton, en fait il génère une DIV cliquable. Hors l'API 1.3 incorpore un mécanisme OpenLayers.UI (codé par l'IGN) qui dans ce cas code ... un bouton

Il lui faut donc le label ... Deux façons de procéder :

a/ Tu indiques à ce contrôleur de s'appuyer sur OpenLayers.UI de base et non sur OpenLayers.UI.Button :

Code :

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

1
2
3
4
5
6
7
8
new OpenLayers.Control.Button({
    uis:["OpenLayers.UI"],
    name:"sauve",
    title:"Sauvegarde",
    displayClass:"olControlSaveFeatures"
    trigger:saveFeatures
});

b/ Tu utilises les nouvelles fonctionalités dues à OpenLayers.UI :

Code :

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

1
2
3
4
5
6
7
8
9
new OpenLayers.Control.Button({
    uiOptions:{
        title:"Sauvegarde",
        label:"Sauvegarde",
        displayClass:"olControlSaveFeatures",
    },
    trigger:saveFeatures
});

L'idée d'OpenLayers.UI est de séparer l'affichage des contrôleurs de leur comportement ... C'est comme cela que l'on a bâti le second exemple sur les mobiles

Edit: pour tester:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
    <title>button</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
    <div id="map" style="width:400px;height:400px;"></div>
    <script type="text/javascript" src="http://depot.ign.fr/api/js/1.3/GeoportalStandard.js"><!-- --></script>
    <script type="text/javascript"><!--
    var viewer;

    function initMap() {
        viewer= new Geoportal.Viewer.Simple('map', OpenLayers.Util.extend({},gGEOPORTALRIGHTSMANAGEMENT));
        if (!viewer) { OpenLayers.Console.error('Échec à la création du visualiseur Géoportail.'); return; }
        viewer.addGeoportalLayers(['ORTHOIMAGERY.ORTHOPHOTOS:WMSC']);
        var p= new OpenLayers.Control.Panel();
        viewer.getMap().addControl(p);
        var b= new OpenLayers.Control.Button({
            uiOptions:{
                title:"XXX"
            },
            trigger:function() {
                alert(this.getUI().label);
            }
        });
        p.addControls([b]);
    }
    function loadAPI() {
        Geoportal.GeoRMHandler.getConfig(['CLEF_API'], null,null, {
            onContractsComplete:initMap
        });
    }
    window.onload= loadAPI;
    --></script>
</body>
</html>

**trukker** · 19/02/2012, 21h01

Bonsoir,

Tout d'abord merci pour la réponse rapide.

Quant tu as un problème comme cela, il faut pointer sur http://depot.ign.fr/geoportail/api/j...b/Geoportal.js

Je note.

J'ai essayé les 2 solutions, aucune ne fonctionne.

Erreur:

this.labelContainer is null
this.labelContainer.nodeValue= OpenLayers.i18n(this.label||'');
http://depot.ign.fr/geoportail/api/j...ersStandard.js (ligne 9974)

Même l'exemple complet que tu donne ne fonctionne pas.

Après avoir modifié :

Code :

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

<script type="text/javascript" src="http://depot.ign.fr/api/js/1.3/GeoportalStandard.js"><!-- --></script>

en :

Code :

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

<script type="text/javascript" src="http://depot.ign.fr/geoportail/api/js/1.3/Geoportal.js"><!-- --></script>

L'erreur retournée est :

this.labelContainer is null
this.labelContainer.nodeValue=OpenLayers.i18n(this.label||"")
http://depot.ign.fr/geoportail/api/js/1.3/Geoportal.js (ligne 16413)

J'ai essayé plusieurs petites modifications , mais aucune ne fonctionne.

**mga_geo** · 19/02/2012, 22h10

à cette adresse: http://atlasnw.free.fr/geoportail/ex...utton_1.3.html

**dgrichard** · 19/02/2012, 22h54

Ok, plus que probable que la version sur depot n'est pas la dernière

On va attendre demain et vous me tiendrez au courant

Edit: capture d'écran pour preuve

**trukker** · 19/02/2012, 23h06

Merci, à demain.

**trukker** · 20/02/2012, 21h50

Bonsoir,

Je suis pratiquement arrivé au résultat voulu.

1°) Ajout du bouton dans la barre d'outil (2 solutions) :

a/ Tu indiques à ce contrôleur de s'appuyer sur OpenLayers.UI de base et non sur OpenLayers.UI.Button :

Code :

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

1
2
3
4
5
6
7
new OpenLayers.Control.Button({
	uis:["OpenLayers.UI"],
	title:"Sauvegarde",
	displayClass:"olControlSaveFeatures",
	trigger:saveFeatures
}),

b/ Tu utilises les nouvelles fonctionalités dues à OpenLayers.UI :

Code :

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

1
2
3
4
5
6
7
8
new OpenLayers.Control.Button({
	uiOptions:{
		title:"Sauvegarde",
		displayClass:"olControlSaveFeatures"
	},
	trigger:saveFeatures
}),

Ces 2 solutions produisent le même code html :

Code :

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

1
2
<button id="OpenLayers.Control.Button_242" class="olControlSaveFeaturesItemInactive olControlNoSelect" unselectable="on" title="Sauvegarde" style="z-index: 1051;">Sauvegarde</button>

Du coup, je me demande si la solution (a) utilise vraiment l'ancienne fonctionalité OpenLayers.

2°) Modification du CSS :

Code :

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

1
2
3
4
5
6
7
8
.customEditingToolbar button {
	float: right;
	margin: 5px;
	width: 24px;
	height: 24px;
	border: none;
}

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
.olControlSaveFeaturesItemActive { 
	background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_save_on.gif") !important;
	background-repeat: no-repeat;
	background:transparent;
}

.olControlSaveFeaturesItemInactive { 
	background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_save_off.gif") !important;
	background-repeat: no-repeat;
	background:transparent;
}

Je sais qu'il faut que je change les liens vers les images des boutons.

Maintenant le petit détail qui ne fonctionne pas. Pour avoir une infobulle quand on passe la souris sur les icône de la barre d'outil, il faut ajouter l'attribut : title="CONTENU DE L'INFOBULLE", mais cela affiche le message de l'infobulle dans la barre d'outil. Voir la capture d'écran en bas de ce post.

La cause, c'est que l'attribut title est recopié dans le childNodes du bouton, en rouge dans le code html

Code :

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

1
2
<button id="OpenLayers.Control.Button_242" class="olControlSaveFeaturesItemInactive olControlNoSelect" unselectable="on" title="Sauvegarde" style="z-index: 1051;">Sauvegarde</button>

En supprimant ce texte mis en rouge, avec firebug, le résultat est parfait, mais je ne sais pas le supprimer définitivement.
L'autre solution est de ne pas mettre d'attribut title. Visuellement le résultat est parfait mais il n'y a plus d'infobulle quand on passe la souris sur l'icône.

Voilà, le problème n'est pas bloquant, juste visuel.

En bonus, le code complet de la barre d'outils :

Javascript :

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
var panelControls = [
	new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.Point, {
		title : 'ajout point',
		displayClass: 'olControlDrawFeaturePoint'
	}),
	new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.Path, {
		title : 'ajout ligne',
		displayClass: 'olControlDrawFeaturePath'
	}),
	new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.Polygon, {
		title : 'ajout polygone',
		displayClass: 'olControlDrawFeaturePolygon'
	}),
	new Geoportal.Control.DeleteFeature(vectors, {
		title: "Suppression",
		displayClass: 'olControlDeleteFeature'
	}),
	new OpenLayers.Control.Button({
		uiOptions:{
			title:"Sauvegarde",
			displayClass:"olControlSaveFeatures"
		},
		trigger:saveFeatures
	}),
	new OpenLayers.Control.DragFeature(vectors,{
		title: "Déplacement",
		displayClass: 'olControlDragFeature'
	}),
	new OpenLayers.Control.ModifyFeature(vectors,{
		title: "Modification",
		displayclass: 'olControlModifyFeature'				
	})
];
var toolbar = new OpenLayers.Control.Panel({
	displayClass: 'customEditingToolbar',
	allowDepress: true
});
		
toolbar.addControls(panelControls);
viewer.getMap().addControl(toolbar);

Le CSS :

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
/***************** CSS barre d'édition *****************/

.customEditingToolbar {
	float: right;
	right: 80px;
	height: auto; 
	width: 240px;
	background-color:#99ccff;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px; 
	border:1px solid white;
}

.customEditingToolbar div {
	float: right;
	margin: 5px;
	width: 24px;
	height: 24px;
}

.customEditingToolbar button {
	float: right;
	margin: 5px;
	width: 24px;
	height: 24px;
	border: none;
}

.ajoutLayerItemActive { 
	background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_addvectorlayer_on.gif") !important;
	background-repeat: no-repeat;
}

.ajoutLayerItemInactive { 
	background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_addvectorlayer_off.gif") !important;
	background-repeat: no-repeat;
}

.olControlNavigationItemActive { 
	background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_drag_on.gif") !important;
	background-repeat: no-repeat;
}

.olControlNavigationItemInactive { 
	background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_drag_off.gif") !important;
	background-repeat: no-repeat;
}

.olControlDragFeatureItemActive { 
	background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_moveFeature_on.gif") !important;
	background-repeat: no-repeat;
}

.olControlDragFeatureItemInactive { 
	background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_moveFeature_off.gif") !important;
	background-repeat: no-repeat;
}

.olControlModifyFeatureItemActive { 
	background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_modifyFeature_on.gif") !important;
	background-repeat: no-repeat;
}

.olControlModifyFeatureItemInactive { 
	background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_modifyFeature_off.gif") !important;
	background-repeat: no-repeat;
}

.olControlDrawFeaturePointItemInactive { 
	background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_drawPoint_off.gif") !important;
	background-repeat: no-repeat;
}

.olControlDrawFeaturePointItemActive { 
	background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_drawPoint_on.gif") !important;
	background-repeat: no-repeat;
}

.olControlDrawFeaturePathItemInactive { 
	background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_drawLine_off.gif") !important;
	background-repeat: no-repeat;
}

.olControlDrawFeaturePathItemActive { 
	background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_drawLine_on.gif") !important;
	background-repeat: no-repeat;
}

.olControlDrawFeaturePolygonItemInactive { 
	background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_drawPolygon_off.gif") !important;
	background-repeat: no-repeat;
}

.olControlDrawFeaturePolygonItemActive { 
	background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_drawPolygon_on.gif") !important;
	background-repeat: no-repeat;
}

.olControlDeleteFeatureItemActive { 
	background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_deleteFeature_on.gif") !important;
	background-repeat: no-repeat;
}

.olControlDeleteFeatureItemInactive { 
	background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_deleteFeature_off.gif") !important;
	background-repeat: no-repeat;
}

.olControlSaveFeaturesItemActive { 
	background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_save_on.gif") !important;
	background-repeat: no-repeat;
	background:transparent;
}

.olControlSaveFeaturesItemInactive { 
	background-image: url("http://api.ign.fr/geoportail/api/js/1.1/theme/geoportal/img/picto_save_off.gif") !important;
	background-repeat: no-repeat;
	background:transparent;
}

**dgrichard** · 20/02/2012, 22h37

Oops, copier/couiller (a), il ne faut surtout pas les "" pour forcer la classe à utiliser :

Code :

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

1
2
3
4
5
6
7
8
9
10
new OpenLayers.Control.Button({
    uis:[OpenLayers.UI],
    uiOptions:{
        title:"XXX"
    },
    trigger:function() {
        alert(this.getUI().label);
    }
}),

Bien sûr, il faut les styles olControlButtonItemInactive, olControlButtonItemActive ...

le code généré est alors :

Code :

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

1
2
<div id="OpenLayers.Control.Button_55" style="z-index: 1007;" class="olControlButtonItemInactive olControlNoSelect" unselectable="on" title="XXX"></div>

**trukker** · 21/02/2012, 00h09

Bonsoir,

Adapté à mon code comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
new OpenLayers.Control.Button({
	uis:[OpenLayers.UI],
	uiOptions:{
		title:"Sauvegarde",
		displayClass:"olControlSaveFeatures"
	},
	trigger:saveFeatures
}),

Cela fonctionne parfaitement , merci.

**mga_geo** · 21/02/2012, 08h41

Sur cette url http://atlasnw.free.fr/geoportail/gp...marc120216.gpx on doit avoir une barre d'outils en haut à droite.
La gestion du bouton actif n'est pas encore correcte, je dois certainement ajuster le css ...

**trukker** · 21/02/2012, 09h53

Bonjour,

J'ai regardé un peu ton code et il me semble que ton bouton soit créé correctement et qu'il faille plutôt regarder vers le trigger ->fonction de sauvegarde.

D'ailleur le CSS n'est là que pour faire joli, un bouton qui ne fait que quelque pixel et même invisible (sans image) fonctionne. De plus tu as l'infobulle au passage de la souris sur le bouton.

Pour en être tout à fait sûr essaie une fonction qui affiche une fenêtre d'alert, comme proposé par dgrichard quelques post plus haut.

J'aurai peu de temps pour répondre jusqu'à ce soir.

API 1.3 Barre d'outil personnalisée

IGN API Géoportail

Discussions similaires

Partager

Partager