Incorrect display of a point on the map

Question

I want to add a point to the map with coordinates.

The point is always displayed in the center of the map. Here is my code.

// map creation

this.map = new Map({
  view: new View({
    center: [0, 0],
    zoom: 1,
  }),
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  target: 'ol-map'
});

// adding a point

const point = new Point([+latitude, +longitude]);
const feature = new Feature(point);
const vectorSource = new VectorSource({features: [feature]});
const pointLayer = new VectorLayer({zIndex: 3, source: vectorSource});
this.map.addLayer(pointLayer);

map When I get the coordinates of a point they are correct point.getCoordinates()

Answer 1

Make sure you know your projection and your lat lon are the other way around.

let latitude = 41.18702782291;
let longitude = 15.450187402143;

let map;
$(document).ready(function() {
    // CREATE MAP
    map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM({
                    wrapX: false
                }),
                projection: 'EPSG:4326',
                visible: true
            })
        ],
        target: 'map',
        view: new ol.View({
            projection: 'EPSG:4326',
            center: [longitude, latitude],
            zoom: 7,
        })
    });
    
    // adding a point
    const point = new ol.geom.Point([longitude, latitude]);
    const feature = new ol.Feature(point);
    const vectorSource = new ol.source.Vector({features: [feature]});
    const pointLayer = new ol.layer.Vector({zIndex: 3, source: vectorSource});
    map.addLayer(pointLayer);
});