Open Layers 3: How to create listener for a modify interaction

Question

I have managed to set up a modify interaction.

The docs for ol.interaction.Modify (http://ol3js.org/en/master/apidoc/ol.interaction.Modify.html) don't metion a single event that is fired when a feature is modified.

Unlike for instance for ol.interaction.Draw (http://ol3js.org/en/master/apidoc/ol.interaction.Draw.html) which works nicely.

I need to update the coordinates in the database when a feature has been modified.

How can I set up a listener?

Aeriel

Is it possible the docs have changed recently. I am seeing on(type, listener, opt_this) under the modify docs? – Xerosere

that was there before. But using .on('change') does not work. I have found a rather complicated solution here: boundlessgeo.com/2014/06/openlayers-editing-wfs-t. It works by listening to changes in the features themselves – Aeriel

That seems quite reasonable, actually. Are you going to post some kind of working answer that I can +1? OpenLayers 3 documentation is naturally a bit thin at the moment, as they are working full tilt on finishing the code, and I think a lot of people will be wondering how some of the old controls, drag, modify, and their respective callbacks work. – Xerosere

Answer 1

I found a solution.

The high-level-explanation is here: http://boundlessgeo.com/2014/06/openlayers-editing-wfs-t/

Basically you don't listen to changes in the modify-interaction (like you do in the draw-interaction). Instead, you listen to changes in the selected features themselves.

Here's a short extract:

// get the features from the select interaction
var selected_features = select_interaction.getFeatures();
// when a feature is selected...
selected_features.on('add', function(event) {
    // get the feature
    var feature = event.element;
    // ...listen for changes on it
    feature.on('change', function(event) {
        // got it!
    });
});

Here is a complete working example: http://codepen.io/barbalex/pen/fBpyb

Aeriel

Looks like the uid() function is not working as it should. Am I wrong ? – Rollin

Answer 2

for this, you have to use like following :

feature.once('change', function(bool) {if (bool) {document.getElementById('my_input_text').value='feature changed'}})

you have to use 'once' instead of 'on' to avoid multiple check and use boolean variable to check if feature is changed or not.

Hope this help

Filar