Leaflet.TextPath

Shows a text along a Polyline.

Check out the demo !

Leaflet versions

The version on the gh-pages branch targets Leaflet 0.7.3.

Please use the leaflet0.8-dev branch to be compatible with the development version of Leaflet (0.8).

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)
• attributes Object containing the attributes applied to the text tag. Check valid attributes here (Default: {})
• below Show text below the path (Default: false)
• rotate Turn every character of the text clockwise with the specified degrees. Although any angle value may be used, the value is determined by rounding it to the nearest multiple of 90 degrees. (Default: 0)

Screenshot

Credits

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

Changelog

master

Breaking changes

• Set option below to true to put the text below the layer. It is shown on top by default.

0.2.2

• 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).

0.2.1

• Fix layer order (fixes #5) (thanks Albin Larsson)

0.2.0

• Stay on top after bringToFront
• Clean-up and fix onAdd and onRemove
• Fire mouse events from underlying text layer (thanks Lewis Christie)

0.1.0

• Initial working version

Authors

Many thanks to all contributors !