Skip to content

dfcook/Leaflet.TextPath.2

 
 

Repository files navigation

Leaflet.TextPath

This is a fork of leaflet-text-path, as i need a fix to the canvas rendering. Also updated all references to leaflet to use 1.9.4

Shows a text along a Polyline.

npm npm

Check out the demo !

Install

install it via your favorite package manager:

npm i leaflet-textpath-2

Leaflet versions

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

Usage

For example, show path orientation on mouse over :

    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:

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 (Default: {})

Credits

The main idea comes from Tom Mac Wright's Getting serious about SVG

Authors

Many thanks to all contributors !

Makina Corpus

About

Show text along Polyline with Leaflet

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 64.4%
  • HTML 35.6%