Openlayers 4.6.5 Drawing not populating on map

Question

The code is as follows

@Input( 'coreMap' ) coreMap :CoreMapComponent
  vectorLayer : VectorLayer;
  modifyLayer : Modify;
  draw: Draw;
  vectorSource: VectorSource;
  style: Style;
  snap: Snap;

  ngOnInit(){
    this.vectorSource = new VectorSource({wrapX: false});
    this.style = new Style({
      geometry: 'circle',
      fill: new Fill({
        color: '#ffcc33'
      }),
      stroke: new Stroke({
        color: '#ffcc33',
        width: 2
      }),
      image: new CircleStyle({
        radius: 7,
        fill: new Fill({
          color: '#ffcc33'
        })
      })
    })
      this.vectorLayer = new VectorLayer({
        source: this.vectorSource,
        style: this.style
      });
    this.modifyLayer = new Modify({source: this.vectorSource});
    }

  addLayer(){
    this.coreMap.layerManager.addLayer(this.vectorLayer)
  }
  getLayers(){
    console.log(this.coreMap.map.getLayers().getArray());
  }

  addInteraction() {
    this.coreMap.map.addInteraction(this.modifyLayer);
    this.draw = new Draw({
      source: this.vectorSource,
      type: 'Circle'
    });
    this.coreMap.map.addInteraction(this.draw);
    this.snap = new Snap({source: this.vectorSource});
    this.coreMap.map.addInteraction(this.snap);
  }

  changeInteraction(){
    this.coreMap.map.removeInteraction(this.draw);
    this.coreMap.map.removeInteraction(this.snap);
    this.addInteraction();
  }

This will allow me to bring up the circle drawing tool and set the size etc, but when I double click to end the drawing it doesn't save anything on the map.

I thought maybe my new layer is being put at the bottom of the array but OpenLayers documentation says it should be at the top of the array.

*** Update

If I remove the styles from the new layer everything seems to work, why is this? As I am planning on making the styles customisable.

Answer 1

I see that I made a mistake by adding the incorrect geometry: 'circle', property by assuming that this refers to the actual shape of the object when in fact it refers to things such as the scale and so forth.

this.style = new Style({
      fill: new Fill({
        color: '#ffcc33'
      }),
      stroke: new Stroke({
        color: '#ffcc33',
        width: 2
      }),
      image: new CircleStyle({
        radius: 7,
        fill: new Fill({
          color: '#ffcc33'
        })
      })
    })

Fixes this issue.