I have almost 500 markers, and these markers have another marker. These two markers are also in motion. It gets a location update every 10 seconds.
Black circle marker is main marker, blue one is connected marker:
I control the connected marker into layer control.
When the map is first opened, the black marker moves one at 10 sec. After 1 minute, when I open the marker connected to the layer control, I see that it creates 5-6 markers in a row.
Expected result: As in the first photo, a black marker and connected marker should be one. They should move together.
Actual result: The connected marker creates lots of markers in the background of the map. When I click on the control, all the markers are shown on the map.
From the moment the map is first opened, all markers are formed and stored in the background. The black marker does not repeat itself on the map, but the other marker makes up all the locations.
layerGroup.removeLayer()
can't delete markers that occur in the background. With layerGroup[1].clearLayer()
, the situation becomes more complicated. This time, a marker disappears after 10 seconds and forms again.
A connected marker creates a marker by repeating it at all locations it passes through.
Is there a method I can delete markers that occur in the background? When the user stays on the map for a long time, the map slows down and freezes. Map performance crashes due to the fact that markers that occur in 10 seconds are not deleted.
getAllData() {
this.subscribed = true;
const source = timer(0, this.VEHICLE_DATA_REFRESH_TIME);
this.timerSubscription = source.subscribe((val) => {
this.getMarkers();
});
this.subscriptions.push(this.timerSubscription);
}
getMarkers() {
this.locationService.getLocation().subscribe((res) => {
if (res.data) {
res.data.location.forEach(item => {
this.addMainMarker(item);
this.addConnMarker(item);
})
}
});
}
When debugging, all the markers appear in the background. Different location information for the same vehicles comes out. I need a bit method where I can delete them.
I'm using Angular, ngx-admin template
Laeflet version: "1.5.1"