Así que soy nuevo en Open Layers, lo estoy usando para un proyecto escolar, he visto algunos tutoriales sobre cómo agregar puntos al mapa, pero por alguna razón los puntos no se muestran, no estoy seguro de qué estoy haciendo mal, aquí está mi código

hoja.php

 <div id="map" class="map"></div>
 <div id="popup" class="ol-popup">
 <a href="#" id="popup-closer" class="ol-popup-closer"></a>
 <div id="popup-content"></div>
 </div>
 <script src="{{ asset('js/map.js') }}"></script>

mapa.js

 import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import {Fill, Stroke, Style} from 'ol/style';
import Point from 'ol/geom/Point';
import Feature from 'ol/Feature';
import {fromLonLat, useGeographic} from 'ol/proj';
import {Circle} from 'ol/geom';
import Overlay from 'ol/Overlay';
import OSM from 'ol/source/OSM';

useGeographic();

var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');

var map = new Map({
 target: 'map',
 layers: [
 new TileLayer({
 source: new OSM({})
 }),
 ],
 view: new View({
 center: [/* here are some coordinates */],
 zoom: 16
 })
}); 

var overlay = new Overlay({
 element: container,
 autoPan: true,
 autoPanAnimation: {
 duration: 250
 }
 });

map.addOverlay(overlay);

var layer = new VectorLayer({
 source: new VectorSource({
 features: [
 new Feature({
 geometry: new Point(fromLonLat([/* here are some coordinates */])),
 name: 'layer one',
 })
 ]
 }),
 style: new Style({
 image: new Circle({
 radius: 7,
 fill: new Fill({color: 'black'}),
 stroke: new Stroke({
 color: [255,0,0], width: 2
 })
 })
 })
});

map.addLayer(layer);

No estoy seguro si falta algo, el mapa aparece pero el círculo/punto no, ayuda por favor.