leaflet-textpath

Shows a text (or a pattern) along a Polyline

Leaflet.TextPath

Shows a text along a Polyline.

Check out the demo !

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);
    });
  • 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)
  • attributes Object containing the attributes applied to the text tag. Check valid attributes here (Default: {})

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

  • Nothing changed yet.
  • Fix bug when removing layer whose text was removed (fixes #18) (thanks Victor Gomes)
  • Fix path width when using options.center (fixes #17) (thanks Brent Miller).
  • Fix layer order (fixes #5) (thanks Albin Larsson)
  • Stay on top after bringToFront
  • Clean-up and fix onAdd and onRemove
  • Fire mouse events from underlying text layer (thanks Lewis Christie)
  • Initial working version

Many thanks to all contributors !