Discussion :

[sylvaingeo]

Dans cet exemple :
http://api.ign.fr/tech-docs-js/examp...azetteer2.html
On peut rechercher un lieu et avoir une liste autocomplétée au fur et à mesure de la frappe.

Si on navigue dans cette liste avec les flèches puis appuie sur entrée, la carte est recentrée.
Si on clique sur un élément de la liste, il faut cliquer sur Rechercher pour que la carte soit recentrée.

Comment faire pour que le clic sur un élément de la liste déclenche le recentrage automatiquement ?

J'ai compris que cet évènement déclenchait AutoComplete.selectProposal() qui elle même déclenche AutoComplete.onResultClick () qui est vide dans le code source (http://api.ign.fr/geoportail/api/js/...utoComplete.js). J'en déduis que c'est cette dernière méthode qu'il faudrait surcharger. Mais comment lui faire appeler la méthode GeoNames.onResultClick() (http://api.ign.fr/geoportail/api/js/...ce/GeoNames.js) ?

Merci

Sylvain

[gcebelieu]

Bonjour Sylvain,

le fait que le recentrage soit déclenché par l'appui sur la touche entrée vient de cette partie de code dans la page d'exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
            OpenLayers.Event.observe(
                form,
                "keypress",
                OpenLayers.Function.bind(function(evt) {
                    if (evt.keyCode==13 || evt.keyCode==10) {
                        return this.onSearchClick.apply(this,[e,evt]);
                    }
                    return true;
                },this)
            );

qui lie l'événement clavier avec l'appel à this.onSearchClick.

La ligne suivante :

Code :

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

1
2
e.onclick= OpenLayers.Function.bind(this.onSearchClick,this,e);

est sensée faire la même chose avec le click souris, mais ne fonctionne pas. ce qui n'est pas étonnant car elle écoute le click sur le formulaire, mais pas sur la div créée par lecontrôle d'autocomplétion.

Du coup, c'est la méthode

Geoportal.Control.Autocomplete.showResults qu'il faut surcharger. En effet, celle-ci définit le comportement par défaut d'écouter le click sur la div et de remplir le form à partir de la suggestion sur laquelle on a cliqué (cf. partie en gras ci-dessous). Il faut donc lier le click à la fonction onSearchClick du contrôle GeoNames à la place.

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
36
    showResults: function(response){
        this.results= response.data.results;
        if (this.results && !(this.results instanceof Array)) {
            this.results= [this.results];
        }
        this.highlightIndex= 0;
        if (!this.results || this.results.length==0) {
            this.hideAutoCompleteList();
            return;
        } else {
            this.showAutoCompleteList();
        }
        while (this.completeList.childNodes.length>0) {
            OpenLayers.Event.stopObservingElement(this.completeList.childNodes[0]);
            this.completeList.removeChild(this.completeList.childNodes[0]);
        }
        var maxResults= (this.results.length>this.maximumResponses) ? this.maximumResponses : this.results.length;
        for (var f=0; f<maxResults; ++f) {
            var div= document.createElement("div");
            var span= document.createElement("span");
            span.innerHTML= this.results[f].fulltext;
            div.appendChild(span);
            OpenLayers.Event.observe(
                    div,
                    'click',
                    OpenLayers.Function.bind(this.selectProposal, this,f)
                );
            OpenLayers.Event.observe(
                    div,
                    'mouseover',
                    OpenLayers.Function.bind(this.highlightOver, this,f)
                );
            this.completeList.appendChild(div);
        }
    },

[sylvaingeo]

Ok, merci Gilles, c'est à peu près ce que j'avais compris.

Mais finalement j'ai surchargé AutoComplete.onResultClick qui semblait prévue pour ça.
Le moyen de récupérer l'instance de GeoNames depuis l'instance de AutoComple me semble un peu bricolage, mais ça marche.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
 * Method: onResultClick
 * Callback function called when a proposal is selected in the autocomplete list.
 * Could be overwritten by sub-classes.
 */
onResultClick: function() {
    var ctrls = this.map.getControlsByClass("Geoportal.Control.LocationUtilityService.GeoNames");
    if (ctrls.length === 0) {
        return;
    }
    var myGeoNames = ctrls[0];
    myGeoNames.onSearchClick(myGeoNames.buttons.search);
}

[paulguy]

Bonjour, je ressors ce message car je rencontre un problème similaire.

Je cherche donc à recentrer la carte au clic sur un résultat d'autocompletion mais dans le cas d'une recherche par adresse externe (http://api.ign.fr/tech-docs-js/examp...ressesExt.html).
Ou peut être plus simplement recentrer la carte automatiquement sur le premier résultat trouvé et me passer de la liste de résultats après soumission du formulaire.

J'ai essayé beaucoup de choses jusqu'ici mais je me perds franchement entre l'autocomplete et le reste ...
La dernière chose étant la solution proposée ici à savoir surcharger "onResultClick" de l'autocomplete mais je n'arrive pas à récupérer le "onResultClick" de la liste de résultat du Geocode

si quelqu'un a une idée je serais très intéressé
Merci!

[lboulanger]

Bonjour,

J'ai peut être une idée, en repartant plutôt sur l'idée de Gilles (surcharge de showResults). Sauf qu'au lieu d'associer le click à la fonction searchResult, on pourrait y associer la fonction onAutocompleteResultClick.
Cette fonction de Geocode prend en paramètre la valeur textuelle du champ d'autocomplétion sélectionné, et lance la fonction onResultClick (de Geocode), qui va zoomer sur l'adresse géocodée.

Il faudrait pour cela juste récupérer le contrôle Géocode (en s'inspirant par exemple du code de Sylvain), ainsi que le texte sélectionné (span.innerText).

ça donnerait quelque chose du genre :

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
36
37
38
39
40
41
function showResults(response){
    this.results= response.data.results;
    if (this.results && !(this.results instanceof Array)) {
        this.results= [this.results];
    }
    this.highlightIndex= 0;
    if (!this.results || this.results.length==0) {
        this.hideAutoCompleteList();
        return;
    } else {
        this.showAutoCompleteList();
    }
    while (this.completeList.childNodes.length>0) {
        OpenLayers.Event.stopObservingElement(this.completeList.childNodes[0]);
        this.completeList.removeChild(this.completeList.childNodes[0]);
    }
    var maxResults= (this.results.length>this.maximumResponses) ? this.maximumResponses : this.results.length;
    for (var f=0; f<maxResults; ++f) {
        var div= document.createElement("div");
        var span= document.createElement("span");
        span.innerHTML= this.results[f].fulltext;
        div.appendChild(span);
        var ctrls = this.map.getControlsByClass("Geoportal.Control.LocationUtilityService.Geocode");
        if (ctrls.length === 0) {
            return;
        }
        var myGeocode = ctrls[0];
        OpenLayers.Event.observe(
                div,
                'click',
                OpenLayers.Function.bind(myGeocode.onAutoCompleteResultClick, myGeocode, span.innerText)
            );
        OpenLayers.Event.observe(
                div,
                'mouseover',
                OpenLayers.Function.bind(this.highlightOver, this,f)
            );
        this.completeList.appendChild(div);
    }
};

J'espère que ça pourra vous aider

Laurane

[paulguy]

Merci beaucoup de votre réponse !
Je teste ça dès que possible et vous ferais un retour.