Using forEachFeatureAtPixel without mouse

Question

I've an HTML with a list of data's :

<select id="searchinput" align="top" maxlength="120" name="zl_choix">(...)

And the button search with this code:

<input type='button' value='Search !' id='searchbutton' onclick='search()'>

And my Javascript function, take the value of the data list and search on the map this value for make a zoom and display popup :

function search()
{

    // ZOOM ///////////////////////////////
    var search_value = document.getElementById('searchinput').value;

    var layers = map.getLayers();
    var view = map.getView();

    var length = layers.getLength();
    for (var i = 0; i<length; i++) {

        if (layers.item(i).q['name'] == 'Layer 1') {

            obj = layers.a[i].q['source'].i;

            var cpt_ligne = 0

            for (prop in obj){

                cpt_ligne++;
                nb_ligne = Object.keys(obj).length;

                if (cpt_ligne == 1) {
                    var debut = prop;
                };
                if (cpt_ligne == nb_ligne) {
                    var fin = prop;
                };
            }

            for (var j = debut; j<fin; j++) {

            var test_undefined = layers.a[i].q['source'].g[j];

                if (test_undefined != undefined) {
                    if (layers.a[i].q['source'].g[j].q['num'] === search_value) {

                        destination_center = layers.a[i].q['source'].g[j].q['geometry'].j;

                        var resolution = view.getResolution();

                        var duration = 2500;
                        var start = +new Date();
                        var zoom = ol.animation.zoom({
                            resolution: resolution
                            });

                            map.beforeRender(zoom);
                            view.setCenter(destination_center);
                            view.setZoom(15);

                        // POPUP ///////////////////////////////                        

                        if (popup_test == 1) {
                            map.removeOverlay(popup);
                            popup = new ol.Overlay.Popup;
                            popup.setOffset([0, 10]);
                            map.addOverlay(popup);
                        } else {
                            popup = new ol.Overlay.Popup;
                            popup.setOffset([0, 10]);
                            map.addOverlay(popup);
                        };

                        map.addOverlay(popup);

                        popup_test = 1;

                        var recup_layer = map.forEachLayerAtPixel(
                            map.getPixelFromCoordinate(destination_center),
                            function(ft, layer){return ft;}
                        );

                        var recup_prop = map.forEachFeatureAtPixel(
                            map.getPixelFromCoordinate(destination_center),
                            function(ft, layer){return ft;}
                        );

                        if (recup_layer && recup_layer.get('name') == 'Layer 1') {

                            var geometry = recup_prop.getGeometry();
                            var coord = geometry.getCoordinates();

                            var content = ("<div id='tad_close_popup' )'></div><div id='tad_text_popup'><p>Arr&ecirc;t "+  recup_prop.get('data') + "</p></div>");

                            popup.show(coord, content);

                        }

                        /////////////////////////////////////////////////////////

                        break;
                    }
                }
            }
        }
    }
}

The problem is my variable recup_prop doesn't recover the value if the point destination_center didn't on my screen when I click on the button Search !.

For example, if I've two near points and I see them on my screen and I search the first point and the second point, no problem, if I do alert (recup_prop) I've an object.

But if I've a third point what I don't see alert (recup_prop) varaible recup_prop is undefined.

Answer 1

I resolve the problem if I remove popup and if I replace it by a < div id = " information " > Who contain the information of the popup what I complete with the code document.getElementById (' information ') . InnerHTML = (...)