title: Dynamically change point/marker on click Openlayers 5
body: <p>I am having issues trying to implement a dynamic marker in my OpenLayer Map widget. I would like that a marker/point is placed on the map "onclick". Instead of placing a new marker/point each mouse click, I would like the marker to be be refreshed on the new position. I have been trying to find some documentation on the layers/vectors and having difficulties understanding how to refresh/replace the layer...</p>
  
  <p>Here is my current OL code for my map that updates two inputs with the latitude and longitude on mouse click:</p>
  
  <pre><code>var map = new ol.Map({
      target: 'map',
      layers: [
      new ol.layer.Tile({
      source: new ol.source.OSM()
      }),
      ],
      view: new ol.View({
      center: ol.proj.fromLonLat([37.41, 8.82]),
      zoom: 4
      })
      });
  
  map.on('click', function(evt){
      var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
      var lon = lonlat[0];
      var lat = lonlat[1];
      document.getElementById("latitude").value = lat;
      document.getElementById("longitude").value = lon;
  });
  </code></pre>
  
  <p>Thanks in advance!</p>