leaflet-textpath-new

    1.2.3 • Public • Published

    Leaflet.TextPath

    Shows a text along a Polyline.

    Check out the demo !

    Leaflet versions

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

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

    Screenshot

    screenshot

    Credits

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

    Changelog

    development

    • Nothing changed yet.

    1.1.0

    • Add the orientation option (#27, thanks @kirkau)

    1.0.2

    • Allow HTTP and HTTPS to access the demo (#39, thanks @sonny89 and @leplatrem)

    1.0.1

    • Fix text centering for vertical lines (#33, #34, #38, thanks @msgoloborodov)

    1.0.0

    Breaking changes

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

    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 !

    Makina Corpus

    Install

    npm i leaflet-textpath-new

    DownloadsWeekly Downloads

    2

    Version

    1.2.3

    License

    MIT

    Unpacked Size

    88.9 kB

    Total Files

    7

    Last publish

    Collaborators

    • yutou_cn