Discussion :

[Zebulon777]

Bonjour à tous,

suite à une précédente discussion, je voudrai savoir comment modifier les cartouches et surtout "Outils" : modifier la hauteur et la largeur et y ajouter, tout en dessous, ça : viewer.getMap().addControl(new Geoportal.Control.PanPanel(), new OpenLayers.Pixel(700,10));

[cmail]

Tes différentes questions sur la présentation de l'interface de l'api renvoient à des questions CSS. Mais avant de modifier tes paramètres CSS, il faut repérer la div à modifier (soit par son id, soit par sa class). Cette première étape indispensable se fait via "l'inspecteur des éléments" de firebug (deuxième outil à gauche dans la barre d'outils). Chrome et IE ont des outils similaires.
Une fois que tu as les "identifiants" de ta div, tu modifies les css en question et "l'inspecteur des éléments" de firebug te facilite la tâche car les modifs sont en instantanée. Puis tu reportes tes modifs dans ton fichier de style .css. Tu peux aussi modifier tes styles via JS ou plus simplement pour moi via JQuery. Suivant tes connaissances (voire les effets recherchés), tu choisis entre ces 3 approches de modification...

[Zebulon777]

Oui, justement, j'essaye de faire ça via Javascript, mais sans succès pour le moment.
Je n'arrive pas à trouver les bonnes propriétés à modifier.

[cmail]

Le plus simple pour un "débutant" (je le suis encore!!) c'est de travailler directement et seulement sur le fichier .css (voir les tutoriels : http://general.developpez.com/cours/ ) en s'aidant de firebug, et de laisser la programmation js du css...

[Zebulon777]

Mouais, le plus simple pour moi serait de trouver les instructions en JS, mais pour le moment, je fais chou blanc.

[jrenard]

Pour modifier la mise en forme de la barre d'outils, on va devoir jouer sur le code CSS de plusieurs div. En image, on va interagir avec les div contenant:
- le cartouche d'outils, en rouge => div class="gpToolBoxClass"
- les outils dynamiques dans leur intégralité, en bleu => div class="gpToolBoxContent"
- les outils de contrôle et de navigation, en vert => div class="gpControlNavToolbar"
- la barre de zoom, en jaune => div class="gpZoomBarClass"



Première chose à faire, agrandir suffisamment le cartouche (encadré rouge) pour permettre le futur agrandissement de ses composants internes. On va donc ajouter les propriétés CSS suivantes à la classe .gpToolBoxClass (je mets ici des valeurs pour l'exemple, à chacun de faire comme il l'entend en fonction de ses besoins de design) :

Code :

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

1
2
3
4
.gpToolBoxClass {
  width: 150px; // A l'heure actuelle la valeur est de 72px
  height: 250px;
}

Ensuite, il faut agrandir la div contenant les outils (encadré bleu) pour qu'elle colle au cartouche. Pour cela, il faut lui attribuer une largeur inférieure de 2px et une hauteur inférieure de 20px (de manière à préserver le designe et les petits bordures blanches) :

Code :

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

1
2
3
4
.gpToolBoxContent {
  width: 148px;
  height: 230px;
}

Ensuite, vient ce qui nous intéresse le plus, à savoir la barre d'outils de navigation et de contrôle (encadré vert). On lui attribue une hauteur de manière à l'agrandir pour laisser la place pour d'éventuels nouveaux outils. Attention: plus on va agrandir cette barre, plus la div contenant la barre de zoom, située juste en-dessous, sera tassée, au risque de voir disparaître une partie de cette barre de zoom. C'est là qu'il faut revenir adapter la hauteur du cartouche général (fixée ici pour l'instant à 150px) pour un affichage optimal. Pour des questions de design, on peut aussi jouer sur les marges internes pour recentrer les pictos :

Code :

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

1
2
3
4
5
.gpControlNavToolBar {
  height: 60px;
  padding-left: 30px;
  padding-top: 10px;
}

Enfin, on va s'occuper de la barre de navigation (encadré jaune), pour la recentrer suite aux agrandissements effectués. On va pour cela jouer sur les marges internes :

Code :

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

1
2
3
4
.gpZoomBarClass {
  padding-left: 39px; // la valeur correspond ici à l'agrandissement opéré sur le cartouche (150-72=78px) divisé par deux pour avoir une marge équivalente à droite et à gauche
  padding-top: 10px;
}

Avec les ajouts de CSS que je viens de détailler, voilà de mon coté le design que j'obtiens pour ma barre d'outils :

[jrenard]

En termes de code Javascript, pour en arriver au même rendu, voilà la code à insérer à la fin de la fonction initMap(). C'est exactement le même fonctionnement que les modifs CSS détaillées dans le message précédent, mais en appel direct à l'ouverture de la carte.

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
var cartouche = document.getElementsByClassName("gpToolBoxClass")[0];
cartouche.style.width = "150px";
cartouche.style.height = "250px";

var outils = document.getElementsByClassName("gpToolBoxContent")[0];
outils.style.width = "148px";
outils.style.height = "230px";

var outilsNavControl = document.getElementsByClassName("gpControlNavToolbar")[0];
outilsNavControl.style.height = "60px";
outilsNavControl.style.paddingLeft = "30px";
outilsNavControl.style.paddingTop = "10px";

var zoomBar = document.getElementsByClassName("gpZoomBarClass")[0];
zoomBar.style.paddingLeft = "39px";
zoomBar.style.paddingTop = "10px";