Nerds Publishing Monstrosities

    react-leaflet-semicircle

    3.0.3 • Public • Published

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

    Install

    npm i react-leaflet-semicircle

    DownloadsWeekly Downloads

    236

    Version

    3.0.3

    License

    MIT

    Unpacked Size

    34.6 kB

    Total Files

    14

    Last publish

    Collaborators

    • clementallen