Enable and disable layer modifying in OpenLayers

Question

I have this project where I have to allow the user to edit his feature. At this point I can show the feature. But I want to also allow the user to modify the feature. The feature can't me able to be modified from it's creation. The user has button which enables and disables the modifying of the feature. I have found this documentation on how to modify features: Documentation.
My project is created in React and the code that I have tried to derive from the documentation looks as follows:
setEditInteractionForPlotUserBoundriesLayer(state) {
    this.map.getLayers().forEach((layer) => {
      if (layer.get("name") === "plotUserBoundriesLayer") {
        if (state) {
          var select = new Select({
            wrapX: false,
            layers: [layer],
          });
          this.modify = new Modify({
            features: select.getFeatures(),
          });
          this.map.addInteraction(this.modify);
        } else {
          if (this.modify) {
            this.map.removeInteraction(this.modify);
            this.modify = null;
          }
        }
      }
    });
  }

The code doesn't work at this point. I can't seem to get it to work in my example. The documentation only has an example where the modification is enabled on creating the layer and not how to add it after it has been created.

Mike · Answer

You are currently removing the interaction if you have a layer which is not named "plotUserBoundriesLayer". Should you be removing the interaction if the layer is "plotUserBoundriesLayer" and state is false?
setEditInteractionForPlotUserBoundriesLayer(state) {
    this.map.getLayers().forEach((layer) => {
      if (layer.get("name") === "plotUserBoundriesLayer") {
        if (state) {
          var select = new Select({
            wrapX: false,
            layers: [layer],
          });
          this.modify = new Modify({
            features: select.getFeatures(),
          });
          this.map.addInteraction(this.modify);
        } else {
          if (this.modify) {
            this.map.removeInteraction(this.modify);
            this.modify = null;
          }
        }
      }
    });
  }

Rob · Answer

You are instantiating the modify-Interaction with the features select.getFeatures(). Since the select-interaction was just newly created, this will always be an empty array at that point.
You should get your features after the select-Interaction fires a select-Event, something like this:
select.on('select', function (e) {
  this.modify = new Modify({
    features: e.selected,
  });
  this.map.addInteraction(this.modify);
})

Maybe you should disable your select-interaction once you started modifying, depending on your use-case.

Enable and disable layer modifying in OpenLayers

2 Answers

Add your own answers!

Ask a Question