Name: Leaflet.TextPath
Owner: Makina Corpus
Description: Show text along Polyline with Leaflet
Created: 2013-03-06 10:18:03.0
Updated: 2017-12-12 23:33:25.0
Pushed: 2017-11-23 18:01:56.0
Homepage: http://makinacorpus.github.com/Leaflet.TextPath/
Size: 296
Language: HTML
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
Shows a text along a Polyline.
Check out the demo !
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).
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);
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)
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
Breaking changes
below
to true to put the text below the layer.onAdd
and onRemove
Many thanks to all contributors !