react-leaflet-semicircle-18 v4.2.0

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
    position={[51.505, -0.09]}
    radius={2000}
    startAngle={90}
    stopAngle={180}
/>

Props

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

\

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

Props

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);