react-leaflet-semicircle

react-leaflet-semicircle

React wrapper of leaflet-semicircle for react-leaflet.

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

Tested with Leaflet 1.4.0 and React-Leaflet 2.1.4

Installation

npm install react-leaflet-semicircle --save

Usage

Complete example with react-leaflet

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

<Map 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}
    />
</Map>;

<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

Component methods

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

Setup

this.semiCircleRef = React.createRef();

----

<SemiCircle
    position={[51.505, -0.09]}
    radius={2000}
    startAngle={90}
    stopAngle={180}
    ref={this.semiCircleRef}
/>

setDirection(direction, size)

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

this.semiCircleRef.current.setDirection(90, 90);

setStartAngle(angle)

Set the start angle of the semicircle to angle

this.semiCircleRef.current.setStartAngle(90);

setStopAngle(angle)

Set the stop angle of the semicircle to angle

this.semiCircleRef.current.setStopAngle(90);

Changelog

v1.0.0

12 January 2019

• Added more tests #12
• Added build step #11
• Initial tests #10
• docs(readme): add Greenkeeper badge #9
• Added eslint #6
• Added initial tests f6ffb53
• Added more AbstractComponent tests 53d67af
• Only update props if they have changed 34d1240