How to place the arc of angle 45 inside the circle of 3km radius using leaflet map in angular

Question

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.

Now I have to place an arc of 45 degrees angle inside the circle and if the drone comes inside the circle it has to changed to red color.

.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();

I have tried many ways but it's not working. Can anyone help me with this?

Falke Design · Accepted Answer · 2020-08-27T08:43:03.613

0

You can use the destination function from GeometryUtil to create your 45 degree area and then check if the point is in the area isMarkerInsidePolygon

var circle = L.circle(latlng,{radius:5000}).addTo(map); // your big circle
...
var MIDDLE_LINE_DEGREE = 180;
var p1 = destination(circle.getLatLng(), MIDDLE_LINE_DEGREE-22.5, circle.getRadius());
var p2 = destination(circle.getLatLng(), MIDDLE_LINE_DEGREE+22.5, circle.getRadius());
var p3 = L.GeometryUtil.destination(circle.getLatLng(), MIDDLE_LINE_DEGREE+22.5, circle.getRadius());
var area = L.polygon([circle.getLatLng(),p1,p2.p3]).addTo(map);

...

function nextLatLng(){

....
var inPolygon = isMarkerInsidePolygon(marker,area)
if(inPolygon){
   circle.setStyle({color: 'red'});
}else{
   circle.setStyle({color: '#3388ff'});
}
....
}

https://jsfiddle.net/falkedesign/73xhLdcf/

But keep in mind that you create a polygon not a part of a round circle

edited Aug 27 '20 at 08:43

answered Aug 26 '20 at 09:45

Falke Design

10,635
3
15
30

Thanks@Falke Design – Bhargavi gottam Aug 26 '20 at 11:36
How can I make my circle as four quadrants, and based on that if the drone is inside the circle it should be turn to red if leaves the circle turn to blue.Can you please help me regarding this I have never involved in this area before. – Bhargavi gottam Aug 26 '20 at 16:22
What do you want to turn red? The circle or the drone? When you want to show the drone red you have to change the icon with `setIcon` https://leafletjs.com/examples/custom-icons/ – Falke Design Aug 27 '20 at 05:07
I want to turn the circle color as red if drone comes inside the circle. And if drone leaves the circle it will turn to blue(circle). – Bhargavi gottam Aug 27 '20 at 05:20
I have already added this in the code. `circle.setStyle({color: 'red'});`. Maybe I undstand you wrong? Can you explain it new – Falke Design Aug 27 '20 at 05:38
My requirement is to divide the circle as four quadrants (90 degrees).and the drone is moving if the drone comes inside the circle that particular arc should be turn to red,if drone moves out of the circle gain turn to blue.Can you help me for the above code. – Bhargavi gottam Aug 27 '20 at 06:07
I have used the above code but not showing the result and I am new to this leaflet can you please help me regarding this. – Bhargavi gottam Aug 27 '20 at 08:13
I added a example – Falke Design Aug 27 '20 at 08:43
Hi @Falke Design ,I have another drone details are in array like above with same center and different points. I have formulated code as per requirement but the requirement is to show circle color as red if any of the two drones come inside of circle (5km). I have tried but any one is working the other one is not working. Can you please help me on the same. – Bhargavi gottam Sep 13 '20 at 13:22
@Bhargavigottam pls create a jsfiddle or a new question on SO – Falke Design Sep 13 '20 at 15:58

How to place the arc of angle 45 inside the circle of 3km radius using leaflet map in angular

1 Answers1