CODEWITHSUNDEEP
openlayersopenlayers-3
klickagent.ch
klickagent.ch

Reputation: 559

Drag and Drop Feature in Openlayers 3

What is the equivalent for the OpenLayers 2 "OpenLayers.Control.DragFeature" functionality. I need to add an Icon to a map, that is moveable with the mouse. When dropping I need to catch the event. In OpenLayers 2, the described functionality is:

new OpenLayers.Control.DragFeature(this.MarkersLayer, {     
    onComplete: function(feature, pixel) { /* here comes the action after dropping the marker */ }}

Does anyone has an idea how this can be accomplished with OpenLayers 3?

Upvotes: 2

Views: 4243

Answers (3)

Gigelicious
Gigelicious

Reputation: 118

If someone is still interested in an answer to this question, the following code should achieve the requested requirements (cause I struggled with this type of problem for a while):


// Create the icon feature
var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point([lng, lat])
});

// Set the style for the icon feature 
iconFeature.setStyle(new ol.style.Style({
    image: new ol.style.Icon(({
        anchor: [0.5, 35],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 1,
        src: markerGraphics
    }))
}));

// Create the vector layer with it's source
var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [iconFeature]
    })
});

// Drag and drop feature
var dragInteraction = new ol.interaction.Modify({
    features: new ol.Collection([iconFeature]),
    style: null,
    pixelTolerance: 20
});

// Add the event to the drag and drop feature
dragInteraction.on('modifyend',function(){
    callYourFunction();
},iconFeature);

// Add the vector layer and the refering drag and drop interaction
map.addLayer(vectorLayer);
map.addInteraction(dragInteraction);


Based on the modify event, it is possible to append the listener to the drag and drop interaction instead of the layer/icon feature. With this solution, it is possible to execute a function after the drag of a layer/icon stopped (acts like 'dragend' known from OpenLayers 2).

Upvotes: 1

erilem
erilem

Reputation: 2664

OpenLayers 3 now includes an example that show how to implement a "drag feature" interaction. See http://openlayers.org/en/master/examples/drag-features.html.

So, the OpenLayers 3 library still doesn't provide a "drag feature" interaction, but it provides the extension points making it possible to implement such an interaction at the application level.

Note that you will have to use the "master" branch of OpenLayers 3 to implement your own "drag feature" interaction as in the example. The other option is to wait for 3.1.0, which should be out pretty soon.

Upvotes: 2

user1929437
user1929437

Reputation: 473

There is none. You also cant draw circles and round polygones either. viva la OL2

Upvotes: 0

Related Questions