How to use @turf/circle - 10 common examples

return result;
    }

    const modeConfig = this.getModeConfig() || {};
    // Default turf value for circle is 64
    const { steps = 64 } = modeConfig;
    const options = { steps };

    if (steps < 4) {
      console.warn(`Minimum steps to draw a circle is 4 `); // eslint-disable-line no-console,no-undef
      options.steps = 4;
    }

    const centerCoordinates = clickSequence[0];
    const radius = Math.max(distance(centerCoordinates, event.groundCoords), 0.001);
    this._setTentativeFeature(circle(centerCoordinates, radius, options));

    return result;
  }
}

const { projInv, unitsPerMeter } = this.projection;

        // add orbitMarker
        const target = orbit.userData.target;
        const llTarget = projInv(target.x, target.y);
        console.log('llTarget:', llTarget);

        this.orbitMarker =
            L.marker(llTarget)
                .bindTooltip("Orbit Axis", {
                    permanent: true,
                    direction: 'right',
                }).addTo(this.map);

        // add orbitCircle
        const circle = turfCircle(
            MapHelper.swap(llTarget),
            orbit.userData.radius / unitsPerMeter, {
                units: 'meters',
            });
        this.orbitCircle =
            L.geoJson(circle, {
                style: feature => {
                    return {
                        dashArray: '3, 5',
                        color: '#ff00ff',
                        fillOpacity: 0.0,
                    };
                },
            }).addTo(this.map);
    }

_handlePointerMoveForDrawCircleByBoundingBox(groundCoords: Position) {
    if (this._clickSequence.length === 0) {
      // nothing to do yet
      return;
    }

    const firstClickedPoint = this._clickSequence[0];
    const centerCoordinates = getIntermediatePosition(firstClickedPoint, groundCoords);
    const radius = Math.max(distance(firstClickedPoint, centerCoordinates), 0.001);
    this._setTentativeFeature(circle(centerCoordinates, radius));
  }

_handlePointerMoveForDrawCircleFromCenter(groundCoords: Position) {
    if (this._clickSequence.length === 0) {
      // nothing to do yet
      return;
    }

    const centerCoordinates = this._clickSequence[0];
    const radius = Math.max(distance(centerCoordinates, groundCoords), 0.001);
    this._setTentativeFeature(circle(centerCoordinates, radius));
  }

export function geoDistance(node: GeoDistance) {
    const {
        distance, unit, lat, lon
    } = node;
    const geoPoint = [lon, lat];
    const config = { units: unit };
    let polygon: createCircle;

    if (lat != null && lon != null) {
        polygon = createCircle(
            geoPoint,
            distance,
            config
        );
    }

    // Nothing matches so return false
    if (polygon == null) return () => false;
    return testGeoPolygon(polygon);
}

function sector(center, radius, bearing1, bearing2, options) {
    // Optional parameters
    options = options || {};
    if (!isObject(options)) throw new Error('options is invalid');

    // validation
    if (!center) throw new Error('center is required');
    if (bearing1 === undefined || bearing1 === null) throw new Error('bearing1 is required');
    if (bearing2 === undefined || bearing2 === null) throw new Error('bearing2 is required');
    if (!radius) throw new Error('radius is required');
    if (typeof options !== 'object') throw new Error('options must be an object');

    if (convertAngleTo360(bearing1) === convertAngleTo360(bearing2)) {
        return circle(center, radius, options);
    }
    var coords = getCoords(center);
    var arc = lineArc(center, radius, bearing1, bearing2, options);
    var sliceCoords = [[coords]];
    coordEach(arc, function (currentCoords) {
        sliceCoords[0].push(currentCoords);
    });
    sliceCoords[0].push(coords);

    return polygon(sliceCoords);
}

pointTopLeft,
                        pointBottomRight,
                    ]);

                    const box = bbox(line);
                    polygon = bboxPolygon(box);
                }
            }

            if (geoPoint && geoDistance) {
                const { distance, unit } = parseGeoDistance(geoDistance);
                const config = { units: unit };

                const parsedGeoPoint = parseGeoPoint(geoPoint);
                if (parsedGeoPoint != null) {
                    polygon = createCircle(
                        parsedGeoPoint,
                        distance,
                        config
                    );
                }
            }

            // Nothing matches so return false
            if (polygon == null) return () => false;
            return (fieldData: string): boolean => {
                const point = parseGeoPoint(fieldData, false);
                if (!point) return false;
                return pointInPolygon(point, polygon);
            };
        }

...state.selected.properties, center: centerCoords, radius: !isNil(radius) ? radius : selected.properties.radius
            }});
            features = state.editing.features.map(f => {
                return f.properties.id === state.selected.properties.id ? selected : f;
            });
            selected = { ...selected, geometry: { coordinates: centerCoords, type: "Circle"}};
            let center;
            let c = {
                type: 'Polygon',
                coordinates: [[[]]]
            };
                // polygonGeom setting
            if (validateCoordsArray(selected.properties.center)) {
                center = selected.properties.center;
                // turf/circle by default use km unit hence we divide by 1000 the radius(in meters)
                c = circle(
                    center,
                    action.crs === "EPSG:4326" ? action.radius : action.radius / 1000,
                    { steps: 100, units: action.crs === "EPSG:4326" ? "degrees" : "kilometers" }
                ).geometry;
            } else {
                selected = set("properties.center", [], selected);
            }

            selected = set("properties.polygonGeom", c, selected);
        } else if (selected.properties.isText) {
            let c = !isNil(coordinates) ? validCoordinates[0] : state.selected.geometry.coordinates;
            selected = assign({}, {...selected,
                properties: {
                    ...state.selected.properties,
                    valueText: !isNil(text) ? text : state.selected.properties.valueText
                }});

selected,
                unsavedChanges: true
            });
        }
        selected = set("properties.isValidFeature", validateFeature({
            properties: selected.properties,
            components: getComponents({coordinates: action.components[0] || [], type: "Circle"}),
            type: "Circle"
        }), selected);
        selected = set("properties.center", action.components[0], selected);
        selected = set("geometry.coordinates", action.components[0], selected);

        // need to change the polygon coords after radius changes
        // but this implementation is ugly. is using openlayers to do that and maybe we need to refactor this

        let feature = circle(
            selected.properties.center,
            action.crs === "EPSG:4326" ? action.radius : action.radius / 1000,
            { steps: 100, units: action.crs === "EPSG:4326" ? "degrees" : "kilometers" }
        );
        selected = set("properties.polygonGeom", feature.geometry, selected);

        let ftChangedIndex = findIndex(state.editing.features, (f) => f.properties.id === state.selected.properties.id);
        const selectedGeoJSON = set("geometry", selected.properties.polygonGeom, selected);
        newState = set(`editing.features`, state.editing.features.map(f => {
            return set("properties.canEdit", false, f);
        }), state);

        newState = set(`unsavedGeometry`, true, newState);
        if (ftChangedIndex === -1) {
            newState = set("editing.features", newState.editing.features.concat([selectedGeoJSON]), newState);
        } else {

_loadSample = (type: string) => {
    if (type === 'mixed') {
      this.setState({
        testFeatures: sampleGeoJson,
        selectedFeatureIndexes: []
      });
    } else if (type === 'complex') {
      this.setState({
        testFeatures: {
          type: 'FeatureCollection',
          features: [
            circle([-122.45, 37.81], 4, { steps: 5000 }),
            circle([-122.33, 37.81], 4, { steps: 5000 }),
            circle([-122.45, 37.73], 4, { steps: 5000 }),
            circle([-122.33, 37.73], 4, { steps: 5000 })
          ]
        },
        selectedFeatureIndexes: []
      });
    } else if (type === 'blank') {
      this.setState({
        testFeatures: EMPTY_FEATURE_COLLECTION,
        selectedFeatureIndexes: []
      });
    } else if (type === 'file') {
      const el = document.createElement('input');
      el.type = 'file';
      el.onchange = e => {
        if (e.target.files && e.target.files[0]) {
          const reader = new FileReader();
          reader.onload = ({ target }) => {