Discussion :

[atlanthot]

Bonjour à tous, je suis novice sur l'API géoportail et j'ai besoin de plusieurs précisions notamment:

-Quelle est la manière la plus propre de customiser les controls ? En inspectant le code HTML je me suis aperçu que le style se trouvait directement sur les balises ce qui est un problème car je suis obligé de passer par !important dans mes css pour redéfinir les styles ( et c'est pas très propre )

-Comment récupérer le click sur un point ? Comment savoir sur quel point j'ai cliqué ? En effet mon application doit afficher une popup avec pas mal d'information concernant le dit point.

PS: j'ai regardé la doc mais honnêtement elle est un peu obscure...

[dgrichard]

-Quelle est la manière la plus propre de customiser les controls ? En inspectant le code HTML je me suis aperçu que le style se trouvait directement sur les balises ce qui est un problème car je suis obligé de passer par !important dans mes css pour redéfinir les styles ( et c'est pas très propre )

Certes, mais en chargeant d'abord les CSS de l'API, il suffit que la page inclue les nouvelles CSS après sans utilisation du !important

-Comment récupérer le click sur un point ? Comment savoir sur quel point j'ai cliqué ? En effet mon application doit afficher une popup avec pas mal d'information concernant le dit point.

PS: j'ai regardé la doc mais honnêtement elle est un peu obscure...

Mouais ...

[atlanthot]

Pas la peine d'être si perplexe ^^...
Par exemple le composant dont l'image de fond est la reglette ( ou la barre de zoom ) possède un background-image définit sur la balise dans le style="" là j'ai besoin du !important.

En revanche pour customiser proprement ce truc je galere car au depart l possède uniquement un id qui chez moi est "SliderBase40" et que des que je zoom / dezoom je ne sais pas pourquoi l'id change de façon dynamique... O_O à quoi ça sert je n'en sais rien mais c'est toujours un peu problématique...

Des idées ?

[dgrichard]

Pas la peine d'être si perplexe ^^...
Par exemple le composant dont l'image de fond est la reglette ( ou la barre de zoom ) possède un background-image définit sur la balise dans le style="" là j'ai besoin du !important.

Non, si les CSS de l'API sont chargées avant. Mais, il y a sûrement des composants dont le style est plutôt graver en dur. Dans ce cas, on les surcharge ...

En revanche pour customiser proprement ce truc je galere car au depart l possède uniquement un id qui chez moi est "SliderBase40" et que des que je zoom / dezoom je ne sais pas pourquoi l'id change de façon dynamique... O_O à quoi ça sert je n'en sais rien mais c'est toujours un peu problématique...

Il ne faut pas utiliser les ID, mais les classes CSS. Là aussi, il peut y avoir des trous dans la raquette ...

[atlanthot]

Ce sont justement ces trous qui font que je lutte... une idée pour résoudre ce genre de problème ? Mis à part utiliser du javascript pour réécrire ?

[dgrichard]

Ce sont justement ces trous qui font que je lutte... une idée pour résoudre ce genre de problème ? Mis à part utiliser du javascript pour réécrire ?

Faire du pas à pas
Quel est le problème exactement (ou quels sont, mais un par un) ?
sur quels composants ?
quels objectifs ?
une url pour jouer avec ?

L'exemple fourni ne répond pas à certains d'entre-eux ?

[atlanthot]

Malheureusement non pas d'url encore...
mais je vais faire en sorte de pouvoir vous montrer ça rapidement !

Mon problème c'est que je n'arrive pas à customiser de manière propre la barre de zoom. Le style de certains des composants ( notamment tout ce que l'on trouve à l'intérieur de la div avec la class="olControlNoSelect" ) est directement attaché aux balises html. Les balises à l'intérieur ont des id qui changent de maniere dynamique c'est donc assez dur de tout customiser en css

je vous mets le html en copie...

< div
id = "Geoportal_Control_ZoomSliderOpenLayers.Map_5"
style = "float: left; left: 10px; top: 0px; z-index: 1012; "
class = "olControlNoSelect"
unselectable = "on"
title = "Échelle approximative: 1:900000" >

<div style = "background-image: url(http://api.ign.fr/geoportail/api/js/...Vertical.gif); left: 10px; top: 0px; width: 10px; height: 130px; position: relative; background-repeat: no-repeat no-repeat; " id = "SliderBase779" ></div>
<div id = "SliderBaseHandle781" style = "position: relative; left: 5px; top: -107.5px; width: 15px; height: 7px; "
class = "gpControlSliderBaseHandle" >

< img id = "SliderBaseHandle781_innerImage"
style = "position: absolute; width: 15px; height: 7px; "
src = "http://api.ign.fr/geoportail/api/js/latest/theme/geoportal/img/zoom_curseur.gif" >

</div>

</div>

[dgrichard]

Et une règle CSS du type :

Code :

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

1
2
3
4
div.gpZoomClass div.olControlNoselect div:nth-child(1) {
background-image: url('mon url à moi');
}

Voir là

[dgrichard]

Tu as cassé ta page !

met latest et non pas 2.0.0latest

Edit: Ooops, pas sur le bon thread - on oublie ce message

[atlanthot]

Rebonjour j'ai une petite question super bête que j'ai posée un peu plus haut mais la réponse donnée ne correspond pas à ce que je recherche ( j'ai peur de m'être mal exprimé ).

Je souhaite, lors du click sur un point, récupérer l'élément html relatif à ce point et annuler le comportement par défaut qui est d'ouvrir une popup avec un label.

[atlanthot]

Personne pour répondre ?

[gcebelieu]

Je ne suis pas sur de bien comprendre, pouvez vous fournir plus de détails :

Qu'entendez vous par l'élément html relatif à mon point ?
S'agit-il de cliquer sur des points d'une couche vecteur ?

[atlanthot]

oui c'est exactement ça ( enfin je crois ^^ )

[gcebelieu]

l'exemple suivant rajoute une couche KML en associant une fonction (openPopup) à l'événement onSelect sur la couche. Cette fonction ouvre une popup centrée sur l'objet sélectionné et affiche des informations associés à cet objet.

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
	var vLayer= viewer.getMap().addLayer(	
			                "KML",	 
					"couche KML", 			
					"test.kml"  ,
					{ //parameters
						visibility:true
					},
					{ // options 
						onSelect:openPopup
					}
				);

				function openPopup(f){
				
					f.popup= new OpenLayers.Popup.FramedCloud(
						"chicken",//id
						f.geometry.getBounds().getCenterLonLat(),
						new OpenLayers.Size(50,50),
						"<div><b>"+f.data.name+"</b><br><br>"+f.data.description+"</div>"
					); 

					viewer.getMap().addPopup(f.popup);
				}

En espérant que ça répond à votre problématique.