title: How to place the circle with 5KM radius with latitude and longitude coming from the API in leaflet open street map using angular
body: <p>In my angular project I have placed the map by using leaflet open street map.And I have to place the circle with 5km radius with latitude and longitude coming from the API.But I am unable place the circle .</p>
  <p>I have fetched the Json array from the API and that is given below:</p>
  <pre><code>&quot;Drone&quot;: {
      &quot;Droneid&quot;: 1001,
      &quot;latlong&quot;: [
          {
              &quot;lat&quot;: 12.989839,
              &quot;lon&quot;: 80.198822
          },
          {
              &quot;lat&quot;: 13.051832,
              &quot;lon&quot;: 80.194480
          },
          {
              &quot;lat&quot;: 13.038453,
              &quot;lon&quot;: 80.227442
          },
          {
              &quot;lat&quot;: 13.009018,
              &quot;lon&quot;: 80.242550
          },
          {
              &quot;lat&quot;: 12.976903,
              &quot;lon&quot;: 80.237056
          },
          {
              &quot;lat&quot;: 12.956829,
              &quot;lon&quot;: 80.193107
          },
          {
              &quot;lat&quot;: 12.980917,
              &quot;lon&quot;: 80.150531
          },
          {
              &quot;lat&quot;: 13.007680,
              &quot;lon&quot;: 80.149158
          },
          {
              &quot;lat&quot;: 13.043805,
              &quot;lon&quot;: 80.154651
          }
      ]
  }
  }
  </code></pre>
  <p><em>From the latlong array elements(lat,lon) I have to place the circle of 5 km radius with index-0 elements(i.e first lat,lon values) and remaining are placed inside the circle.</em></p>
  <p><strong>Dashboard.component.ts</strong></p>
  <pre><code>  constructor(private ds:DashboardService,private router: Router) { }
  Drones:any;
    Droneid:string;
    latlong:any=[];
  Drone:any;
  var  map = L.map('map').setView([13.0827, 80.2707], 8);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   attribution: '© &lt;a href=&quot;https://www.openstreetmap.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors'
  } ).addTo(map);
  L.circle([this.drones.Drone.latlong.lat[0],this.drones.Drone.latlong.lon[0]],{radius:5000}).addTo(map);
  </code></pre>
  <pre><code>dronedetails(){
    this.drones=JSON.parse(localStorage.getItem(&quot;drones&quot;));
    console.log(&quot;drones&quot;,this.drones)
    console.log(&quot;array&quot;,this.drones.Drone.latlong);
  
  }
  </code></pre>
  <p>I have tried but not showing any circle on map can anyone please help me regarding this.</p>