Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

react-leaflet-textpath

1.0.8 • Public • Published

react-leaflet-textpath

React wrapper of leaflet-textpath for react-leaflet.

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

Tested with Leaflet 1.6.0 and React-Leaflet 2.7.0

Installation

npm install react-leaflet-textpath --save

Usage

Complete example with react-leaflet

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

<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

203

Version

1.0.8

License

MIT

Unpacked Size

21.6 kB

Total Files

8

Last publish

Collaborators

  • avatar