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

npm install react-leaflet-semicircle --save

Usage

Complete example with react-leaflet

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

<MapContainer center={[51.505, -0.09]} zoom={13}>
    <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    />
    <SemiCircle
        position={[51.505, -0.09]}
        radius={2000}
        startAngle={90}
        stopAngle={180}
    />
    <SemiCircleMarker
        position={[51.505, -0.09]}
        radius={20}
        startAngle={90}
        stopAngle={180}
    />
</MapContainer>;

<SemiCircle />

<SemiCircle
    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

<SemiCircleMarker />

<SemiCircleMarker
    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

Additional component methods

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

Setup

const semiCircleRef = React.useRef();

// ----

<SemiCircle
    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.

semiCircleRef.current.setDirection(90, 90);

setStartAngle(angle)

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

semiCircleRef.current.setStartAngle(90);

setStopAngle(angle)

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

semiCircleRef.current.setStopAngle(90);