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 ?


1 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);


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.