Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
react-leaflet-semicircle
Advanced tools
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.2.0
npm install react-leaflet-semicircle --save
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='© <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
position={[51.505, -0.09]}
radius={2000}
startAngle={90}
stopAngle={180}
/>
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
position={[51.505, -0.09]}
startAngle={90}
stopAngle={180
/>
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
Each component comes with additional methods that can be accessed via React Refs.
this.semiCircleRef = React.createRef();
// ----
<SemiCircle
position={[51.505, -0.09]}
radius={2000}
startAngle={90}
stopAngle={180}
ref={this.semiCircleRef}
/>;
Use setDirection(direction, size)
to display a semicircle of size
degrees at direction
.
this.semiCircleRef.current.leafletElement.setDirection(90, 90);
Use setStartAngle(angle)
to set the start angle of the semicircle to angle
this.semiCircleRef.current.leafletElement.setStartAngle(90);
Use setStopAngle(angle)
to set the stop angle of the semicircle to angle
this.semiCircleRef.current.leafletElement.setStopAngle(90);
FAQs
React wrapper of leaflet-semicircle
The npm package react-leaflet-semicircle receives a total of 119 weekly downloads. As such, react-leaflet-semicircle popularity was classified as not popular.
We found that react-leaflet-semicircle demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.