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

Package Sidebar

Install

npm i react-leaflet-textpath

Weekly Downloads

548

Version

2.1.1

License

MIT

Unpacked Size

28.6 kB

Total Files

8

Last publish

Collaborators

  • clementallen