Plotting circle in OpenLayers: trouble with transformation

Question

I am trying to display a circle on my OpenLayers map from radius and a centroid. The issue is that the transformation is not working as expected.

My map projection type is defined here:

proj4.defs("EPSG:27700","+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs");
ol.proj.proj4.register(proj4);

My centroid coordinates are in lat/lon. The code:

let circle = new ol.geom.Polygon.circular(ol.proj.transform([4, 50], 'EPSG:3857', 'EPSG:27700'), 1000); // transform long/lat of 4,50 to EPSG:22770.

let circleFeature = new ol.Feature(circle);

let vectorSource = new ol.source.Vector({
    projection: 'EPSG:27700'
});

vectorSource.addFeature(circleFeature);

var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: style, // styling not shown
    projection: 'EPSG:27700'
});

vectorLayer.setZIndex(101); // bring layer to front
maps[1].addLayer(vectorLayer); // map object

The issue is that the transformation places the circle in the incorrect place. Is there something I am missing?

Answer 1

ol.geom.Polygon.circular always takes the center as Lon Lat https://openlayers.org/en/latest/apidoc/module-ol_geom_Polygon.html#.circular and returns the result in the same projection which is EPSG:4326 so you will need to transform the result to EPSG:27700. It is not a constructor, so you do not need new.

let circle = ol.geom.Polygon.circular([4, 50], 1000).transform('EPSG:4326', 'EPSG:27700');