# mapbox-gl-draw-rounded-circle

> A module to draw a circle using mapbox-gl-draw

Latest version **2.1.0** (published 2022-08-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install mapbox-gl-draw-rounded-circle
pnpm add mapbox-gl-draw-rounded-circle
yarn add mapbox-gl-draw-rounded-circle
bun add mapbox-gl-draw-rounded-circle
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2022-08-26 |
| First published | 2021-11-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 17 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Anvesh Kumar Arrabochu |
| Maintainers | anastasia_tatuian |
| Keywords | mapbox, geojson, circle, mapbox, draw |

## Links

- npm: https://www.npmjs.com/package/mapbox-gl-draw-rounded-circle
- Repository: https://github.com/MrTwisterAnastasia/mapbox-gl-draw-circle
- Homepage: https://github.com/MrTwisterAnastasia/mapbox-gl-draw-circle#readme
- Issues: https://github.com/MrTwisterAnastasia/mapbox-gl-draw-circle/issues
- npm.io page: https://npm.io/package/mapbox-gl-draw-rounded-circle

## Dependencies (6)

- [@turf/along](https://npm.io/package/@turf/along.md) ^6.0.1
- [@turf/circle](https://npm.io/package/@turf/circle.md) ^6.0.1
- [@turf/length](https://npm.io/package/@turf/length.md) ^6.0.2
- [@turf/helpers](https://npm.io/package/@turf/helpers.md) ^6.1.4
- [@turf/distance](https://npm.io/package/@turf/distance.md) ^6.0.1
- [@mapbox/mapbox-gl-draw](https://npm.io/package/@mapbox/mapbox-gl-draw.md) ^1.3.0

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 2.1.0 (latest) — 2022-08-26
- 2.0.2 — 2021-11-10
- 2.0.1 — 2021-11-10
- 2.0.0 — 2021-11-10

## README

# mapbox-gl-draw-rounded-circle

We have forked the custom draw circle mode to fix the issues and add some features (see Changelog below):

* forked repo on Github: https://github.com/iamanvesh/mapbox-gl-draw-circle
* published package on NPM: https://www.npmjs.com/package/mapbox-gl-draw-rounded-circle

## Usage

### Installation

```
npm install mapbox-gl-draw-rounded-circle
```

```
import {
    CircleMode,
    DragCircleMode,
    DirectMode,
    SimpleSelectMode
} from 'mapbox-gl-draw-rounded-circle';


// userProperties has to be enabled
const draw = new MapboxDraw({
  defaultMode: "draw_circle",
  userProperties: true,
  modes: {
    ...MapboxDraw.modes,
    draw_circle  : CircleMode,
    drag_circle  : DragCircleMode,
    direct_select: DirectMode,
    simple_select: SimpleSelectMode
  }
});

// Add this draw object to the map when map loads
map.addControl(draw);
```

The default radius units are in **kilometers** and initial radius is **2km**.

```
// Provide the default radius as an option to CircleMode
draw.changeMode('draw_circle', { initialRadiusInKm: 0.5 });
```

It fires the same events as the mapbox-gl-draw library. For more information follow this [link](https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/API.md#events).

Sample feature object returned in `draw.create` event
```
{
  "id": "e184898e58feaa5c2c56f20a178ffe2c",
  "type": "Feature",
  "properties": {
    "isCircle": true,
    "center": [
      -0.2472604947478203,
      51.53200220026099
    ],
    "radiusInKm": 2
  },
  "geometry": {
    "coordinates": [], // populated with 64 vertices used to render the circle
    "type": "Polygon"
  }
}
```

## Changelog

### v2.1.0

* Upgraded @mapbox/mapbox-gl-draw to ^1.3.0

### v2.0.0

* Fixed the issue with an exception thrown when center coordinates are missing.
* Fixed the issue with dragPan handler staying disabled when the draw control is removed from map.
* Fixed the issue with the circle points not being strictly at 12, 3, 6, 9 o'clock.
* Add the center point to the circle in edit and drag mode: Orange dot with a white border.

---
_Source: https://npm.io/package/mapbox-gl-draw-rounded-circle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._