Skip to content

clementallen/react-leaflet-textpath

Repository files navigation

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