OpenLayers 5 not displaying vector layer with feature when adding style

Question

I've been trying to place a simple marker (modeled as an ol.geom.Point) on a map in OpenLayers 5 and style it. I create a feature wrapping this ol.geom.Point, than create a VectorSource that uses it, and than instantiate a VectorLayer with that source as the source as in the following code:

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import GeoJSON from 'ol/format/GeoJSON';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';

let markerFeature = new Feature({
    geometry: new Point([0, 10000000 ]),
});
let markerSource = new VectorSource({
    features: [markerFeature],
});
let markerLayer = new VectorLayer({
    source: markerSource,
});

let markerView = new View({
    center: [0, 0],
    zoom: 2,
});

new Map({
    target: 'map-container',
    layers: [
        new VectorLayer({
            source: new VectorSource({
                format: new GeoJSON(),
                url: './data/countries.json',
            }),
        }),
        markerLayer
    ],
    view: markerView
});

This does what I expect it to do: draw a point on the coordinate [0, 0]. However, when I add a simple style to the markerLayer object containing a stroke with a red color like this, OpenLayers seems to draw nothing:

let markerLayer = new VectorLayer({
    source: markerSource,
    style: new Style({
        stroke: new Stroke({color: 'red'}),
    }),
});

I use yarn to run the project. I get no compilation errors. I also get no errors in the browser console. The same problem occurs in Firefox, Chrome and Edge.

I wonder if someone has ran into similar issues with this seemingly trivial task before. Does anyone have any suggestions about what could be the culprit?

Thanks a lot in advance!

Answer 1

Please use:

new ol.style.Circle({
   radius: 10,
   stroke: new ol.style.Stroke({
     color: "red",
     width: 2
   }),
   fill: new ol.style.Fill({
     color: "blue"
   })
 })