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/

  • What you want is unfortunately not currently supported by OpenLayers 3. I agree it would be a useful addition. Creating a GitHub issue would make sense to me.
    – erilem
    Nov 9, 2014 at 21:36

2 Answers 2


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)


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;

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

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

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

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

Your Answer

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

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