How to detect touch events on mobile browsers with OpenLayers 3?

Question

I am trying to display a popup on mouse hover over features from a WFS service. This works fine with web browsers. However , when I try to display the popups on touch in mobile browsers nothing is displayed. The pixels returned from the touch event are never accurate enough to get the correct feature.

My code goes as follows :

$(map.getViewport()).on('mousemove', function(evt) {
        var pixel = map.getEventPixel(evt.originalEvent);
        var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
                return feature;
        });

    });

The feature variable always returns null on touch events in mobile browsers. So is there a way to handle mobile touch events in Openlayers 3 ?

Answer 1

I used the singleclick event to detect the touch event and used the getClosestFeatureToCoordinate function to overcome the difference between the click position and the actual feature position as follows:

map.on('singleclick', function(evt) {
            var coordinates = map.getEventCoordinate(evt.originalEvent);
            var feature = vectorlayer.getClosestFeatureToCoordinate(coordinates);

});