Skip to main content
js tag for syntax
Link
nagytech
  • 3.8k
  • 19
  • 37
edited title
Link
Geo-x
  • 357
  • 1
  • 3
  • 16

Using forEachFeatureAtPixel not withwithout mouse

Source Link
Geo-x
  • 357
  • 1
  • 3
  • 16

Using forEachFeatureAtPixel not with mouse

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.