How to detect marker goes inside and outside of the circle using leaflet open street map in angular

I have used the Leaflet open street map. With the API I have fetched the latitude, longitude array and placed the locations - something like this:

{
  "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 3 km radius with index-0, and placed the drone icon with index-1 and with the remaining index values (lat, long) placed the dots on the map.

And created the movement of drone from one latitude, longitude to another starting from index-2.

.component.ts

var  map = L.map('map').setView([12.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);

var TIME = 2000; 
//var TIME = 1;

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);
      marker = L.marker(latlng,{icon:sensoricon}).addTo(map)
     // L.circle(latlng,{radius:100}).addTo(map);
      

    }else if(idx===1){
      marker = L.marker(latlng,{icon:myIcon})
      .bindTooltip( this.drones.Drone.Droneid  ).addTo(map)
    }else if(idx>=2){
      //L.circle(latlng,{color: '#3388ff'},{radius:70}).addTo(map)
      var circleMarker = L.circle(latlng,{color: 'red'},{radius:100}).addTo(map)
    }
});

function nextLatLng(){
    if(marker){
        if(latlngIdx === latlngs.length){
            latlngIdx = START_IDX;
            
        }
        marker.setLatLng(latlngs[latlngIdx]);
        //.bindPopup( this.latlngs.lat,this.latlngs.lon  );
        latlngIdx++;
        //function () { marker.slideTo(START_IDX,   {duration:5000}); };
        setTimeout(nextLatLng,TIME); 
    }
}
nextLatLng();

Now I have to make the circle as four quadrants(90 degrees) and if the drone comes inside the circle that particular arc should be turn to red and if the drone comes out of the circle circle should be turn to previous color(blue).

Note:If the drone is moving out of the circle it should be disappear (should not show drone icon)

1 Like

Welcome!

I’m not sure I understand the question as we don’t live-track any sUAS positions within OpenDroneMap. What are you looking to do exactly?

Have you tried the Leaflet docs?:
https://leafletjs.com/reference.html

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.