Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

react-leaflet-semicircle

Package Overview
Dependencies
1
Maintainers
1
Versions
24
Issues
File Explorer

Advanced tools

react-leaflet-semicircle

React wrapper of leaflet-semicircle

    3.0.3latest

Version published
Maintainers
1
Yearly downloads
5,375
increased by82.33%

Weekly downloads

Changelog

Source

3.0.3

Readme

Source

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

NameTypeExampleDescription
position [required]L.LatLng[] or Array[number, number][51.505, -0.09]Latitude and Longitude of the semicircle center
radius [required]number2000Radius of the semicircle in metres
startAnglenumber90Starting bearing of the semicircle
stopAnglenumber180Ending 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

NameTypeExampleDescription
position [required]L.LatLng[] or Array[number, number][51.505, -0.09]Latitude and Longitude of the semicirclemarker center
startAnglenumber90Starting bearing of the semicirclemarker
stopAnglenumber180Ending 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);

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc