openlayers 4.6.5 how to move his next marker to new coordinates

Question

In openlayers 4.6.5 How can I move the next marker to new coordinates. I have tried:

var transform = ol.proj.getTransform('EPSG: 4326', 'EPSG: 3857');
var coordinate = transform([lng, lat]);
var geometry = new ol.geom.point();
geometry.setCoordinates(coordinate);
feature.setGeometry(geometry);

But it does not work when the coordinates are refilled with ajax the feature does not move.

Answer 1

I get a javascript error with the posted code: Uncaught TypeError: Cannot read property 'getCode' of null, on this line:

var transform = ol.proj.getTransform('EPSG: 4326', 'EPSG: 3857');

When I fix that, I get another javascript error: Uncaught TypeError: ol.geom.point is not a constructor, on this line:

var geometry = new ol.geom.point();

That is a typo, should be:

var geometry = new ol.geom.Point();

Then it works.

proof of concept example

working code

var coordinate = ol.proj.transform(newLngLat, 'EPSG:4326', 'EPSG:3857');
var geometry = new ol.geom.Point();
geometry.setCoordinates(coordinate);
feature.setGeometry(geometry);

code snippet:

var feature = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat([-117.1610838, 32.715738])));

var distance = 1000;
for (var j = 0; j < 100; j++) {
  setTimeout((function(j) {
    return function() {
      // compute new position
      if (j >= 50) distance = -1000;
      var posn = feature.getGeometry().getCoordinates();
      var lngLat = ol.proj.transform(posn, 'EPSG:3857', 'EPSG:4326');
      console.log(lngLat);
      var newLngLat = computeOffset(lngLat, distance, 45);
      console.log(newLngLat);

      var coordinate = ol.proj.transform(newLngLat, 'EPSG:4326', 'EPSG:3857');
      var geometry = new ol.geom.Point();
      geometry.setCoordinates(coordinate);
      feature.setGeometry(geometry);

      // var newPosn = ol.proj.transform(newLngLat, 'EPSG:4326', 'EPSG:3857');
      // pointFeature.getGeometry().setCoordinates(newPosn);
    }
  }(j)), 1000 * j);
}

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({ // TileLayer({
      source: new ol.source.TileJSON({
        url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure'
      })
    }),
    new ol.layer.Vector({ // VectorLayer({
      source: new ol.source.Vector({ // VectorSource({
        features: [feature]
      }),
      style: new ol.style.Style({
        image: new ol.style.Icon( /** @type {module:ol/style/Icon~Options} */ ({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          opacity: 0.95,
          src: 'https://openlayers.org/en/v5.1.3/examples/data/icon.png'
        })),
        stroke: new ol.style.Stroke({
          width: 3,
          color: [255, 0, 0, 1]
        }),
        fill: new ol.style.Fill({
          color: [0, 0, 255, 0.6]
        })
      })
    })
  ],
  target: 'map',
  view: new ol.View({
    center: ol.proj.fromLonLat([-117.1610838, 32.715738]),
    zoom: 9
  })
});

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

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

<link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/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://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v4.6.5/build/ol-debug.js"></script>
<script src="https://www.geocodezip.net/scripts/OLfunctions.js"></script>
<div id="map" class="map"></div>