What is wrong on this code that the marker is not being displayed in the map?

Question

can anybody tell me why this does not work. it is practically the same than the example https://openlayers.org/en/latest/examples/icon.html but it does not work in my project. Im using "ol": "^6.3.1". i spent a long time with out results trying to fix this.

import {Map, View, Feature} from 'ol';
import OSM from 'ol/source/OSM';
import { fromLonLat, transform } from 'ol/proj';
import {Tile as TileLayer, Vector as VectorLayer}  from 'ol/layer'
import VectorSource from 'ol/source/Vector';
import {Icon, Style} from 'ol/style';
import Point from 'ol/geom/Point';

  const iconFeature = new Feature({
    geometry: new Point([fromLonLat([-66.119412,-17.388694])]),
    name: 'Null Island',
    population: 4000,
    rainfall: 500,
  });

  const iconStyle = new Style({
    image: new Icon({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: 'https://openlayers.org/en/latest/examples/data/icon.png',
    }),
  });
  iconFeature.setStyle(iconStyle);

  const vectorSource = new VectorSource({
    features: [iconFeature]
  });

  const vectorLayer = new VectorLayer({
    source: vectorSource
  });

 var map = new Map({
    layers: [
      new TileLayer({
        source: new OSM()
      }), vectorLayer ],
    target: document.getElementById('map'),
    view: new View({
      center: fromLonLat([-66.119412,-17.388694]),
      zoom: 15
    })
  });

Answer 1

As Mike indicated in his comment, you have an extra set of square brackets in the argument to the Point constructor:

geometry: new Point([fromLonLat([-66.119412,-17.388694])]),

should be

geometry: new Point(fromLonLat([-66.119412,-17.388694])),

proof of concept fiddle

const iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([-66.119412, -17.388694])),
  name: 'Null Island',
  population: 4000,
  rainfall: 500,
});

const iconStyle = new ol.style.Style({
  image: new ol.style.Icon({
    anchor: [0.5, 46],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    src: 'https://openlayers.org/en/latest/examples/data/icon.png',
  }),
});
iconFeature.setStyle(iconStyle);

const vectorSource = new ol.source.Vector({
  features: [iconFeature]
});

const vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }), vectorLayer
  ],
  target: document.getElementById('map'),
  view: new ol.View({
    center: ol.proj.fromLonLat([-66.119412, -17.388694]),
    zoom: 15
  })
});

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 100%;
  width: 100%;
}

<link rel="stylesheet" href="https://openlayers.org/en/v6.3.0/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v6.3.0/build/ol.js" type="text/javascript"></script>
<div id="map" class="map"></div>