react-leaflet-semicircle


React wrapper of leaflet-semicircle
for react-leaflet.

Semicircle vector layers for Leaflet maps. Extends L.Circle and L.CircleMarker.

_Most recently tested with Leaflet 1.7.1 and React-Leaflet 3.1.0_

Requirements

The current version of this library supports React Leaflet v3.

If you are using React Leaflet v2, please use the v2 version of this library:

https://github.com/clementallen/react-leaflet-semicircle/tree/v2

Installation

``bash
npm install react-leaflet-semicircle --save
`

Usage

$3

`javascript
import { MapContainer, TileLayer } from 'react-leaflet';
import { SemiCircle, SemiCircleMarker } from 'react-leaflet-semicircle';


url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© OpenStreetMap contributors'
/>
position={[51.505, -0.09]}
radius={2000}
startAngle={90}
stopAngle={180}
/>
position={[51.505, -0.09]}
radius={20}
startAngle={90}
stopAngle={180}
/>
;
`

$3

`javascript
position={[51.505, -0.09]}
radius={2000}
startAngle={90}
stopAngle={180}
/>
`

#### Props

| Name | Type | Example | Description |
| ----------------------- | ----------------------------------------- | ----------------- | ----------------------------------------------- |
| position [required] | L.LatLng[] or Array\[number, number\] | \[51.505, -0.09\] | Latitude and Longitude of the semicircle center |
| radius [required] | number | 2000 | Radius of the semicircle in metres |
| startAngle | number | 90 | Starting bearing of the semicircle |
| stopAngle | number | 180 | Ending bearing of the semicircle |

All other options from L.Circle are also supported. View them here

$3

`javascript
position={[51.505, -0.09]}
startAngle={90}
stopAngle={180
/>
`

#### Props

| Name | Type | Example | Description |
| ----------------------- | ----------------------------------------- | ----------------- | ----------------------------------------------------- |
| position [required] | L.LatLng[] or Array\[number, number\] | \[51.505, -0.09\] | Latitude and Longitude of the semicirclemarker center |
| startAngle | number | 90 | Starting bearing of the semicirclemarker |
| stopAngle | number | 180 | Ending bearing of the semicirclemarker |

All other options from L.CircleMarker are also supported. View them here

$3

Each component comes with additional methods that can be accessed via React Refs.

#### Setup

`javascript
const semiCircleRef = React.useRef();

// ----

position={[51.505, -0.09]}
radius={2000}
startAngle={90}
stopAngle={180}
ref={semiCircleRef}
/>;
`

#### setDirection(direction, size)

Use setDirection(direction, size) to display a semicircle of size degrees at direction.

`javascript
semiCircleRef.current.setDirection(90, 90);
`

#### setStartAngle(angle)

Use setStartAngle(angle) to set the start angle of the semicircle to angle

`javascript
semiCircleRef.current.setStartAngle(90);
`

#### setStopAngle(angle)

Use setStopAngle(angle) to set the stop angle of the semicircle to angle

`javascript
semiCircleRef.current.setStopAngle(90);
``