How to move the marker icon from one latitude,longitude to another (fetched from the API) using leaflet open street map in angular

Question

I my angular application I have used the Leaflet open street map for creation of map.And I have fetched the latitude and longitude array from the API.That is

{
"Drone": {
    "Droneid": 1001,
    "latlong": [
        {
            "lat": 12.989839,
            "lon": 80.198822
        },
        {
            "lat": 13.051832,
            "lon": 80.194480
        },
        {
            "lat": 13.038453,
            "lon": 80.227442
        },
        {
            "lat": 13.009018,
            "lon": 80.242550
        },
        {
            "lat": 12.976903,
            "lon": 80.237056
        },
        {
            "lat": 12.956829,
            "lon": 80.193107
        },
        {
            "lat": 12.980917,
            "lon": 80.150531
        },
        {
            "lat": 13.007680,
            "lon": 80.149158
        },
        {
            "lat": 13.043805,
            "lon": 80.154651
        }
    ]
}
}

From the above array I have Placed the circle of 5 km radius with first object of lat,lon values from the array(i.e index 0 values from the array) and with index 1 values I have placed the drone icon,and with remaining lat,lon values(remaining objects fromt he latlong array)I have placed the dots on the map.

But now I have to move the drone icon from one latitude,longitude to another one (on the dots)those are array values 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)
}
})

So how to move the drone icon(i.e index =1) to dots in the map(from index[2] to end of the array fetched from the array)

Can anyone help me regarding this.

score 1 · Accepted Answer · answered Aug 25 '20 at 11:41

Update with setTimeout the latlng of the marker

var TIME = 1000; // 1000 milliseconds = 1 second
var latlngs = this.drones.Drone.latlong;
var START_IDX = 2;
var latlngIdx = START_IDX; // 0 = Circle, 1 = First position
var marker;

latlngs.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){
      marker = L.marker(latlng,{icon:myIcon}).addTo(map)
    }else if(idx>=2){
      L.circle(latlng,{radius:20}) .addTo(map)
    }
});

function nextLatLng(){
    if(marker){
        if(latlngIdx === latlngs.length){ // Beginn on idx 2 if last idx is reached
            latlngIdx = START_IDX;
        }
        marker.setLatLng(latlngs[latlngIdx]);
        latlngIdx++;
        setTimeout(nextLatLng,TIME); // recall nextLatLng() after 1000 ms
    }
}
nextLatLng();

Thanks@Falke Design,Worked for me.But it has to move slowly from one point to another point can you help me regarding this. — Bhargavi gottam, Aug 25 '20 at 12:23
Use one of this libraries: https://leafletjs.com/plugins.html#overlay-animations Create a polyline with the latlngs and then you can animate your marker to move on the polyline — Falke Design, Aug 25 '20 at 12:30

How to move the marker icon from one latitude,longitude to another (fetched from the API) using leaflet open street map in angular

1 Answers1