Skip to content
December 16, 2010 / Gagan

Undo Redo Vector Edits in OpenLayers

OpenLayers has given a good platform for vector data rendering on web. OpenLayers library also allows vector data manipulation or edit. For making vector data editing more easy I have created a control to undo or redo the vector edits. In the example for undo redo,  I have added controls for undo and redo the vector edits done. The basic example of OpenLayers, modify features has been extended very easily to incorporate undo redo control with help of UndoRedo class.

In this implementation i.e UndoRedo class has two stacks for undo features and redo features. On any edit of vector feature I insert the feature in undo stack. Like if there is a update of the feature the old feature get inserted into undo stack. So on undo action the updated  feature is  moved out to redo stack and old feature is moved to layer. The only issue here is with delete feature, openlayers library on delete action does not remove the feature (as it is required to send that info to server on commit) but change the state to “Delete”. I have done a little modification on delete, I remove the feature from layer to undo stack. So at this stage if somebody commits, the deleted features would not be deleted from server. To over come this issue I’ll write a function that will move back the deleted features to layer with state  “Delete” and style {display:”none”}  so that deleted features could also be removed from server.  This function has to be triggered before commit i.e. on start event of save strategy. I’ll update this control with this function by that time please test undo redo control example and in case of any bug let me know.

Advertisements

9 Comments

Leave a Comment
  1. Giovanni Lodi / Jul 22 2011 8:04 pm

    Hi. I was googling for some tutorial about undo/redo edits and I found your post. Your UndoRedo class is exactly what I need, thanks!
    Just a question: you mention an issue with the delete. Have you implemented it the way you explain in the post already? If so is the source available? Otherwise if you haven’t I can take a look at it and do if my self, then share the code with you. Thanks 🙂

    • Gagan / Jul 25 2011 11:11 am

      Hi Giovanni,

      Nice to see this feature is helpful to you.
      Actually I was writing this class for my library GeometricNet. So I thought it is useful in general also, but further I could not improve the generic one.
      Well in GeometricNet a network feature class Edge/Node contains separate property removedFeature that stores the deleted features and on call for save of features,I commit removedFeature also.
      I’ll improve the generic version also by this weekend. You can check out the current GeometricNet from SVN (https://geometricnet.svn.sourceforge.net/svnroot/geometricnet/trunk ) and explore the UndoRedo class. Please let me know any other issue related to this, I’ll fix that.

      Regards,
      Gagan

  2. Gagan / Jul 31 2012 11:25 am

    I found another good approach for UndoRedo in OpenLayer
    https://github.com/geops/ole/blob/master/client/lib/Editor/Control/UndoRedo.js

  3. Neil Broomfield / Nov 12 2012 6:35 pm

    The first line of code in the UndoRedo.js reads:

    UndoRedo = OpenLayers.Class(OpenLayers.Contorl,{

    This should be Control?

    • Gagan / Dec 23 2012 7:32 pm

      Hi Neil,
      thanks for the feedback, you are right it should be Control.

  4. Amit Jha / Nov 29 2016 10:11 pm

    Does it work with OpenLayers v3?

    • Gagan / Nov 30 2016 9:31 am

      Hi Amit, Its not compatible with OL3 as OL3 is totally different framework.

      • Amit Jha / Nov 30 2016 10:39 pm

        Do you have plans to do something similar for OL3? I am looking for some similar solution for OL3.

      • Gagan / Feb 26 2017 1:28 pm

        @amit sorry for late reply. Because of time constrain its difficult to develop now for OL3, unless until its very urgent and you are not getting it from any other sources.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: