Modify interaction using Icon image in OpenLayers3

Question

I have vector features represented by icon images in a map using OpenLayers 3 (3.0.0). These features can be modified by the Modify interaction only if the user place the mouse cursor close their position. If the user tries to drag the icon, outside the position range, the map is panned (instead of dragging that feature).

Is there any way to expand the drag area, from the Modify interaction, to the feature icon?

Example: http://jsfiddle.net/suguiura/xuzsj99b/

Answer 1

Try setting pixelTolerance property of the modify contro. It determines the radius of influence where the features must be consedered selectables.

By default pixelTolerance is 10 pixels.

See more in http://openlayers.org/en/v3.0.0/apidoc/ol.interaction.Modify.html (uncheck the stable checkbox)

Answer 2

I couldn't change the Modify interaction to handle the icon. So I handled the events myself, instead:

var movingFeature = null;

map.on('pointerdown', function (event) {
    var pixel = map.getEventPixel(event.originalEvent);
    movingFeature = map.forEachFeatureAtPixel(pixel, function (feature) {
        return feature.get('draggable') ? feature : undefined;
    });
    event.preventDefault();
});

map.on('pointerup', function (event) {
    movingFeature = null;
});

map.getTarget().addEventListener('mousemove', function (event) {
    if (movingFeature) {
        var coordinates = map.getEventCoordinate(event);
        movingFeature.getGeometry().setCoordinates(coordinates);
    }
});

In this example, the features are draggable whenever the draggable property evaluates true.

Result: http://jsfiddle.net/am15oq1r/