Currently working on a map for an interface where users click on a map to get their longitude and latitude. So far I have managed to get the lon and lat data and have it input in the form, but having difficulties displaying a marker where the user has clicked, and removing it when the user clicks on a new location. any ideas?

this is my function:

initLocationPicker: function (){

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],

        target: 'map',
        view: new ol.View({
            center: [13.4050,52.5200],
            zoom: 2
        })
    });

    var formId = this.formId;
    var form = document.forms[formId];


    map.on('singleclick', function (evt) {

        var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
        var lon = lonlat[0];
        var lat = lonlat[1];
        console.log(lonlat);

        form.elements.longitude.value = lon
        form.elements.latitude.value = lat

    });
},

I hope this snippet helps, otherwise i'll try and add a jsfiddle.