Discussion :

[etude_geo]

Bonjour,

Je cherche à sortir la barre d'opacité qui contrôle mon layer horto photo de la map.
Je voudrais la placer sous la carte, dans une div que je lui associe.

Je précise donc cette div lors de la création du control :

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
<script>
...
map.addControl(new Geoportal.Control.LayerOpacity(map.getLayersByName('ORTHOIMAGERY.ORTHOPHOTOS')[0],{div:OpenLayers.Util.getElement('opacite')}));
...
</script>

...
<table>
	<tr><td>
		<div id="viewerDiv"></div>
	</td></tr>
	<tr><td>
		Opacité : <div id="opacite"></div>
	</td></tr>
</table>

Le problème est que la barre et son curseur se positionnent tout en haut à gauche de la page au lieu de se positionner au niveau de la div.

Ci dessous le code html généré par le control qui montre que la div a bien été prise en compte :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<tr><td>
	Opacité : <div id="opacite" title="Règle de transparence" class="olControlNoSelect" unselectable="on" style="z-index: 1060; ">
 <div id="trackSlider_Geoportal.Layer.WMSC_65" class="gpControlLayerOpacityTrackSliderClass olControlNoSelect" unselectable="on" style="left: 0px; top: 3px; z-index: 1060; ">
  <div style="background-image: url(http://api.ign.fr/geoportail/api/js/1.3.0/theme/geoportal/img/bg_handle.gif); left: 0px; top: 3px; width: 50px; height: 5px; position: relative; background-repeat: no-repeat no-repeat; " id="SliderBase494"> 
  </div>
  <div id="SliderBaseHandle496" style="left: 46.5px; top: 1px; width: 7px; height: 11px; position: absolute; " class="gpControlSliderBaseHandle">
   <img id="SliderBaseHandle496_innerImage" style="width: 7px; height: 11px; position: relative; " src="http://api.ign.fr/geoportail/api/js/1.3.0/theme/geoportal/img/cursor.gif">
  </div>
 </div>
 <div id="Opacity_Geoportal.Layer.WMSC_65" class="gpControlLayerOpacityOpacityClass" title="100%">100%</div>
</div>
</td></tr>

Je ne trouve pas d'exemple. Faut-il redéfinir un style ?

Le style associé a la classe gpControlLayerOpacityTrackSliderClass donne un position:absolute au lieu de définir un position:relative.
Le fait de fixer une div de rattachement ne devrait-il pas passer automatiquement a position:relative ?

[zainab_k]

Bonjour,
Visiblement, la position ne se met pas automatiquement en "relative". Il faut donc modifier le style pour que ça marche:

Code :

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

1
2
3
4
#opacity{
	position:relative;
	width:75px;				
}

[etude_geo]

En effet, en définissant le style de la div, la barre se trouve bien déplacée sous la carte. Par contre le curseur se décale de quelques pixel vers le bas... et le label indiquant le pourcentage et carrément à droite de l'écran...

Il semble que la redéfinition des style soit plus compliquée, or je n'ai aucune compétence en la matière.

C'est assez étrange que l'API permette d'accrocher a une div plutôt que dans la carte, mais ne gère pas correctement les styles en fonction.

[dgrichard]

Il semble que la redéfinition des style soit plus compliquée, or je n'ai aucune compétence en la matière.

C'est juste des règles CSS à savoir manipuler

C'est assez étrange que l'API permette d'accrocher a une div plutôt que dans la carte, mais ne gère pas correctement les styles en fonction.

J'aimerai comprendre cette assertion :

L'API permet d'accrocher un contrôleur n'importe où, de définir sa classe, sa position, etc ... (En fait, c'est OpenLayers qui permet tout cela).

Quel est le problème ?

[etude_geo]

Il n'y a sans doute pas de problème donc.

Juste qu'il faudra que je monte en compétence en dev CSS.

Mon propos était plus de l’étonnement que le style appliqué (par Openlayer et non geoportail) lorsque l'on précise que l'on veux que le composant soit rendu dans une div spécifique, et non dans la carte, ne soit pas en position:relative.

Merci pour le temps passé sur ce sujet, je le clos.