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