Discussion :

[jrenard]

Bonjour,

Effectivement, je parlais bien de ces pictos.

De notre coté, nous avons un jeu de pictos proposé par défaut pour chaque outil, déclinés dans les trois thèmes de l'API: legacy (thème par défaut de la version actuelle 2.0.3), geoportal3 (thème par défaut de la future version 2.1.0), black. Il suffit de remplacer "geoportal" dans l'URL par le thème correspondant pour récupérer ces pictos (actuellement, le mot-clé "geoportal" pointe sur "legacy", puisque c'est le thème par défaut)

Si ces icônes se conviennent pas, nous n'en proposons pas d'autres par défaut. A l'utilisateur d'aller chercher (ou de créer lui-même) les icônes qui conviendront le mieux dans son design.

Si toutes les questions ont trouvé réponse, ne pas oublier de mettre le sujet en . Sinon, nous sommes là pour répondre aux dernières zones d'ombre qui pourraient rester

[Zebulon777]

Bon, ben, rien à faire, je n'arrive pas à changer les icônes.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// Ajout d'un bouton affichant un quadrillage cartographique
NouvelleIcone = "./Images/nouvelleicone.png";
var button2 = new OpenLayers.Control.Button({
	displayClass: "olControl",
	title: "Affiche un quadrillage cartographique avec latitude et longitude.",	
	externalGraphic:NouvelleIcone,
	trigger: function() {
		viewer.getMap().addControl(new Geoportal.Control.Graticule());	
	}
});
var tbx2= viewer.getMap().getControlsByClass('Geoportal.Control.NavToolbar')[0];
tbx2.addControls(button2);

[jrenard]

Je ne suis pas sûr que la propriété "externalGraphic" soit reconnue dans le constructeur de bouton OpenLayers.

A défaut, un moyen est - encore une fois - de modifier l'affichage CSS du bouton en Javascript. Par exemple (ici le bouton ajouté est sorti avec le numéro 620, à voir avec Firebug ce qu'il en est dans chaque exemple testé) :

Code :

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

1
2
3
4
var bouton = document.getElementById("OpenLayers.Control.Button_620");
bouton.style.width = "23px";
bouton.style.height = "23px";
bouton.style.backgroundImage = 'url("'+NouvelleIcone+'")';

C'est un bout de code minimaliste qui permet d'afficher une image de fond sur le bouton créé. Après, jouer avec les différentes propriétés CSS et leurs valeurs, ainsi qu'avec l'apparence de l'image de fond, pour obtenir le rendu graphique désiré.

[Zebulon777]

Aie aie aie, je n'arrive pas à le faire fonctionner, mais surtout, je viens de me rendre compte que dés que j'essayais d'appliquer la même chose à mes autres pages, ça ne fonctionnait plus.
Je crois que c'est du au fait que le nom du bouton change, ou du moins l'indice à la fin, il faudrait utiliser un autre référencement, non ?

Ce code ne fonctionne donc plus.

Code :

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

1
2
3
4
5
6
7
8
9
// Inversion des boutons ZoomIn et ZoomOut
var picto1 = document.getElementById("OpenLayers.Control.ZoomBox_34");
picto1.style.position = "relative";
picto1.style.left = "23px";

var picto2 = document.getElementById("OpenLayers.Control.ZoomOut_403");
picto2.style.position = "relative";
picto2.style.left = "-23px";

Sur ce code-ci, j'ajoute l'image, mais l'icone ne s'affiche pas. (C'est un PNG en 16px x 16px)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// Ajout d'un bouton affichant un quadrillage cartographique
WIconeQuadrillage = "./Images/cellule-inserer-tableau-icone-9655-16.png";
var button2 = new OpenLayers.Control.Button({
	displayClass: "olControl",
	title: "Affiche un quadrillage cartographique avec latitude et longitude.",	
	trigger: function() {
		viewer.getMap().addControl(new Geoportal.Control.Graticule());	
	}
});
button2.style.backgroundImage = 'url("'+WIconeQuadrillage+'")';
var tbx2= viewer.getMap().getControlsByClass('Geoportal.Control.NavToolbar')[0];
tbx2.addControls(button2);

Bouh, grosse cata, je viens de me rendre compte que j'avais ce problème d'indice aussi sur "gpControlLayerSwitcher"

Code :

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

1
2
3
4
	var WCartoucheCouche = document.getElementsByClassName("gpControlLayerSwitcher")[0];
// Permet de définir la largeur du gestionnaire de couche ici à 250px
	WCartoucheCouche.style.width = "225px";

Sur 2 de mes pages il y a ""gpControlLayerSwitcher_123" et ce "123" change !

[cmail]

il y a ""gpControlLayerSwitcher_123" et ce "123" change

Si je ne fais pas d'erreur, chaque fois qu'un identifiant "id" (voire des class) se termine par un chiffre, c'est que l'identification se fait d'une manière dynamique à la création du control. Et donc quand tu rajoutes un control, l'identifiant des autres controls (associés ou dépendants) voient leurs indices changer.
1/ Quand ta page sera stabilisée, ces indices ne changeront plus.
2/ Par contre, il faut être astucieux et persévérant quand tu construis ta page....
3/ Par ailleurs, souvent ces différents controls ont plusieurs class dont certaines peuvent être alors sollicités pour une modification css identique. A tester suivant les cas.
4/ Tu pourrais aussi créer une nouvelle class associée à ton control que tu manipuleras sans problème, mais là c'est un peu plus dur à coder...

[jrenard]

Pour éviter ce genre de désagrément à la construction de ta page, le mieux est dans ce cas de pointer les éléments par leurs noms de class et pas leurs noms d'identifiants. Les noms de classe sont figés et ne changeront pas, que ce soit lors de la construction de ta page ou même d'un exemple à l'autre.

Par exemple, ce code :

Code :

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

1
2
3
4
5
6
7
8
// Inversion des boutons ZoomIn et ZoomOut
var picto1 = document.getElementById("OpenLayers.Control.ZoomBox_34");
picto1.style.position = "relative";
picto1.style.left = "23px";

var picto2 = document.getElementById("OpenLayers.Control.ZoomOut_403");
picto2.style.position = "relative";
picto2.style.left = "-23px";

va devenir :

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
// Inversion des boutons ZoomIn et ZoomOut
var picto1 = document.getElementsByClassName("olControlZoomBoxItemInactive")[0];
picto1.style.position = "relative";
picto1.style.left = "23px";

var picto2 = document.getElementsByClassName("olControlZoomBoxItemActive")[0];
picto2.style.position = "relative";
picto2.style.left = "23px";

var picto3 = document.getElementsByClassName("olControlNavigationItemInactive")[0];
picto3.style.position = "relative";
picto3.style.left = "-23px";

var picto4 = document.getElementsByClassName("olControlNavigationItemActive")[0];
picto4.style.position = "relative";
picto4.style.left = "-23px";

A noter que le code est deux fois plus long car le nom de classe de l'outil change suivant s'il est activé ou non (contrairement à l'identifiant qui est invariant), et donc qu'il faut appliquer le style aux deux états.

A adapter ensuite à tous les bouts de code qui te sembleront utiles.

[jrenard]

Sur ce code-ci, j'ajoute l'image, mais l'icone ne s'affiche pas. (C'est un PNG en 16px x 16px)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// Ajout d'un bouton affichant un quadrillage cartographique
WIconeQuadrillage = "./Images/cellule-inserer-tableau-icone-9655-16.png";
var button2 = new OpenLayers.Control.Button({
	displayClass: "olControl",
	title: "Affiche un quadrillage cartographique avec latitude et longitude.",	
	trigger: function() {
		viewer.getMap().addControl(new Geoportal.Control.Graticule());	
	}
});
button2.style.backgroundImage = 'url("'+WIconeQuadrillage+'")';
var tbx2= viewer.getMap().getControlsByClass('Geoportal.Control.NavToolbar')[0];
tbx2.addControls(button2);

Peut-être un problème de chemin relatif vers l'image ?
Si ce n'est pas ça, serait-il possible d'avoir une impression d'écran pour constater le rendu visuel du bouton ?

[Zebulon777]

Concernant l'utilisation des classes : ça à l'air de fonctionner correctement, mais j'attends d'avoir modifier entièrement l'application.

Concernant l'image du bouton, voici une image :



C'est le bouton affiché au-dessus de la souris et lorsque j'ajoute la ligne button2.style.backgroundImage = 'url("'+WIconeQuadrillage+'")'; ça plante.

[jrenard]

"Ca plante" => est-ce juste que l'image ne s'affiche pas, ou bien y a-t-il un message d'erreur relevé dans la console ?

Si message d'erreur, merci de nous l'indiquer.

Si c'est juste l'image qui ne s'affiche pas, c'est sûrement dû au fait que le bouton doit au préalable être "déplié" pour avoir une dimension suffisante pour afficher l'image. Dasn ce cas, dans le code Javascript juste avant l'insertion du button2.style.backgroundImage, penser à insérer :

Code :

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

1
2
bouton2.style.width = "20px";
bouton2.style.height = "20px";

J'ai mis des valeurs indicatives pour être sûr que le picto 16x16 puisse être visible, après il faut jouer avec ces valeurs pour un rendu optimal.

[Zebulon777]

Il n'y a aucun message d'erreur, mais en supprimant la ligne, le bouton s'affiche comme dans l'image et en ajoutant la ligne, j'ai cette image.



De plus le programme s'arrête.

[jrenard]

Je viens de m'apercevoir que dans ma proposition de code du message juste au-dessus, j'ai appelé le bouton "bouton2" au lieu de "button2". En cas de copier-coller brutal, cela expliquerait l'absence de bouton et l'anomalie levée

[Zebulon777]

J'avais effectivement fait un copier/coller brutal

Mais malheureusement, ça ne change rien et je confirme bien que le code s’interrompt sur la ligne "button.style.backgroundImage = 'url("'+WIconeQuadrillage+'")';"

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
//Ajout d'un bouton permettant de recentrer la carte sur l'aéoport en cours de vuisualisation
WIconeQuadrillage = "./Images/Centrage.png";
var button = new OpenLayers.Control.Button({
	displayClass: "olControlZoomOnDefaut",
	title: "Centrage de la carte sur l'aéroport en cours de visualisation",	
	trigger: function() {
	map.setLonLatCenter(WLatLong.lon,WLatLong.lat,6);
	}
});
button.style.backgroundImage = 'url("'+WIconeQuadrillage+'")';
button.style.width = "30px";
button.style.height = "30px";
var tbx = viewer.getMap().getControlsByClass('Geoportal.Control.NavToolbar')[0];
tbx.addControls(button);

[jrenard]

OK, pigé le problème.
Avec un tel code, la console renvoie un message d'erreur à la première mise en forme rencontrée: "button.style is undefined". C'est logique puisque ce qui s'appelle ici button est un objet de la classe OpenLayers.Control.Button, et non un élément HTML sur lequel on pourrait appliquer un style.

La construction du bouton avec style spécifique se fait en deux étapes: d'abord la construction en elle-même via le constructeur OpenLayers.Control.Button, ensuite la récupération de l'élément HTML de ce bouton pour lui appliquer un style.

Ce qui donne le code 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
//Ajout d'un bouton permettant de recentrer la carte sur l'aéoport en cours de vuisualisation
WIconeQuadrillage = "./Images/Centrage.png";
var button = new OpenLayers.Control.Button({
	displayClass: "olControlZoomOnDefaut",
	title: "Centrage de la carte sur l'aéroport en cours de visualisation",	
	trigger: function() {
	map.setLonLatCenter(WLatLong.lon,WLatLong.lat,6);
	}
});
var tbx = viewer.getMap().getControlsByClass('Geoportal.Control.NavToolbar')[0];
tbx.addControls(button);

// Application d'un style au bouton
var buttonHTML = document.getElementsByClassName("olControlZoomOnDefautItemInactive")[0];
buttonHTML.style.backgroundImage = 'url("'+WIconeQuadrillage+'")';
buttonHTML.style.width = "30px";
buttonHTML.style.height = "30px";

[Zebulon777]

Bon, on y est presque...
En fait, je me suis rendu compte, grâce à Firebug, que le nom de la classe n'était pas le bon (sic).
J'espère toutefois que ça ne va pas changer en fonction des pages !

Mais il reste encore 2 petits problèmes :
- l'image n'est pas alignée comme les autres ?
- il y a un espèce de carré en dessous, alors que l'image est bien un PNG, transparent


En fait, il serait vraiment plus simple d'utiliser les icônes existantes, créées par l'IGN, mais est-ce qu'il y en a une liste quelque part ?

[jrenard]

Pour le carré en-dessous, c'est une application de style par défaut des boutons OpenLayers: une couleur de fond grisée, et une bordure de type "outset" pour donner une impression de relief. Pour supprimer cet effet général, il suffit donc de réinitialiser les deux propriétés CSS correspondantes :

Code :

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

1
2
buttonHTML.style.background = 'none';
buttonHTML.style.border = 'none';

Attention, l'annulation du background doit se faire avant de ré-attribuer une valeur à background-image (sinon l'image sera avalée dans la réinitialisation du background).
Ceci est indépendant de l’icône puisque c'est un style qui se place dessous cette icône.

En fait, je me suis rendu compte, grâce à Firebug, que le nom de la classe n'était pas le bon (sic).
J'espère toutefois que ça ne va pas changer en fonction des pages !

En principe le nom des classes est invariant, contrairement aux noms d'identifiants qui se voient concaténés un nombre calculé à la volée. Donc en se basant sur les noms de classe il ne devrait ps y avoir de mauvaise surprise.

[Zebulon777]

Impeccable. T'es un chef. Merci beaucoup pour ton aide et surtout pour ta patience.

Bon, maintenant, il faudrait pouvoir remonter légèrement le bouton, pour qu'il soit aligner avec les autres ?

[Zebulon777]

J'ai trouvé tout seul

J'ai ajouté ça :

Code :

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

1
2
3
4
B_CentreHTML.style.position = "relative";
B_CentreHTML.style.top = "-3px";
B_CentreHTML.style.left = "5px";

Mais maintenant, il survient un autre problème : j'essaye d'ajouter un autre bouton juste après et il ne veux rien savoir :

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

// Ajout d'un bouton affichant un quadrillage cartographique
WIconeGrille = "./Images/Grille.png";
var B_Grille = new OpenLayers.Control.Button({
	displayClass: "olControlZoomOnDefaut",
	title: "Affiche un quadrillage cartographique avec latitude et longitude.",	
	trigger: function() {
		viewer.getMap().addControl(new Geoportal.Control.Graticule());	
	}
});
var tbx2= viewer.getMap().getControlsByClass('Geoportal.Control.NavToolbar')[0];
tbx2.addControls(B_Grille);
// Application d'un style au bouton
B_GrilleHTML.style.background = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_GrilleHTML.style.border = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
var B_GrilleHTML = document.getElementsByClassName("olControlZoomOnDefautItemInactive")[0];
B_GrilleHTML.style.backgroundImage = 'url("'+WIconeGrille+'")';
B_GrilleHTML.style.width = "16px";
B_GrilleHTML.style.height = "16px";
B_GrilleHTML.style.position = "relative";
B_GrilleHTML.style.top = "-3px";
B_GrilleHTML.style.left = "5px";

[jrenard]

J'ai trouvé tout seul

Parfait ! J'aurais pas fait mieux. Le métier commence à rentrer

Pour la suite, j'y regarde demain.

[Zebulon777]

Yes, j'ai trouvé :

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
//// Ajout d'un bouton affichant un quadrillage cartographique
WIconeGrille = "./Images/Grille.png";
var B_Grille = new OpenLayers.Control.Button({
	displayClass: "olControlZoomOnDefaut",
	title: "Affiche un quadrillage cartographique avec latitude et longitude.",	
	trigger: function() {
		viewer.getMap().addControl(new Geoportal.Control.Graticule());	
	}
});
var tbx2 = viewer.getMap().getControlsByClass('Geoportal.Control.NavToolbar')[0];
tbx2.addControls(B_Grille);
// Application d'un style au bouton
var B_GrilleHTML = document.getElementsByClassName("olControlZoomOnDefautItemInactive")[1];
B_GrilleHTML.style.background = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_GrilleHTML.style.border = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_GrilleHTML.style.backgroundImage = 'url("'+WIconeGrille+'")';
B_GrilleHTML.style.width = "16px";
B_GrilleHTML.style.height = "16px";
B_GrilleHTML.style.position = "relative";
B_GrilleHTML.style.top = "-3px";
B_GrilleHTML.style.left = "9px";

Et tout fonctionne.

Merci encore pour ton aide.

Et c'est avec grand plaisir que je marque enfin ce sujet résolu et que je passe au suivant...