Turf: Circle produces ellipsis (oval) geometry

[artuska]

import circle from '@turf/circle';

then i create a circle:

let coords = [
    55.837150763618574,
    37.48126387596131,
];

let radius = 70; // in meters

let options = {
    steps: 32,
    units: 'kilometers',
};

let c = circle(coords, radius / 1000, options);

and if i use circle's geometry coordinates to build a polygon and put in on some map:

console.log(c.geometry.coordinates)

it in fact looks like an ellipsis, not circle.

[stebogit]

@artuska is this the result of your c circle?

{ "type": "Feature", "properties": {}, "geometry": { "type": "Polygon", "coordinates": [ [ [ 55.837150763618574, 37.48189340021592 ], [ 55.83699599739332, 37.48188130398295 ], [ 55.836847178892874, 37.481845480146994 ], [ 55.836710027252124, 37.48178730543068 ], [ 55.836589813214154, 37.48170901550469 ], [ 55.83649115656599, 37.481613619064746 ], [ 55.83641784859833, 37.48150478220026 ], [ 55.83637270641282, 37.48138668749987 ], [ 55.836357464674926, 37.481263873309395 ], [ 55.836372708970536, 37.48114105932079 ], [ 55.836417853324384, 37.481022965195265 ], [ 55.83649116274087, 37.48091412919113 ], [ 55.83658981989779, 37.480818733766014 ], [ 55.83671003342699, 37.48074044485487 ], [ 55.836847183618914, 37.4806822709989 ], [ 55.83699599995105, 37.480646447737804 ], [ 55.837150763618574, 37.4806343517067 ], [ 55.837305527286105, 37.480646447737804 ], [ 55.83745434361823, 37.4806822709989 ], [ 55.83759149381015, 37.48074044485487 ], [ 55.83771170733936, 37.480818733766014 ], [ 55.83781036449628, 37.48091412919113 ], [ 55.83788367391276, 37.481022965195265 ], [ 55.83792881826662, 37.48114105932079 ], [ 55.83794406256222, 37.481263873309395 ], [ 55.837928820824324, 37.48138668749987 ], [ 55.83788367863881, 37.48150478220026 ], [ 55.83781037067116, 37.481613619064746 ], [ 55.837711714023, 37.48170901550469 ], [ 55.83759149998503, 37.48178730543068 ], [ 55.83745434834428, 37.481845480146994 ], [ 55.837305529843825, 37.48188130398295 ], [ 55.837150763618574, 37.48189340021592 ] ] ] } }

I don't see anything wrong with it:

Which version of Turf are you using? I ran the code with v5.1.6

[artuska]

@stebogit i'm using latest "@turf/turf": "5.1.6" version.

My circle is:

{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[55.837150763618574,37.48207326428866],[55.836951778002025,37.48205771195205],[55.83676043953173,37.4820116526288],[55.8365841014418,37.48193685640694],[55.8364295404424,37.48183619774427],[55.83630269627394,37.481713544992225],[55.8362084434388,37.48157361172272],[55.83615040388426,37.481421775573786],[55.8361308078339,37.48126387157753],[55.836150408112324,37.48110596791498],[55.83620845125124,37.48095413271632],[55.83630270648139,37.48081420086902],[55.83642955149087,37.480691549794564],[55.836584111649245,37.480590892809495],[55.83676044734418,37.48051609800983],[55.83695178223009,37.480470039636856],[55.837150763618574,37.480454487633956],[55.83734974500706,37.480470039636856],[55.837541079892965,37.48051609800983],[55.837717415587896,37.480590892809495],[55.837871975746275,37.480691549794564],[55.83799882075576,37.48081420086902],[55.83809307598591,37.48095413271632],[55.83815111912482,37.48110596791498],[55.83817071940325,37.48126387157753],[55.83815112335289,37.481421775573786],[55.838093083798356,37.48157361172272],[55.837998830963215,37.481713544992225],[55.83787198679475,37.48183619774427],[55.837717425795354,37.48193685640694],[55.83754108770541,37.4820116526288],[55.83734974923512,37.48205771195205],[55.837150763618574,37.48207326428866]]]}}

[artuska]

@stebogit wow, i copypasted my circle data to the geojson.io and my circle also is a circle... but it is located in totally wrong area :) My coordinates are actually from Russia :) Wtf is going on?

UPD.
Oh, i got it — i have [lat, lon] coordinates but geojson.io uses [lon, lat] coordinates — that is why my geometry appears somewhere in Syria, not Moscow.

But anyway — my geometry appears as a circle in Syria but as an ellipsis in Moscow — this is totally strange.

[artuska]

@stebogit just look at the attached pictures in #110 issue comments — there are also ovals instead of circles

[artuska]

[stebogit]

@artuska first off, I believe you inverted the coords.

How do you create the polygons resulting in an oval?

[artuska]

@stebogit oh, ok, i got it — it is Turf who is using [lon, lat] coordinates, not geojson.io, well, it is fine.

How do you create the polygons resulting in an oval?

I do copy c.geometry.coordinates array of coordinates and then i create a Polygon on my Leaflet map with Leaflet.polygon method — this one is an ellipsis on the image above. Second circle is made with Leaflet.circle method and it looks like a circle :)

[stebogit]

Well it would be interesting to see what's the difference in there. However looks like it's not a @tirf/circle issue, but potentially somehow a conversion one? 🤔

[artuska]

@stebogit made a fiddle — https://jsfiddle.net/artuska/Lumgnz92/ — as you see, turfCirclePolygon does not have a circle shape.

[artuska]

[artuska]

Well, the same ellipsis is on the Yandex.Maps... So, there is definitely a problem in Turf.

[artuska]

var center = [
    0,
    0,
];

Well, this makes turf's circle round, not oval... but it is totally useless.

[stebogit]

OK @artuska I found the issue.
The data in Turf is definitely treated differently than in Leaflet (with all LatLgn stuff), the only common ground is GeoJSON.

If you try

var turfCircle = turf.circle([center[1], center[0]], radius / 1000, turfCircleOptions);
L.geoJSON(turfCircle).addTo(map);

that works beautifully.

The L.Polygon function does not work like @turf/helpers|polygon. You need to use the L.geoJSON method on the GeoJSON output of Turf circle.

[MaxDragonheart]

But anyway — my geometry appears as a circle in Syria but as an ellipsis in Moscow — this is totally strange.

Have you checked the projection system of your project?
MapBox use EPSG 3857, this SR amplify the deformation in data as you move away from equator. Then given that Syria is nearest equator than Moscow you see there a circle and an ellipse in Moscow.

[doylemark]

Did you find a fix for this? What map provider you use is irrelevant, when you plot the returned coordinates, you get an ellipse.

[stebogit]

@doyle-mark looks like there is nothnig wrong here, provided you use the expected order of the elements of the coordinates array (specifically [lng, lat])

[omar-alnayme]

Any one solved the problem of the oval buffer?