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";

[cmail]

Et le cas échéant, pour des div déterminés avec id (précis et unique): getElementById("id_unique") au lieu de getElementsByClassName("gpToolBoxClass")[0]

En jquery, par exemple : $(".gpToolBoxClass").css("width", "150px")

[jrenard]

Tout à fait, et comme c'est le cas pour trois des quatre éléments ciblés dans le code Javascript ci-dessus, cela peut conduire à une adapatation du code Javascript comme suit, avec le même résultat :

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.getElementById("toolbox22");
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.getElementById("Geoportal.Control.ToolBox_20_navbar");
outilsNavControl.style.height = "60px";
outilsNavControl.style.paddingLeft = "30px";
outilsNavControl.style.paddingTop = "10px";

var zoomBar = document.getElementById("Geoportal.Control.ToolBox_20_zoombar");
zoomBar.style.paddingLeft = "39px";
zoomBar.style.paddingTop = "10px";

Ou encore, pour les amateurs de JQuery :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$("#toolbox22").css("width", "150px");
$("#toolbox22").css("height", "250px");

$(".gpToolBoxContent").css("width", "148px");
$(".gpToolBoxContent").css("height", "230px");

$("#Geoportal.Control.ToolBox_20_navbar").css("height", "150px");
$("#Geoportal.Control.ToolBox_20_navbar").css("padding-left", "30px");
$("#Geoportal.Control.ToolBox_20_navbar").css("padding-top", "100px");

$("#Geoportal.Control.ToolBox_20_zoombar").css("padding-left", "39px");
$("#Geoportal.Control.ToolBox_20_zoombar").css("padding-top", "10px");

[cmail]

Jérémy,
Je me demande s'il ne serait pas une bonne chose d'avoir un nouveau chapitre "tutoriel css" dans les tutos de http://api.ign.fr/tutoriel?
Gros travail de rédaction pour IGN, et je ne sais si tu peux faire remonter l'idée à qui de droit, mais cela me paraîtrait utile. Non? Avant bien sûr d'un futur (et proche?) et très attendu "API géoportail pour les nuls" ?

[jrenard]

C'est une idée intéressante, à la limite près qu'il n'est théoriquement pas de notre ressort de former les gens au CSS. Il existe de très bons cours et tutoriels pour apprendre le CSS ainsi que son appel en Javascript.
Un tuto rapide sur comment modifier le CSS d'un composant de l'API, en pointant l'id de ce composant, en montrant un exemple de code Javascript à utiliser, en indiquant où le placer, à la rigueur. Quelque chose qui ressemble un peu au contenu de ce sujet en plus étoffé et plus formalisé.

[cmail]

Un tuto rapide sur comment modifier le CSS d'un composant de l'API, en pointant l'id de ce composant, en montrant un exemple de code Javascript à utiliser, en indiquant où le placer, à la rigueur. Quelque chose qui ressemble un peu au contenu de ce sujet en plus étoffé et plus formalisé.

Toujours d'accord avec toi. Bref, du css mais centré sur l'api. Rappeler aussi les différents thèmes, l'importance et la spécificité du chargement initial de style.min.css, voire les différents styles possibles suivant les medias ....

[Zebulon777]

Et comme toujours, de super explications claires...
Merci les gars.

Juste un petit défaut : lorsque je clique sur le bandeau "Outils" pour fermer le cartouche, ça laisse un cadre blanc, la carte ne se réaffiche pas à cet endroit ???

[jrenard]

Effectivement, c'est une petite erreur de ma part. Cela se passe dans le code suivant:

Code :

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

1
2
3
var cartouche = document.getElementById("toolbox22");
cartouche.style.width = "150px";
cartouche.style.height = "250px";

Dans ce morceau de code, on a forcé la largeur et la hauteur de tout le cartouche d'outils. Conséquence directe: lorsque l'on referme les div internes au cartouches, le cartouche garde sa hauteur ainsi définie et remplace l'espace laissé vide par du fond blanc.

Pour remédier à ça, il suffit de supprimer la ligne suivante:

Code :

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

cartouche.style.height = "250px";

En fait cette ligne n'est pas nécessaire dans le design de base puisque de toute façon les div internes ont une hauteur définie et la hauteur du cartouche total sera calculée à la volée. Donc dans le design de base, rien ne changera. En revanche, au clic, plus de hauteur forcée pour le cartouche, lequel peut ainsi se réduire comme voulu.

OK avec ça ?

[Zebulon777]

Génial !
Merci encore.

Et pour clore (j'espère) avec ce cartouche : comment y intégrer ce contrôle : viewer.getMap().addControl(new Geoportal.Control.PanPanel(), new OpenLayers.Pixel(745,200)); l'idéal serait de l'ajouter en dessous de la jauge de zoom ?

Question subsidiaire : comment ajouter une bulle d'aide à un contrôle ?
Edit : je me réponds pour que ça serve à tout le monde ; il suffit d'ajouter le code suivant :

Code :

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

title:"texte à afficher",

[jrenard]

Par défaut, le contrôle PanPanel va se placer en haut à gauche de la carte si on ne lui donne pas de paramètre OpenLayers.Pixel.
L'idée, c'est donc de regarder cette position par défaut, puis de regarder dans sa fenêtre l'écart en (X,Y) avec la position souhaitée (ce contrôle est positionnée en absolu, indépendamment des autres div). Sur l'exemple suivant, j'ai décalé dans mon cartouche d'outils ma barre de zoom vers la gauche pour laisser la place au contrôle PanPanel sur sa droite (en jouant sur le padding-left du div), et je calcule la translation nécessaire pour aller placer mon contrôle PanPanel à l'endroit désiré (en prenant comme repère le coin supérieur gauche du contrôle) :



J'en déduis le bon constructeur pour mon contrôle, avec une translation de (740,150) :

Code :

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

viewer.getMap().addControl(new Geoportal.Control.PanPanel(), new OpenLayers.Pixel(740,150));

J'obtiens alors le positionnement souhaité :



Reste une dernière manip à faire : le contrôle a été inséré de façon absolue, il est donc indépendant du cartouche d'outils => si on replie ce cartouche, le contrôle reste affiché. Si on veut donner l'illusion que le contrôle est intégré au cartouche, il faut lui ajouter un comportement Javascript. Le comportement est le suivant => au clic sur l'en-tête du cartouche (là où on trouve le label "outils"), si le cartouche se replie alors le contrôle doit disparaître, si le cartouche se déplie alors le contrôle doit apparaître.

On commence pour cela à surcharger un comportement onclick à la div d'en-tête du cartouche, à insérer à la fin de la fonction initMap() :

Code :

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

document.getElementById("nameOfBox23").onclick = affichePanPanel;

Puis on définit ailleurs dans le script la fonction associée, qui synchronise l'affichage du contrôle avec celui du cartouche :

Code :

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

1
2
3
4
5
6
7
8
9
function affichePanPanel() {
	var tools = document.getElementById("contenuTools25");
	var panPanel = document.getElementById("Geoportal.Control.PanPanel_620");
	if (tools.style.display == "none") {
		panPanel.style.display = "none";
	} else {
		panPanel.style.display = "block";
	}
}

En pointant à chaque fois les bons identifiants des éléments (les numéros risquent de changer suivant l'exemple).

[Zebulon777]

Bon, ça commence fort... Et bien sur, ça ne fonctionne pas, le contrôle ne disparait pas au clic sur le bandeau.
Fonctionné au premier coup, faut pas déconner, non plus

Par rapport à ton code, j'ai mis des getElementByClassName, en espérant ne pas m'être trompé dans le nom des classes.

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
// Procédure de personnalisation appelée dans le IniMap avant l'ajout des couches.
...
...
...
//// Ajout de 4 flèches permettant de se déplacer dans la carte.
viewer.getMap().addControl(new Geoportal.Control.PanPanel(), new OpenLayers.Pixel(750,70));
	
document.getElementsByClassName("gpControlLabelClass").onclick = affichePanPanel;

}

function affichePanPanel() {
	
alert("ici");	
	
	var tools = document.getElementByClassName("gpToolBoxContent");
	var panPanel = document.getElementByClassName("gpControlPanPanel");
	if (tools.style.display == "none") {
		panPanel.style.display = "none";
	} else {
		panPanel.style.display = "block";
	}
}

La ligne 6 est au milieu du InitMap, puisque dans la procédure de personnalisation, mais j'ai essayé de la mettre juste à la fin et ça ne change rien.
Quand je clic sur le bandeau le alert ne s'affiche pas, j'en déduis donc qu'il ne passe pas dans la procédure d'affichage, pourtant, je ne crois pas m'être trompé dans le nom des classes.

[jrenard]

Deux petites erreurs:
- le div ayant pour id "contenuTools25" a pour nom de classe "gpToolBoxContentContainer" et non "gpToolBoxContent"
- la fonction document.getElementsByClassName() a bien un "s" à "Elements" (un nom de classe n'est pas nécessairement unique dans une page HTML, on récupère potentiellement plusieurs éléments), et elle renvoie une liste. Il te faut donc sur cette liste récupérer le premier élément en faisant document.getElementByClassName("...")[0]

C'est cette deuxième erreur qui fait que la fonction affichePanPanel() ne se déclenche pas, car le onclick n'est aps défini sur un élément HMTL précis.

Le code corrigé devient donc :

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
// Procédure de personnalisation appelée dans le IniMap avant l'ajout des couches.
...
...
...
//// Ajout de 4 flèches permettant de se déplacer dans la carte.
viewer.getMap().addControl(new Geoportal.Control.PanPanel(), new OpenLayers.Pixel(750,70));
	
document.getElementsByClassName("gpControlLabelClass")[0].onclick = affichePanPanel; // ajout de [0] pour récupérer le premier élément de la liste

}

function affichePanPanel() {
	
alert("ici");	
	
	var tools = document.getElementsByClassName("gpToolBoxContent")[0]; // ajout d'un s à Elements et de [0] pour récupérer le premier élément de la liste
	var panPanel = document.getElementsByClassName("gpControlPanPanel")[0]; // ajout d'un s à Elements et de [0] pour récupérer le premier élément de la liste
	if (tools.style.display == "none") {
		panPanel.style.display = "none";
	} else {
		panPanel.style.display = "block";
	}
}

Ca devrait mieux marcher comme ça ;-)

[Zebulon777]

Il y a du mieux, la fonction est bien exécutée, mais les 4flèches ne disparaissent 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
//// Ajout de 4 flèches permettant de se déplacer dans la carte.
viewer.getMap().addControl(new Geoportal.Control.PanPanel(), new OpenLayers.Pixel(750,70));
document.getElementsByClassName("gpControlLabelClass")[0].onclick = affichePanPanel; // ajout de [0] pour récupérer le premier élément de la liste
}

function affichePanPanel() {
	
alert("ici");	
	
var tools = document.getElementsByClassName("gpToolBoxContent")[0]; // ajout d'un s à Elements et de [0] pour récupérer le premier élément de la liste
	var panPanel = document.getElementsByClassName("gpControlPanPanel")[0]; // ajout d'un s à Elements et de [0] pour récupérer le premier élément de la liste
	if (tools.style.display == "none")
	 {
		panPanel.style.display = "none";
	} else
	 {
		panPanel.style.display = "block";
	}
}

[jrenard]

Pour la raison simple que j'ai oublié de répercuter dans le code la correction sur l'erreur de nom de classe (le div ayant pour id "contenuTools25" a pour nom de classe "gpToolBoxContentContainer" et non "gpToolBoxContent"). Plus qu'à changer ça, et ça devrait marcher comme attendu.