react-leaflet-textpath

React wrapper of leaflet-textpath for react-leaflet.

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

Tested with Leaflet 1.4.0 and React-Leaflet 2.2.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