https://github.com/makinacorpus/Leaflet.TextPath
Show text along Polyline with Leaflet
https://github.com/makinacorpus/Leaflet.TextPath
Last synced: 5 months ago
JSON representation
Show text along Polyline with Leaflet
- Host: GitHub
- URL: https://github.com/makinacorpus/Leaflet.TextPath
- Owner: makinacorpus
- License: mit
- Created: 2013-03-06T10:18:03.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2024-01-03T15:21:46.000Z (over 1 year ago)
- Last Synced: 2024-11-08T00:25:47.076Z (6 months ago)
- Language: JavaScript
- Homepage: https://makinacorpus.github.io/Leaflet.TextPath/
- Size: 312 KB
- Stars: 285
- Watchers: 42
- Forks: 112
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Leaflet.TextPath
================
Shows a text along a Polyline.
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: 0)
* `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) !
[](http://makinacorpus.com)
