Circle drawn in Openlayers not changing properly

Question

I have a JS file that allows me to draw a circle on an interactive made with Openlayers 4.6.5. The problem I currently have is that once the circle is drawn, I can no longer properly change the size of it using the setRadius function. The circle changes visually on the map but the coordinates remain the same.

This is because the drawCircle function parses the circle into a polygon. This is needed for the ETL program that I use (FME) to be able to use it as a search area.

// Uses the functionalities of the NL Maps and Open Layers to create an interactive map.

var nlMapsHolder = document.getElementById('nlmaps-holder');
    nlMapsHolder.style.height = '100%';


var opts = {
        style: 'standaard',
        target: 'nlmaps-holder',
        center: {
            longitude: 6.552349082194269,
            latitude: 53.223153959705804
        },
        overlay: 'percelen',
        marker: false,
        zoom: 11,
        search: true
    };
 var myMap = nlmaps.createMap(opts);
 
var source = new ol.source.Vector()

var vector_layer = new ol.layer.Vector({
    name: 'my_vectorlayer',
    source: source,
    format: new ol.format.WKT(),
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.2)'
        }),
        stroke: new ol.style.Stroke({
            color: '#ffcc33',
            width: 2
        }),
        image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({
                color: '#ffcc33'
            })
        })
    })
});


// Links this JS file with an Html file that contains the buttons on the interactive map

document.getElementById( "drawC" ).setAttribute( "onclick", "drawCircle();" );
// document.getElementById( "editC" ).setAttribute( "onclick", "editCircle();" );
document.getElementById( "reset" ).setAttribute( "onclick", "removeCircle();" );

myMap.addLayer(vector_layer);

var modify = new ol.interaction.Modify({source: source });
myMap.addInteraction(modify);


//Draws a circle by clicking once and then dragging until a suitable size has been attained. The second click creates the circle.

function drawCircle(){
    source.getFeatures().forEach(function(feature){
        vector_layer.getSource().removeFeature(feature);
    });
    

    draw = new ol.interaction.Draw({
        source: source,
        type: 'Circle'
    });
    myMap.addInteraction(draw);
    

    draw.on('drawend', function(event) {    
        
        
        geometry = event.feature.getGeometry();
        var radius = geometry.getRadius();
        var center = geometry.getCenter();
        $('#radius').val(radius);
        

    // The lines of code below change the geometry type from circle to polygon. This is for an ETL program (FME) to be able use it as an area to search in. 
    // By inluding this piece of code, changing the radius of the circle no longer has an effect on the search area.

    var polygon = new ol.geom.Polygon.fromCircle(event.feature.getGeometry());
        
        let parser = new ol.format.GeoJSON();
        let area = parser.writeGeometry(polygon);
        var geom = JSON.stringify(area);//.replace(/"/g,'\\"');
        $('#geom').attr('value', geom);
        $('#geom').change();
        myMap.removeInteraction(draw);


     });    
}


// This function works by retrieving the radius values from an html file which makes a text bar with a submit button that feeds its value into this function

function setRadius(){
    
    var radius = geometry.getRadius();
         var center = geometry.getCenter();
         
    
         geometry.setRadius( parseFloat($('#radius').val()));
         console.log(geometry.getRadius());

    
         draw = new ol.interaction.Draw({
            source: source,
            type: 'Circle'
        });
        myMap.addInteraction(draw);
        
    
         
}

// This is an earlier test to try and increase the size of the existing circle

// function editCircle() {
//  source.getFeatures().forEach(function(feature){
//      vector_layer.getSource(feature);
//  })
//  var test = 'test 123';
//  console.log(test);
//  //$('#geom').radius = $('#geom').radius + 20)
//  }

function removeCircle(){
    
    source.getFeatures().forEach(function(feature){
        vector_layer.getSource().removeFeature(feature);
    });         
}

What I would like is for there to be a solution where the circle can be adjusted in size but still be parsed into a polygon at the end of the setRadius function.

Libraries include JQuery, Openlayers, NL Maps.

Any help would be welcome.

Answer 1

The problem has been solved by adding the following code to the drawCircle function

modify = new ol.interaction.Modify({source: source, type: 'Circle' });
 myMap.addInteraction(modify);

 modify.on('modifyend',function(event){
        geometry = event.features.getArray()[0].getGeometry();
        var radius = geometry.getRadius();
        console.log(radius / 2);

        var polygon = new ol.geom.Polygon.fromCircle(geometry);
    
        let parser = new ol.format.GeoJSON();
        let area = parser.writeGeometry(polygon);
        var geom = JSON.stringify(area);//.replace(/"/g,'\\"');
        $('#geom').attr('value', geom);
        $('#geom').change();
       
 });

Further more I have added this bit of code to the editCircle function:

var polygon = new ol.geom.Polygon.fromCircle(geometry);
    
        let parser = new ol.format.GeoJSON();
        let area = parser.writeGeometry(polygon);
        var geom = JSON.stringify(area);//.replace(/"/g,'\\"');
        $('#geom').attr('value', geom);
        $('#geom').change();

 };

It should also be noted that I added '/ 2' to various parts of the functions to ensure the radius from the centre is shown instead of the diameter.