# leaflet-textpath

> Shows a text (or a pattern) along a Polyline

Latest version **1.3.2** (published 2026-10-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install leaflet-textpath
pnpm add leaflet-textpath
yarn add leaflet-textpath
bun add leaflet-textpath
```

## Health

**Score 58/100 (C)** — status: active.

Positive: has types package; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.3.2 |
| Published | 2026-10-22 |
| First published | 2014-02-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/leaflet-textpath) |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 105.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 291 |
| Maintainers | mab, ebrehault, fredericbonifas, leplatrem, sbats, makinacorpus, gutard |
| Keywords | Leaflet, GIS, SVG |

## Links

- npm: https://www.npmjs.com/package/leaflet-textpath
- Repository: https://github.com/makinacorpus/Leaflet.TextPath
- Homepage: https://github.com/makinacorpus/Leaflet.TextPath#readme
- Issues: https://github.com/makinacorpus/Leaflet.TextPath/issues
- npm.io page: https://npm.io/package/leaflet-textpath

## Recent versions

- 1.3.2 (latest) — 2026-10-22
- 1.3.1 — 2026-10-21
- 1.3.0 — 2025-06-23
- 1.2.3 — 2020-02-07
- 1.2.2 — 2020-02-07
- 1.2.0 — 2018-03-08
- 1.1.0 — 2016-10-06
- 1.0.1 — 2016-02-05
- 1.0.0 — 2016-01-16
- 0.2.2 — 2014-08-14
- 0.2.1 — 2014-06-10
- 0.2.0 — 2014-02-04

## README

Leaflet.TextPath
================

Shows a text along a Polyline.

<p align="center">
<a href="https://www.npmjs.com/package/leaflet-textpath"><img alt="npm" src="https://img.shields.io/npm/dt/leaflet-textpath"></a>
<a href="https://www.npmjs.com/package/leaflet-textpath"><img alt="npm" src= "https://img.shields.io/npm/v/leaflet-textpath?color=red"></a>
</p>

<div class="demo">
<p align="center"><img src="./screenshot.png"></p>
<p align="center">Check out the <a href="https://makinacorpus.github.io/Leaflet.TextPath/">demo</a> ! </p>
</div>

Install
-----
install it via your favorite package manager:

`npm i leaflet-textpath`

Leaflet versions
-----

The version on the github page (demo) currently targets Leaflet `1.3.1`.

Usage
-----

For example, show path orientation on mouse over :

```javascript
    var layer = L.polyLine(...);

    layer.on('mouseover', function () {
        this.setText('  ►  ', {repeat: true, attributes: {fill: 'red'}});
    });

    layer.on('mouseout', function () {
        this.setText(null);
    });
```

With a GeoJSON containing lines, it becomes:

```javascript
    L.geoJson(data, {
        onEachFeature: function (feature, layer) {
            layer.setText(feature.properties.label);
        }
    }).addTo(map);

```

### Options

* `repeat` Specifies if the text should be repeated along the polyline (Default: `false`)
* `center` Centers the text according to the polyline's bounding box  (Default: `false`)
* `below` Show text below the path (Default: false)
* `offset` Set an offset to position text relative to the polyline (Default: the stroke width)
* `orientation` Rotate text.  (Default: 0)
    - {orientation: angle} - rotate to a specified angle (e.g. {orientation: 15})
    - {orientation: flip} - filps the text 180deg correction for upside down text placement on west -> east lines
    - {orientation: perpendicular} - places text at right angles to the line.

* `attributes` Object containing the attributes applied to the `text` tag. Check valid attributes [here](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text#Attributes) (Default: `{}`)

Credits
-------

The main idea comes from Tom Mac Wright's *[Getting serious about SVG](https://web.archive.org/web/20130312131812/http://mapbox.com/osmdev/2012/11/20/getting-serious-about-svg/)*

Authors
-------

Many thanks to [all contributors](https://github.com/makinacorpus/Leaflet.TextPath/graphs/contributors) !

[![Makina Corpus](https://geotrek.fr/assets/img/logo_makina.svg)](http://makinacorpus.com)

---
_Source: https://npm.io/package/leaflet-textpath · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._