Recherche du générateur

**Zebulon777** · 24/06/2014, 11h28

Bonjour à tous,

je cherche à appliquer les recherches offertes par le générateur IGN, mais je n'arrive pas à les inclure dans mon code.

J'ai isolé le code suivant :

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
//Ajout du contrôle de recherche par adresses
var Geocode= new Geoportal.Control.LocationUtilityService.Geocode(
		   new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
				   "StreetAddress:OPENLS;Geocode",//layer name
				   {
					   maximumResponses:100,
					   formatOptions: {
					   }
				   }
		   ),{
				   drawLocation:true,
				   setZoom: Geoportal.Control.LocationUtilityService.GeoNames.setZoomForBDNyme,
				   autoCompleteOptions: {}
		   }
);
panel.addControls([Geocode]);

mais, bien sur, ça ne fonctionne pas lorsque je l'inclus à mon code.

En fait, est-ce que c'est faisable ?

**nicolas.h** · 24/06/2014, 11h57

Bonjour,

Afin de pouvoir vous donner quelques éléments de réponses:

-> Pourriez vous être plus précis sur votre demande concernant notament le code, son utilisation et surtout le context

-> Concernant

Code :

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

panel.addControls([Geocode]);

Avez vous pensé à bien définir votre panel ?

-> Pour finir il existe une manière plus propres de réalisés une recherche par lieux ou par adresse en allant jeter un oeil par ici
http://api.ign.fr/documentation/89/barre-de-recherche

**Zebulon777** · 24/06/2014, 13h13

~~Merci, je suis le lien... et je galère...~~

Bon, j'ai réussit, mais je n'arrive pas à positionner le bouton à un emplacement précis ?

Ai-je mal fait quelque chose ?

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
25
26
27
28
29
30
31
32
33
34
35
// Bouton RECHERCHE PAR ADRESSE
var tbx5 = viewer.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];
var B_Recherche = new Geoportal.Control.Panel({
	div:OpenLayers.Util.getElement(tbx5.id+'_search')
});

var gazetteer= new Geoportal.Control.LocationUtilityService.GeoNames(
	new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
		'PositionOfInterest:OPENLS;Geocode',
	{
		formatOptions: {
		}
	}
	),{
	title: 'gpControlLocationUtilityService.geonames.title',
	setZoom:Geoportal.Control.LocationUtilityService.GeoNames.setZoomForBDNyme
	}
);

B_Recherche.addControls([gazetteer]);
viewer.getMap().addControls([B_Recherche]);

//// Application d'un style au bouton
WIconeRech = "./Images/Recherche2.png";
var B_RechHTML = document.getElementsByClassName("gpControlLocationUtilityServiceGeoNamesItemInactive")[0];
B_RechHTML.style.background = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_RechHTML.style.border = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_RechHTML.style.backgroundImage = 'url("'+WIconeRech+'")';
B_RechHTML.style.width = "16px";
B_RechHTML.style.height = "16px";
B_RechHTML.style.position = "absolute";
B_RechHTML.style.left = "93px";
B_RechHTML.style.top = "-50px";
B_RechHTML.style.cursor = "Pointer";

Aie, je viens de constater que les bulles d'aides qui s'affichaient sur les icônes affichées sur la carte ne fonctionnent plus.
En fait, au lancement de la page, ça fonctionne, mais si je clique sur le bouton "Rechercher" puis que je reclique dessus pour fermer la fenêtre de recherche, là, les bulles d'aides ne s'affichent plus.

De plus, si j'essaye de mettre la recherche avancée, non seulement, je n'ai pas la même chose que sur l'image du lien, mais en plus, il y a quelque chose qui ne lui plait pas car le code s'arrête.

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
25
26
27
28
29
30
31
32
33
34
35
// Bouton RECHERCHE PAR ADRESSE
var tbx5 = viewer.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];
var B_Recherche = new Geoportal.Control.Panel({
	div:OpenLayers.Util.getElement(tbx5.id+'_search')
});

var gazetteer= new Geoportal.Control.LocationUtilityService.Geocode(
	new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
		'StreetAddress:OPENLS;Geocode',
	{
		formatOptions: {
		}
	}
	),{
    	uiOptions:{title: 'gpControlLocationUtilityService.geocode.title'},
	setZoom: Geoportal.Control.LocationUtilityService.Geocode.setZoomForBDNyme
	}
);

B_Recherche.addControls([gazetteer]);
viewer.getMap().addControls([B_Recherche]);

//// Application d'un style au bouton
WIconeRech = "./Images/Recherche2.png";
var B_RechHTML = document.getElementsByClassName("gpControlLocationUtilityServiceGeoNamesItemInactive")[0];
B_RechHTML.style.background = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_RechHTML.style.border = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_RechHTML.style.backgroundImage = 'url("'+WIconeRech+'")';
B_RechHTML.style.width = "16px";
B_RechHTML.style.height = "16px";
B_RechHTML.style.position = "absolute";
B_RechHTML.style.left = "93px";
B_RechHTML.style.top = "-50px";
B_RechHTML.style.cursor = "Pointer";

J'ajoute une petite capture pour se rendre compte de ce que ça donne.
On constate que l'ajout du bouton provoque l'ajout d'une ligne supplémentaire, un sacré décalage et que même la modification des coordonnées ne solutionne pas.
Nom : Rech01.png
Affichages : 193
Taille : 85,8 Ko

Nom : Rech01.png
Affichages : 193
Taille : 85,8 Ko

**nicolas.h** · 24/06/2014, 15h25

Plustot que de passer par

Code :

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

1
2
3
4
5
6
7
8
[...]
B_RechHTML.style.border = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_RechHTML.style.backgroundImage = 'url("'+WIconeRech+'")';
B_RechHTML.style.width = "16px";
B_RechHTML.style.height = "16px";
B_RechHTML.style.position = "absolute";
[...]

Pour ajouter le CSS du bouton, il serait peut être pas mieux de passer par l'appel à l'id ou la class du bouton en question pour y appliquer des propriétés CSS ? De même pour le placement de la bulle d'aide ?

De plus je pense que position absolute peut être un des facteurs liés à votre problème

**jrenard** · 24/06/2014, 15h48

Code :

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

On constate que l'ajout du bouton provoque l'ajout d'une ligne supplémentaire, un sacré décalage et que même la modification des coordonnées ne solutionne pas.

Ce point est dû au panel dans lequel est ajouté le bouton :

Code :

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

1
2
3
4
5
6
7
var tbx5 = viewer.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];
var B_Recherche = new Geoportal.Control.Panel({
	div:OpenLayers.Util.getElement(tbx5.id+'_search')
});
...
B_Recherche.addControls([gazetteer]);
viewer.getMap().addControls([B_Recherche]);

Ces morceaux de code créent un panel de contrôle, intitulé ToolBox_search, juste en-dessous du panel déjà utilisé, intitulé ToolBox_nav, et ajoutent le bouton dans ce panel. Deux conséquences :
- l'ajout d'une ligne apparente, celle du nouveau panel
- un bouton "coincé" dans ce panel

A la place de ça, il faut ajouter le bouton dans le panel que l'on a utilisé pour les autres boutons, qui dans ton code est matérialisé par l'objet nv :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var gazetteer= new Geoportal.Control.LocationUtilityService.Geocode(
	new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
		'StreetAddress:OPENLS;Geocode',
	{
		formatOptions: {
		}
	}
	),{
    	uiOptions:{title: 'gpControlLocationUtilityService.geocode.title'},
	setZoom: Geoportal.Control.LocationUtilityService.Geocode.setZoomForBDNyme
	}
);
nv.addControls([gazetteer]);

Avec cela, le bouton ira bien se positionner dans le bon panel, à coté des autres, et aucun panel supplémentaire ne sera ajouté (ce qui fera re-disparaître cette ligne qui décale tout).

Ensuite, tu positionnes ton bouton comme tu l'as fait d'habitude, en absolu avec des coordonnées top et left. J'attire néanmoins ton attention sur le fait que le nom de classe du bouton est "gpControlLocationUtilityServiceGeocodeItemInactive" et non "gpControlLocationUtilityServiceGeonamesItemInactive" (la confusion était facile).

Tout ça devrait déjà régler tes problèmes de mise en page de ton cartouche d'outils.

**Zebulon777** · 25/06/2014, 09h42

Bon, il y a du mieux

J'ai encore 3 problèmes :

1 - la fenêtre de recherche qui s'affiche ne correspond pas à celle du formulaire multi-critère de la page http://api.ign.fr/documentation/89/barre-de-recherche
Nom : Rech02.png
Affichages : 185
Taille : 12,2 Ko

Nom : Rech02.png
Affichages : 185
Taille : 12,2 Ko

2 - Quand je clique sur le bouton de la recherche, la fenêtre de recherche s'affiche correctement et les bulles s'affichent aussi.
Par contre dés que je ferme la fenêtre de la recherche, que ce soit par la petite croix ou en recliquant sur le bouton, les bulles n'apparaissent plus et la souris reste sous la forme de la croix.

Nom : Rech03.png
Affichages : 196
Taille : 92,1 Ko

Nom : Rech03.png
Affichages : 196
Taille : 92,1 Ko

3 - Si on ne saisit qu'un nom de ville, la recherche fonctionne correctement, mais si on ne saisit qu'un code postal, elle ne fonctionne plus.

**Zebulon777** · 26/06/2014, 08h24

Aie aie aie, j'essaye d'appliquer ce qu'on avait fait pour le graticule (car nous avions eu le même problème avec les bulles) mais sans succès.

**Zebulon777** · 26/06/2014, 11h05

Bon, je craque :

Ce code fonctionne, mais la recherche sur le code postal uniquement ne fonctionne 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
21
22
23
24
25
26
27
28
29
30
31
32
var tbx5 = viewer.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];
var B_Recherche = new Geoportal.Control.Panel({
	div:OpenLayers.Util.getElement(tbx5.id+'_search')
});
var gazetteer= new Geoportal.Control.LocationUtilityService.Geocode(
	new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
		'StreetAddress:OPENLS;Geocode',
	{
		formatOptions: {
		}
	}
	),{
    	uiOptions:{title: 'gpControlLocationUtilityService.geocode.title'},
	setZoom: Geoportal.Control.LocationUtilityService.Geocode.setZoomForBDNyme
	}
);
nv.addControls([gazetteer]);


//// Application d'un style au bouton
WIconeRech = "./Images/Recherche2.png";
var B_RechHTML = document.getElementsByClassName("gpControlLocationUtilityServiceGeocodeItemInactive")[0];
B_RechHTML.style.background = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_RechHTML.style.border = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_RechHTML.style.backgroundImage = 'url("'+WIconeRech+'")';
B_RechHTML.style.width = "16px";
B_RechHTML.style.height = "16px";
B_RechHTML.style.position = "absolute";
B_RechHTML.style.left = "93px";
B_RechHTML.style.top = "5px";
B_RechHTML.style.cursor = "Pointer";

Par contre, ce code ne fonctionne 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
21
22
23
24
25
26
27
28
29
30
31
32
var tbx5 = viewer.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];
var B_Recherche = new Geoportal.Control.Panel({
	div:OpenLayers.Util.getElement(tbx5.id+'_search')
});
var gazetteer= new Geoportal.Control.LocationUtilityService.GeoNames(
	new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
		'PositionOfInterest:OPENLS;Geocode',
	{
		formatOptions: {
		}
	}
	),{
	uiOptions:{title: 'gpControlLocationUtilityService.geonames.title'},
	setZoom:Geoportal.Control.LocationUtilityService.GeoNames.setZoomForBDNyme
	}
);
nv.addControls([gazetteer]);


//// Application d'un style au bouton
WIconeRech = "./Images/Recherche2.png";
var B_RechHTML = document.getElementsByClassName("gpControlLocationUtilityServiceGeocodeItemInactive")[0];
B_RechHTML.style.background = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_RechHTML.style.border = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
B_RechHTML.style.backgroundImage = 'url("'+WIconeRech+'")';
B_RechHTML.style.width = "16px";
B_RechHTML.style.height = "16px";
B_RechHTML.style.position = "absolute";
B_RechHTML.style.left = "93px";
B_RechHTML.style.top = "5px";
B_RechHTML.style.cursor = "Pointer";

Je voulais remettre la recherche simple pour contourner le problème du code postal, mais je ne comprends pas pourquoi il plante ! ?

**jrenard** · 26/06/2014, 11h18

Le code de recherche simple ne fonctionne pas pour une raison assez simple, déjà évoquée précédemment : le nom de classe du bouton déclenchant la recherche. Ce nom est :
- gpControlLocationUtilityServiceGeocodeItemInactive dans le premier cas, ce qui explique que ça marche
- gpControlLocationUtilityServiceGeNamesItemInactive dans le euxième cas, ce qui explique que ça ne marche pas

Donc attention à bien changer le nom de classe du bouton lorsque l'on change de type de recherche, sinon le code Javascript va planter.

**jrenard** · 26/06/2014, 11h25

Envoyé par Zebulon777

2 - Quand je clique sur le bouton de la recherche, la fenêtre de recherche s'affiche correctement et les bulles s'affichent aussi.
Par contre dés que je ferme la fenêtre de la recherche, que ce soit par la petite croix ou en recliquant sur le bouton, les bulles n'apparaissent plus et la souris reste sous la forme de la croix.

L'explication à ce comportement semble être sensiblement la même que ce qu'il s'était passé avec le graticule : l'ajout d'une couche par-dessus toutes les autres qui intercepte les évènements de survol et empêche leur propagation aux couches situées en-dessous. Ici, le formulaire de recherche crée une couche par-dessus les couches existantes, cette couche sert à afficher les résultats de la recherche (les petites cibles de localisation). Cette couche n'est pas présente dans le gestionnaire de couches et peut paraître invisible, mais elle est néanmoins bien là. Elle intercepte les évènements de survol et ceux-ci ne sont pas propagés aux couches d'aéroports situées en-dessous, ce qui fait que les infos-bulles au survol n'apparaissent plus.

Pour éviter ce désagrément, il faudrait dans l'ordre des couches que les couches d'aéroports restent au-dessus de la couche de résultats de recherche.

**Zebulon777** · 26/06/2014, 12h55

Envoyé par jrenard

Le code de recherche simple ne fonctionne pas pour une raison assez simple, déjà évoquée précédemment : le nom de classe du bouton déclenchant la recherche. Ce nom est :
- gpControlLocationUtilityServiceGeocodeItemInactive dans le premier cas, ce qui explique que ça marche
- gpControlLocationUtilityServiceGeNamesItemInactive dans le euxième cas, ce qui explique que ça ne marche pas

Donc attention à bien changer le nom de classe du bouton lorsque l'on change de type de recherche, sinon le code Javascript va planter.

Rhaaaaaaa, c'est ce que j'avais fais, mais j'avais oublié de changer celui du bouton ! IdiotBêteQueJeSuis

Envoyé par jrenard

L'explication à ce comportement semble être sensiblement la même que ce qu'il s'était passé avec le graticule : l'ajout d'une couche par-dessus toutes les autres qui intercepte les évènements de survol et empêche leur propagation aux couches situées en-dessous. Ici, le formulaire de recherche crée une couche par-dessus les couches existantes, cette couche sert à afficher les résultats de la recherche (les petites cibles de localisation). Cette couche n'est pas présente dans le gestionnaire de couches et peut paraître invisible, mais elle est néanmoins bien là. Elle intercepte les évènements de survol et ceux-ci ne sont pas propagés aux couches d'aéroports situées en-dessous, ce qui fait que les infos-bulles au survol n'apparaissent plus.

Pour éviter ce désagrément, il faudrait dans l'ordre des couches que les couches d'aéroports restent au-dessus de la couche de résultats de recherche.

Oui, je me doutais bien que c'était le même genre de problème que le graticule, mais je n'arrive pas à appliquer la même méthode que pour le graticule.

**Zebulon777** · 27/06/2014, 09h26

Dites, avec la recherche multicritères, je trouve 2 "problèmes" :
- si on saisit "Paris", il ne trouve que des lieu-dits, la recherche ferait-elle de l'anti-parisianisme

?
- on ne peut pas faire de recherche uniquement sur le code postal, est-ce normal ?

Et sinon, j'ai décidé de désactiver la recherche sur la page principale (c'est la facilité, mais c'est le plus simple et de toutes façons, elle ne sera pas utilisée sur cette page), car je n'arrive pas à gérer les couches pour ne plus avoir le problème de la souris.

**jrenard** · 27/06/2014, 10h19

Envoyé par Zebulon777

- si on saisit "Paris", il ne trouve que des lieu-dits, la recherche ferait-elle de l'anti-parisianisme

?

Mmmh, pas normal : avec le même code que toi, si je rentre "Paris" dans le champ "Ville" j'obtiens la capitale en première réponse suivie de ses arrondissements un par un.

Envoyé par Zebulon777

- on ne peut pas faire de recherche uniquement sur le code postal, est-ce normal ?

Effectivement, c'est une limite de la recherche actuelle: le code postal ne sert qu'à préciser la ville recherchée en cas de plusieurs villes ayant le même nom.

**Zebulon777** · 27/06/2014, 11h03

Attention, avec la recherche multicritère, ça fonctionne, c'est avec la recherche simple (Geoportal.Control.LocationUtilityService.GeoNames) que "Paris" n'est pas trouvée.

**jrenard** · 27/06/2014, 11h12

OK, je comprends mieux. Dans ce cas, c'est un comportement normal (je n'ai pas dit optimal, nous en sommes conscients). Dans la recherche simple par points d'intérêt, il n'y a pas de priorisation des réponses selon un attribut particulier, ce qui explique que des lieux-dits peuvent sortir avant la ville de Paris. A contrario, la recherche avancée se base sur StreetAdress et pas sur une base de points d'intérêts, et dans cette base là les lieux-dits nommés "Paris" n'apparaissent pas (ce sont des lieux-dits, pas des communes). C'est là aussi une limite des outils de recherche proposés par l'API.

**Zebulon777** · 27/06/2014, 13h06

D'accord, je comprends mieux.

Je vais voir les utilisateurs ce qu'il veulent, alors.

Merci.

**Zebulon777** · 03/07/2014, 09h54

Est-ce qu'il est possible de fixer le niveau de zoom du résultat de la recherche simple ?
Autre "petite" question : est-ce qu'il est possible d'augmenter le nombre de résultats affichés ?

**Zebulon777** · 07/07/2014, 13h07

Bon, ben, je n'arrive pas à trouver comment régler ce zoom ou le nombre de résultats affiché dans la fenêtre...

Pour le zoom, j'ai essayé ça, mais ça ne fonctionne 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
var gazetteer= new Geoportal.Control.LocationUtilityService.GeoNames(
	new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
		'PositionOfInterest:OPENLS;Geocode',
	{
		formatOptions: {
		}
	}
	),{
	uiOptions:{title: 'gpControlLocationUtilityService.geonames.title'},
//	setZoom:Geoportal.Control.LocationUtilityService.GeoNames.setZoomForBDNyme
	setZoom:9
	}
);
nv.addControls([gazetteer]);

De plus, est-ce qu'il est possible de faire afficher le numéro de département dans la liste des communes affichée dans la fenêtre de la recherche ?