Nerdiest Precious Modules

    react-leaflet-textpath
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.1 • Public • Published

    react-leaflet-textpath

    React wrapper of leaflet-textpath for react-leaflet.

    Polyline with text for Leaflet maps. Extends L.Polyline.

    Most recently tested with Leaflet 1.7.1 and React-Leaflet 3.0.5

    Requirements

    The current version of this library supports React Leaflet v3.
    If you are using React Leaflet v2, please use the v1 version of this library:
    https://github.com/clementallen/react-leaflet-textpath/tree/v1

    Installation

    npm install react-leaflet-textpath --save

    Usage

    Complete example with react-leaflet

    import { MapContainer, TileLayer } from 'react-leaflet';
    import TextPath from 'react-leaflet-textpath';
    
    <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'
        />
        <TextPath
            positions={[
                [51.505, -0.09],
                [51.505, -0.02],
            ]}
            text="Polyline text"
            center
            offset={10}
        />
    </MapContainer>;

    <TextPath />

    <TextPath
        positions={[51.505, -0.09], [51.505, -0.02]}
        text="Polyline text"
        repeat
        center
        below
        offset={10}
        orientation={20}
        attributes={{
            'font-size': 20,
        }}
    />

    Props

    Name Type Default Description
    positions Array of L.LatLng[] or Array[number, number] required Array of Latitude and Longitude points
    text string required Text to display along the polyline
    repeat boolean false Repeat text along the polyline
    center boolean false Center text according to the polyline bounding box
    below boolean false Show text underneath the polyline
    offset number 0 Offset the text relative to the polyline
    orientation number or string 0 Rotate text in degrees relative to the polyline
    attributes object {} Attributes applied to the text tag. Check valid attributes here

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

    Install

    npm i react-leaflet-textpath

    DownloadsWeekly Downloads

    474

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    28.6 kB

    Total Files

    8

    Last publish

    Collaborators

    • clementallen