My code display a real-time GPS track on a map. Each time I receive a GPS position, I update the polyline. Sometimes, I observe that the previous arrow disappear when the new polyline is displayed.
`map = L.map('map').setView([43.001359, 6.233636], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: ['a', 'b', 'c'],
}).addTo(map);
polyline = new L.polyline([], {
color:'red',
weight: 2,
opacity:0.8,
smoothFactor: 1.0
});
polyline.arrowheads({yawn: 40, fill: true, size: '12px'}).addTo(map)`
...
`// called when a message arrives
function onMessageArrived(message) {
console.log("onMessageArrived:"+message.payloadString);
let messageElem = document.createElement('div');
messageElem.textContent = message.payloadString;
document.getElementById('messages').prepend(messageElem);
obj = JSON.parse(message.payloadString);
console.log(obj.lat, obj.lng);
polyline.addLatLng([Number(obj.lat), Number(obj.lng)]);
polyline.arrowheads({yawn: 40, fill: true, size: '12px'}).addTo(map);
}`