Upon the map loading with GeoJson data, I have implemented code to display markers at specified locations. It works flawlessly, but I am seeking a way to remove previous markers when new ones are added. What adjustments should be made for this desired functionality?
Below is the complete function:
prepareGeoJsonData(data) {
let features = [];
let counter = 0;
for (let val of data) {
features.push({
type: "Feature",
geometry: val.address.geometry.border,
center: val.address.geometry.center,
properties: {
center: val.address.geometry.center.coordinates,
landUnitId: val.memberOf.parcel[0]
},
id: counter++,
});
//
code for marker customization
//
let marker = new mapboxgl.Marker(el)
.setLngLat(cords)
// .setPopup(popup)
.addTo(this._mapRef);
this.markers.push(marker);
}
};
return {
type: "FeatureCollection",
features: features
};
}
Current Flow:
Page Loads -> Map Loads -> Markers Appear -> Apply filters -> New Markers Added -> Previous Markers Still Present
Required Flow:
Page Loads -> Map Loads -> Markers Appear -> Apply filters -> New Markers Added -> Previous Markers Disappear