On my map, I use arc.js to draw trade routes between countries as arcs. Each arc represents a different year, and I want to be able to update them based on the selected year.
This is how I create the arcs:
// Draw arcs for each trade route
var line_to_add;
for(var q = 0; q < dest_Coor.length; q++) {
var start = {x: from_Coor[0][0], y: from_Coor[0][1]};
var end = {x: dest_Coor[q][0], y: dest_Coor[q][1]};
var generator = new arc.GreatCircle(start,end);
var line = generator.Arc(100, {offset: 10});
line_to_add = L.geoJson(line.json(), {
color: "#004c00"
});
allArrows.push(line_to_add);
line_to_add.addTo(map);
}
When a different year is chosen, I attempt to delete the current arcs like this:
function deleteOldArcs() {
for(var i = 0; i < allArrows.length; i++) {
map.removeLayer(allArrows[u]);
}
allArrows.length = 0;
}
However, the program freezes when trying to remove the layers using map.removeLayer(allArrows[u]). I have confirmed that the arc objects are in map._layers, so why does map.removelayer not work?
I would appreciate any assistance with this issue. Thank you!