How to delete markers from OSM

Question

I'm doing an web application that uses Open Street Maps and I'm adding some markers to it. I need to delete all layers that are on the map.

I´ve already tried some examples that I found on other questions but none of them worked for me. I'm not sure if I'm using open layers.

Here is the code to create the map:

function initialize_map() {
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
    map = new ol.Map({
        target: "map",
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM({
                    url: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
                })
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([mapLng, mapLat]),
            zoom: mapDefaultZoom
        })
    });
    GetDados();
}

And this is the code that I'm using to add the markers:

function add_map_point(lat, lng) {
    var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
            })]
        }),
        style: new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [0.5, 0.5],
                anchorXUnits: "fraction",
                anchorYUnits: "fraction",
                src: "https://www.freeiconspng.com/minicovers/bus-driver-icon-png-1.png"
            })
        })
    });
    map.addLayer(vectorLayer);
}

Answer 1

while (map.getLayers().removeAt(1)) {}

would remove all layers from the map apart from index 0 which is your OSM layer.

But why do you need a layer for each marker? If you create a vector layer when you initialise the map you only need to add you points

function initialize_map() {
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
    var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [0.5, 0.5],
                anchorXUnits: "fraction",
                anchorYUnits: "fraction",
                src: "https://www.freeiconspng.com/minicovers/bus-driver-icon-png-1.png"
            })
        })
    });
    map = new ol.Map({
        target: "map",
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM({
                    url: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
                })
            }),
            vectorLayer
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([mapLng, mapLat]),
            zoom: mapDefaultZoom
        })
    });
    GetDados();
}

function add_map_point(lat, lng) {
    vectorLayer.getSource().addFeature(
        new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
        })
    );
}

and can easily clear them

vectorLayer.getSource().clear();