i want to remove all marker s from map and trying to remove markers with map.remove
i am using vue.js with leaflet to show map i got a object to record lng and lat
router_planning: [
{
car: [
{
name: "001",
lat: 25.042474,
lng: 121.513729,
},
{
name: "002",
lat: 24.982474,
lng: 121.613729,
},
{
name: "003",
lat: 24.894474,
lng: 121.623729,
},
],
},
{
car: [
{
name: "004",
lat: 24.982474,
lng: 121.513729,
},
{
name: "005",
lat: 24.882474,
lng: 121.513729,
},
{
name: "006",
lat: 24.982474,
lng: 121.713729,
},
],
},
],
and two function below initmap() //set view
initmap() {
this.mapp = L.map("map");
this.mapp.setView(
[
this.router_planning[0].car[0].lat,
this.router_planning[0].car[0].lng,
],
10
);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 13,
minZoom: 9,
}).addTo(this.mapp);
},
make_map() //give map marker
make_map() {
for (let i = 0; i < this.router_planning.length; i++) {
for (let j = 0; j < this.router_planning[i].car.length; j++) {
L.circleMarker(
[
this.router_planning[i].car[j].lat,
this.router_planning[i].car[j].lng,
],
{
color: this.circle_marker[i],
fillColor: this.circle_marker[i],
fillOpacity: 1,
radius: (i + 1) ** 2,
}
)
.addTo(this.mapp)
.bindTooltip(this.router_planning[i].car[j].name.toString(), {
permanent: true,
});
}
},
my web should work like this first initmap() then make_map()
i got a button to trigger make_map() to change lat and lng
but old marker didn't disappear
i have tried add
this.mapp.remove() to the top of make_map()
i got error message
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'appendChild')
i have tried add this to top of make_map with no error
but didnt clear marker
var container = L.DomUtil.get('map');
container._leaflet_id = null;
i have watched many article to clear map but still didn't work it's make me crazy to find out why i can't clear or remove map
thanks alot
To remove all markers from the map you must first store them somewhere.
You can store all markers inside of an array:
const markers = [];
const marker = L.circleMarker([...])
.bindTooltip([...])
.addTo(map);
markers.push(marker);
And to remove them you need to call:
for(let i = 0; i < markers.length; i++) {
map.removeLayer(marker[i]);
}
But there's a better way to do it if you don't need to remove specific marker, use LayerGroup().
Example:
const layerGroup = new L.LayerGroup();
const marker = new L.marker([...]).addTo(layerGroup);
//after you've added all markers to layerGroup():
map.addLayer(layerGroup)
And to remove all markers simply call: map.removeLayer(layerGroup)