Polygon coordinates auto populate at Radius.html

<!DOCTYPE html>
<html>
<head>
  <title>Polygon Coordinates Calculation</title>
</head>
<body>
  <h1>Polygon Coordinates Calculation</h1>
  
  <form id="coordinates-form">
    <label for="latitude">Latitude:</label>
    <input type="text" id="latitude" name="latitude" required><br>
    <label for="longitude">Longitude:</label>
    <input type="text" id="longitude" name="longitude" required><br>
    <label for="radius">Radius (meters):</label>
    <input type="text" id="radius" name="radius" required><br>
    <button type="button" id="calculate-button">Calculate Polygon Coordinates</button>
  </form>
  
  <div id="polygon-coordinates" style="margin-top: 20px;"></div>

  <script>
    document.getElementById('calculate-button').addEventListener('click', function () {
      var latitude = parseFloat(document.getElementById('latitude').value);
      var longitude = parseFloat(document.getElementById('longitude').value);
      var radius = parseFloat(document.getElementById('radius').value);

      var polygonCoords = [];
      for (var i = 0; i < 360; i += 5) {
        var angle = i * (Math.PI / 180);
        var newX = latitude + (radius / 111320) * Math.cos(angle);
        var newY = longitude + (radius / (111320 * Math.cos(latitude * (Math.PI / 180)))) * Math.sin(angle);
        polygonCoords.push({ lat: newX, lng: newY });
      }

      var polygonCoordinatesText = 'Polygon Coordinates:<br>';
      for (var i = 0; i < polygonCoords.length; i++) {
        polygonCoordinatesText += polygonCoords[i].lat.toFixed(9) + ', ' + polygonCoords[i].lng.toFixed(9) + '<br>';
      }

      document.getElementById('polygon-coordinates').innerHTML = polygonCoordinatesText;
    });
  </script>
</body>
</html>