Discussion :

[cmail]

Un petit problème que je traine depuis longtemps... Que Jérémy saura m'expliquer!

Je souhaite mettre le Control.MeasureToolbar dans une div particulière (par exemple #over)

En écrivant:

Code :

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

1
2
3
4
5
6
7
8
9
var tbx = viewer1.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];
var measurebar = new Geoportal.Control.MeasureToolbar(
	{div: OpenLayers.Util.getElement(tbx.id+'_measure'),
		targetElement: OpenLayers.Util.getElement(tbx.id+'_meares')
	}
);
viewer1.getMap().addControl(measurebar);    
$("#over").html($(".gpControlMeasureToolbar"));

J'ai bien mes boutons dans #over, mais .gpControlMeasureToolbarResult reste attaché à Control.ToolBox

J'arrive à avoir .gpControlMeasureToolbar et .gpControlMeasureToolbarResult dans #over avec :

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 tbx = viewer1.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];
var measurebar = new Geoportal.Control.MeasureToolbar(
	{div: OpenLayers.Util.getElement(tbx.id+'_measure'),
		targetElement: OpenLayers.Util.getElement(tbx.id+'_meares')
	}
);
viewer1.getMap().addControl(measurebar);
 
var toolbar = new OpenLayers.Control.Panel({
			displayClass : 'cmToolbar',
			id : 'id_cmToolbar'
		});
	viewer1.getMap().addControl(toolbar);
	toolbar.addControls([tbx]);
	$("#over").html($("#id_cmToolbar"));

mais cela "double" la toolbox . En jouant sur les css, je rends invisible le double de la toolbox, mais cela n'est pas bien, et me gène...

Comment faire cela proprement?

[jrenard]

Si je comprends bien, tu veux afficher dans la même div #over à la fois les outils de mesure (.gpControlMeasureToolbar) et le résultat de la mesure (.gpControlMeasureToolbarResult) ?

Dans ce cas, la meilleure solution est de découper ta div en deux div distinctes, l'une pour accueillir les outils, l'autre pour accueillir le résultat :

Code :

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

1
2
3
4
<div id="over">
	<div id="over_tools"></div>
	<div id="over_result"></div>
</div>

La div #over_tools sert à accueillir les outils, de la même manière que la première version du code que tu proposes :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var tbx = viewer1.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];
var measurebar = new Geoportal.Control.MeasureToolbar(
	{div: OpenLayers.Util.getElement(tbx.id+'_measure'),
		targetElement: OpenLayers.Util.getElement(tbx.id+'_meares')
	}
);
viewer1.getMap().addControl(measurebar);    
$("#over_tools").html($(".gpControlMeasureToolbar"));

// Ajout de la barre de mesure
viewer1.getMap().addControl(measurebar);

La div #over_result sert à accueillir le résultat, en ajoutant la ligne suivante :

Code :

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

$("#over_result").html($(".gpControlMeasureToolbarResult"));

Après, tu as juste à gérer ton CSS pour que chacune de ces deux div internes s'affiche comme tu le souhaites suivant le souhait initial de design de la div englobante #over.

Avec ce code, sans aucun effort de mise en forme, voilà ce que j'obtiens (la div #over en bordure verte, les deux div internes en bordures rouges et bleues) :

[cmail]

Ce n'est pas possible d'être aussi nul! Je parle de moi.

Je n'ai pas mis en pratique, mais à la lecture de ton retour cela me semble maintenant évident.
Et dire que j'allais chercher des noeuds ....