Clear Points and Replot a new one

Question

Is it possible to reset or clear the map and plot new points? I have a search box that am using to query a geojson API.

After the first mapped result, the second search is plotted in addition which I do not want. What I want to achieve is, if I search, that result should be plotted not all subsequent searches I make.

Is there a way, to overwrite that first plotted result or remove it before plotting a new search result?

button.addEventListener('click', function(e) {
    inputVal = input.value;
    // console.log(inputVal);
    getPointLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            url: 'http://0.0.0.0:5000/api/v1/dumela/' + inputVal,
            format: new ol.format.GeoJSON()
        }),
        style: styleFunction
    });

    var layersOnMap = map.getLayers();
    // reset the map, clear all point
    if (layersOnMap) {
        map.removeLayer(getPointLayer);
    }

    console.log(layersOnMap.length);
    map.addLayer(getPointLayer);
});

Answer 1

The issue is that there isn't a command to clear and redraw those points without keeping all subsequent points from your input. You can:

try calling vectorLayer.redraw(); afterward

Answer 2

I don't think removeLayer() clears the existing data. You should also be clearing the vector source when the function initializes. And if you do this I don't think removing layer is necessary unless you don't need it any more. If that doesn't work try adding the removeLayer() before the getPointLayer is defined.

Try adding source.clear() in the function as shown below. Here's the api doc for this.

button.addEventListener('click', function(e) {
    var layersOnMap = map.getLayers();
    // reset the map, clear all point
    if (layersOnMap) {
        map.removeLayer(getPointLayer);
    }
    //Clearing the source
    if(pointSource){
        pointSource.clear();
    }
    inputVal = input.value;
    // console.log(inputVal);
    pointSource = new ol.source.Vector({
        url: 'http://0.0.0.0:5000/api/v1/dumela/' + inputVal,
        format: new ol.format.GeoJSON()
    });

    getPointLayer = new ol.layer.Vector({
        source: pointSource,
        style: styleFunction
    });

    map.addLayer(getPointLayer);
});

Answer 3

This is the little hack i did. I destroy the previous plot by new ol.layer.Group and then i called map.addLayer(hgtmap) again.

....

if (pointSource.getState() === "ready") {
    map.setLayerGroup(new ol.layer.Group());
    map.addLayer(hgtmap);
 }

 ....