turf The polygon obtained by using @turf/circle has a large deviation compared with the actual circle

trafficstars

version: 6.5.0

I use @turf/circle created one polygon data，but it has a large deviation compared with the actual circle。The example: var options = {steps: 90, units: 'kilometers', properties: {foo: 'bar'}}; var circle = turf.circle(center, radius / 1000, options);; the result image：

Is it like https://github.com/Turfjs/turf/issues/1430? If I want to fix it, what should I do? Thanks!!!

Jun 13 '22 08:06 tomorrowcheng

@tomorrowcheng would you mind posting some code showing compared results? That way it's easier to see what's actually going on

Jun 13 '22 13:06 stebogit

@stebogit Thank you for your reply! The Code is like this, I used leaflet'circle, and use turf.circle transform for polygon data; but the polygon has a large deviation with the circle.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Quick Start - Leaflet</title>
  <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
  <script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
  <style>
      html, body {
          height: 100%;
          margin: 0;
      }
      .leaflet-container {
          height: 400px;
          width: 600px;
          max-width: 100%;
          max-height: 100%;
      }
  </style>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>

  const map = L.map('map').setView([51.505, -0.09], 8);

  const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  }).addTo(map);

  const center = [51.508, -0.11];
  const radius = 60000;
  const circle = L.circle(center, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: radius
  }).addTo(map);

  const options = {steps: 90, units: 'kilometers', properties: {foo: 'bar'}};
  const circleData = turf.circle(center, radius / 1000, options);
  const polygon = L.polygon(circleData.geometry.coordinates[0]).addTo(map);

</script>
</body>
</html>

Jun 14 '22 02:06 tomorrowcheng

@tomorrowcheng I don't think there is a solution right now. This issue should give you some context and explain it's due to mercator projection distortion on the map. A new Turf package would be nice to have to create "euclidean" circles for applications like yours.

Please note the Leaflet's Circle object in fact extends the CircleMaker object, which is under the hood a GeoJSON Point.

const circle = L.circle(center, {
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0.5,
  radius: radius
});
circle.addTo(map);
console.log(circle.toGeoJSON())
// {geometry: {coordinates: [-0.11, 51.508], type: "Point"}, properties: {}, type: "Feature"}

Jun 14 '22 15:06 stebogit

@stebogit A new Turf package? I think it would be really helpful if turf can add the same calculation because all online map providers are using the Mercator projection.May I ask you that do you have any plans to support euclidean calculation?Thanks again for your reply

Jun 15 '22 01:06 tomorrowcheng

turf turf copied to clipboard

The polygon obtained by using @turf/circle has a large deviation compared with the actual circle

turf
turf copied to clipboard