How do I set the coordinates of a new point using Openlayers?

Question

I have a map which I created using Openlayers. The map takes points from a database and plots them on the map upon pressing a button on the page. These work as expected. What I would like to do is add a new point when the user doubleclicks somewhere on the map. I'm not worried about saving it to the database yet and this is purely just to add a new point to the existing layer with the database-loaded points on.

My code looks like this currently:

map.on('dblclick', function (evt) {
console.log(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'));
addMarker(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'));

and

function addMarker(evt) {



var array = evt.toString().split(",").map(Number);
var long = array[0];
var lat = array[1];
toastr.info(long);
toastr.info(lat);
var marker = new ol.Feature(
    new ol.geom.Point([long, lat])
);



var zIndex = 1;
marker.setStyle = [new ol.style.Style({
    image: new ol.style.Icon(({
        anchor: [0.5, 36], 
        anchorXUnits: "fraction",
        anchorYUnits: "pixels",
        opacity: 1,
        src: "images/pinother.png", 
        zIndex: zIndex
    })),
    zIndex: zIndex
})];

vectorSource.addFeature(marker);}

This does create a point on the map with the correct look, but it's always at the origin point; 0,0 latitude/longitude!

Using toastr (a styled alerts function) in my addMarker function I can see that variables "lat" and "long" are being populated correctly, so it must be part of the

var marker = new ol.Feature(
new ol.geom.Point([long, lat])

point creation that I am not doing correctly. The coordinates being passed have large values eg "62.915233039476135", is there a limit on how long this should be or am I missing something else that is preventing my new point taking any coordinates?

Answer 1

As Mike indicated in the comments, just pass the coordinates from the event to the addMarker function.

FYI - you also have issues with the marker styling.

working example

relevant code:

  map.on('dblclick', function (evt) {
    console.log(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'));
    addMarker(evt.coordinate);
  });

  function addMarker(coordinates) {
    console.log(coordinates);
    var marker = new ol.Feature(new ol.geom.Point(coordinates));
    var zIndex = 1;
    marker.setStyle(new ol.style.Style({
      image: new ol.style.Icon(({
        anchor: [0.5, 36], 
        anchorXUnits: "fraction",
        anchorYUnits: "pixels",
        opacity: 1,
        src: "mapIcons/pinother.png", 
        zIndex: zIndex
      })),
      zIndex: zIndex
    }));
    vectorSource.addFeature(marker);
  }

code snippet:

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

 <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css"> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.0/build/ol.js"></script> <div id="map" class="map"></div> <script> var vectorLayer = new ol.layer.Vector({ // VectorLayer({ source: new ol.source.Vector(), }); var map = new ol.Map({ layers: [ new ol.layer.Tile({ // TileLayer({ source: new ol.source.OSM() }), vectorLayer, ], target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); console.log(map.getInteractions()); var dblClickInteraction; // find DoubleClickZoom interaction map.getInteractions().getArray().forEach(function(interaction) { if (interaction instanceof ol.interaction.DoubleClickZoom) { dblClickInteraction = interaction; } }); // remove from map map.removeInteraction(dblClickInteraction) var vectorSource = vectorLayer.getSource(); function addMarker(coordinates) { console.log(coordinates); var marker = new ol.Feature(new ol.geom.Point(coordinates)); var zIndex = 1; marker.setStyle(new ol.style.Style({ image: new ol.style.Icon(({ anchor: [0.5, 36], anchorXUnits: "fraction", anchorYUnits: "pixels", opacity: 1, src: "https://openlayers.org/en/latest/examples/data/icon.png", zIndex: zIndex })), zIndex: zIndex })); vectorSource.addFeature(marker); } map.on('dblclick', function(evt) { console.log(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326')); addMarker(evt.coordinate); }); var south = 24.0; var west = -125.8; var north = 49.6; var east = -66.4; // [maxx, maxy, minx, miny] var extent = ol.proj.transformExtent([east, north, west, south], 'EPSG:4326', 'EPSG:3857'); map.getView().fit(extent, { size: map.getSize(), padding: [5, 5, 5, 5] }); </script>