In my Angular application, I have integrated the Leaflet open street map for displaying a map. The latitude and longitude array has been retrieved from an API as follows:
{
"Drone": {
"Droneid": 1001,
"latlong": [
{
"lat": 12.989839,
"lon": 80.198822
},
{
"lat": 13.051832,
"lon": 80.194480
},
...
]
}
}
Using this array, I have placed a circle of a 5 km radius with the first set of latitude and longitude values (index 0) representing the center. The drone icon is placed at index 1, and the rest of the dots on the map are displayed using the remaining latitude and longitude values.
Now, I need to move the drone icon from one set of coordinates to another one corresponding to the dots fetched from the API.
Dashboard.component.ts
var map = L.map('map').setView([13.0827, 80.2707], 11);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
} ).addTo(map);
this.drones.Drone.latlong.forEach((latlong, idx)=>{
var latlng = L.latLng(latlong.lat,latlong.lon)
if(idx === 0){
L.circle(latlng,{radius:5000}).addTo(map);
}else if(idx===1){
L.marker([latlong.lat,latlong.lon],{icon:myIcon}) .addTo(map)
}
else if(idx>=2){
L.circle(latlng,{radius:20}) .addTo(map)
}
})
I am seeking guidance on how to animate the movement of the drone icon (index = 1) along the dots on the map starting from index[2] until the end of the array fetched from the API.
If anyone can assist me with this, it would be greatly appreciated.