Circle layer not showing in OpenLayers 3

Question

I'm trying to show a number of circles on top of an OpenStreetMap using OpenLayers 3. The map displays correctly, however I do not see any circles and I get no JavaScript errors. I am using the following code:

<div id="map" class="map"></div>
    <script type="text/javascript">
        var circle = new ol.geom.Circle({
            center: [-2.59394, 51.45271],
            radius: 10
        })
        circle.transform('EPSG:4326', 'EPSG:3857');

        var congestionLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [new ol.Feature({
                    geometry: circle
                })]
            }),
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: "#000000"
                })
            }),
            visible: true
        })

        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                congestionLayer
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([-2.59394, 51.45271]),
                zoom: 10
            })
        });
    </script>

What am I doing wrong?

Answer 1

the problem is within the way you create the circle, I tried it and the ol.geom.Circle isn't created, you should declare it like this instead :

var circle = new ol.geom.Circle([-2.59394, 51.45271], 0.01).transform('EPSG:4326', 'EPSG:3857');

    //circle.transform('EPSG:4326', 'EPSG:3857');
    var feature=new ol.Feature({
        geometry: circle
    });

    var congestionLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [feature]
        }),
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.2)'
            }),
            stroke: new ol.style.Stroke({
                color: '#737373',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#ffcc33'
                })
            })
        }),
        visible: true
    })

    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            congestionLayer
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([-2.59394, 51.45271]),
            projection: 'EPSG:3857',
            zoom: 10
        })
    });

see that I changed the radius to 0.001 that's because when the projection is transformed a value of 10 to the radius is huge and takes nearly all england