2

I am having a problem in my project where the Modify and Snap interactions don't allow clicking and editing of existing features in a layer. I am using the most recent version of OpenLayers (6.4.3)

I can select features using the Select interaction just fine. But I cannot click a polygon and start modifying it at all.

If I add a Draw interaction to the map with EditSchemeGeometrySubTool.editSource as the source, I can draw and modify those features absolutely fine. But already existing features cannot be modified.

I have tested this is Edge and Firefox and it works fine, but in Chrome I have these issues.

Here is the relevant code. It is in TypeScript.

There is a button on the webpage that calls startEditing() when it is clicked to enable editing.

MapWrapper is another class that holds the openlayers map object.

class EditSchemeGeometrySubTool {
    
    private select : Select;
    private modify: Modify;
    private editSource : VectorSource;
    private editLayer: VectorLayer;
    private snap: Snap;


    startEditing() {
 
      this.select = new Select({layers:[this.editLayer]})

      //The select interaction works fine. 
      this.select.on("select",(e)=>{
        this.mapWrapper.map.removeInteraction(this.modify)
        this.mapWrapper.map.removeInteraction(this.snap)
        console.log(this.select.getFeatures().getLength()) // this prints "1" as expected.
        this.modify = new Modify({features:this.select.getFeatures()})
        this.mapWrapper.map.addInteraction(this.snap);
        this.mapWrapper.map.addInteraction(this.modify)

      })

      this.snap = new Snap({features:this.select.getFeatures()})

      this.mapWrapper.map.addInteraction(this.select)

      this.modify = new Modify({source:this.editSource}) 
      this.mapWrapper.map.addInteraction(this.modify)
      this.mapWrapper.map.addInteraction(new Snap({source:this.editSource}))
    }


    constructor(private mapWrapper:MapWrapper) {
      this.editSource = new VectorSource({
        url: 'https://raw.githubusercontent.com/openlayers/openlayers/main/examples/data/geojson/countries.geojson',
        format: new GeoJSON(),
        useSpatialIndex:false,
      });

      this.editLayer = new VectorLayer({source:this.editSource});

      this.mapWrapper.map.addLayer(this.editLayer);
    }
}

1 Answer 1

1

I found the issue, posting here in case it helps someone else in the future.

I was launching Chrome from the debugger in Visual Studio. Copy-pasting the link into a normal Chrome window, or launching any other browser (e.g. Firefox) from within the VS debugger makes it work as expected.

I cannot give an exact reason why Chrome, launched from VS debugger, works any differently to a regular Chrome window; both have the same version, hardware acceleration enabled.

Your Answer

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

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