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