So i'm new to Open Layers, i'm using it for a school project, i've watched some tutorials about how to add points to the map but for some reason the points are not showing, i'm not sure what i'm doing wrong, here's my code
blade.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>
map.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);
I'm not sure if something's missing, the map does show up but the circle/point doesn't, help please.