├── CHANGELOG.md
├── LICENSE
├── README.md
├── docs
├── example.html
├── logo
│ ├── github.svg
│ ├── makina.svg
│ └── npm.svg
├── meta.js
├── meta.json
└── style.css
├── index.html
├── leaflet.textpath.js
├── package.json
└── screenshot.png
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | Next version / Unreleased
2 | ==================
3 |
4 | * Update changelog and demo page
5 | * Fix this._map._renderer unedefined if using panes (#87)
6 |
7 | 1.2.3 / 2020-02-07
8 | ==================
9 |
10 | * Fix mouse events
11 |
12 | 1.2.2 / 2020-02-07
13 | ==================
14 |
15 | * Fix mouse events
16 | * Fix repeated text on 0 length path
17 |
18 | 1.2.1 / 2018-06-22
19 | ==================
20 |
21 | * Update logo and turn links to https
22 | * Add example html page charset (utf8)
23 |
24 | 1.2.0 / 2018-03-01
25 | ==================
26 |
27 | * Add npm script to help releasing package versions
28 | * Set Leaflet as peerDependency
29 | * Upgrade Leaflet version from demo to `1.3.1`
30 | * Don't try to remove from container if container doesn't exist
31 | * Change way of dealing with the SVG to comply with leaflet >= 0.8
32 | * Remove useless console.log
33 |
34 | 1.1.0 / 2016-05-19
35 | ==================
36 |
37 | * Add the orientation option (#27, thanks @kirkau)
38 |
39 | 1.0.2 / 2016-03-14
40 | ==================
41 |
42 | * Allow HTTP and HTTPS to access the demo (#39, thanks @sonny89 and @leplatrem)
43 |
44 | 1.0.1 / 2016-02-05
45 | ==================
46 |
47 | * Fix text centering for vertical lines (#33, #34, #38, thanks @msgoloborodov)
48 |
49 | 1.0.0 / 2016-01-16
50 | ==================
51 |
52 | **Breaking changes**
53 |
54 | * Text is now shown on top by default. Set option ``below`` to true to put the text below the layer.
55 |
56 | 0.2.2 / 2014-08-14
57 | ==================
58 |
59 | * Fix bug when removing layer whose text was removed (fixes #18) (thanks Victor Gomes)
60 | * Fix path width when using options.center (fixes #17) (thanks Brent Miller).
61 |
62 | 0.2.1 / 2014-06-01
63 | ==================
64 |
65 | * Fix layer order (fixes #5) (thanks Albin Larsson)
66 |
67 | 0.2.0 / 2014-02-04
68 | ==================
69 |
70 | * Stay on top after bringToFront
71 | * Clean-up and fix `onAdd` and `onRemove`
72 | * Fire mouse events from underlying text layer (thanks Lewis Christie)
73 |
74 | 0.1.0 / 2013-04-11
75 | ===================
76 |
77 | * Initial working version
78 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2012 Makina Corpus
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6 |
7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8 |
9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Leaflet.TextPath
2 | ================
3 |
4 | Shows a text along a Polyline.
5 |
6 |
7 |
10 |
11 |
12 |
13 |
Check out the demo !
14 |
23 |
24 |
187 |
188 |
189 |
--------------------------------------------------------------------------------
/docs/logo/github.svg:
--------------------------------------------------------------------------------
1 | GitHub
6 |
7 |
8 |
10 |
11 |
13 |
102 |
103 |
--------------------------------------------------------------------------------
/docs/logo/npm.svg:
--------------------------------------------------------------------------------
1 | npm
33 |
35 |
36 |
37 |
38 |
40 |
41 |
44 |
45 | Description
46 |
47 |
48 |
68 |
73 |
74 |
75 |
76 |
77 |
78 |
95 |
96 |
97 |
--------------------------------------------------------------------------------
/leaflet.textpath.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Leaflet.TextPath - Shows text along a polyline
3 | * Inspired by Tom Mac Wright article :
4 | * https://web.archive.org/web/20130312131812/http://mapbox.com/osmdev/2012/11/20/getting-serious-about-svg/
5 | */
6 |
7 | (function () {
8 |
9 | var __onAdd = L.Polyline.prototype.onAdd,
10 | __onRemove = L.Polyline.prototype.onRemove,
11 | __updatePath = L.Polyline.prototype._updatePath,
12 | __bringToFront = L.Polyline.prototype.bringToFront;
13 |
14 |
15 | var PolylineTextPath = {
16 |
17 | onAdd: function (map) {
18 | __onAdd.call(this, map);
19 | this._textRedraw();
20 | },
21 |
22 | onRemove: function (map) {
23 | map = map || this._map;
24 | if (map && this._textNode && this._renderer._container)
25 | this._renderer._container.removeChild(this._textNode);
26 | __onRemove.call(this, map);
27 | },
28 |
29 | bringToFront: function () {
30 | __bringToFront.call(this);
31 | this._textRedraw();
32 | },
33 |
34 | _updatePath: function () {
35 | __updatePath.call(this);
36 | this._textRedraw();
37 | },
38 |
39 | _textRedraw: function () {
40 | var text = this._text,
41 | options = this._textOptions;
42 | if (text) {
43 | this.setText(null).setText(text, options);
44 | }
45 | },
46 |
47 | setText: function (text, options) {
48 | this._text = text;
49 | this._textOptions = options;
50 |
51 | /* If not in SVG mode or Polyline not added to map yet return */
52 | /* setText will be called by onAdd, using value stored in this._text */
53 | if (!L.Browser.svg || typeof this._map === 'undefined') {
54 | return this;
55 | }
56 |
57 | var defaults = {
58 | repeat: false,
59 | fillColor: 'black',
60 | attributes: {},
61 | below: false,
62 | };
63 | options = L.Util.extend(defaults, options);
64 |
65 | /* If empty text, hide */
66 | if (!text) {
67 | if (this._textNode && this._textNode.parentNode) {
68 | this._renderer._container.removeChild(this._textNode);
69 |
70 | /* delete the node, so it will not be removed a 2nd time if the layer is later removed from the map */
71 | delete this._textNode;
72 | }
73 | return this;
74 | }
75 |
76 | text = text.replace(/ /g, '\u00A0'); // Non breakable spaces
77 | var id = 'pathdef-' + L.Util.stamp(this);
78 | var svg = this._renderer._container;
79 | this._path.setAttribute('id', id);
80 |
81 | if (options.repeat) {
82 | /* Compute single pattern length */
83 | var pattern = L.SVG.create('text');
84 | for (var attr in options.attributes)
85 | pattern.setAttribute(attr, options.attributes[attr]);
86 | pattern.appendChild(document.createTextNode(text));
87 | svg.appendChild(pattern);
88 | var alength = pattern.getComputedTextLength();
89 | svg.removeChild(pattern);
90 |
91 | /* Create string as long as path */
92 | text = new Array(Math.ceil(isNaN(this._path.getTotalLength() / alength) ? 0 : this._path.getTotalLength() / alength)).join(text);
93 | }
94 |
95 | /* Put it along the path using textPath */
96 | var textNode = L.SVG.create('text'),
97 | textPath = L.SVG.create('textPath');
98 |
99 | var dy = options.offset || this._path.getAttribute('stroke-width');
100 |
101 | textPath.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", '#'+id);
102 | textNode.setAttribute('dy', dy);
103 | for (var attr in options.attributes)
104 | textNode.setAttribute(attr, options.attributes[attr]);
105 | textPath.appendChild(document.createTextNode(text));
106 | textNode.appendChild(textPath);
107 | this._textNode = textNode;
108 |
109 | if (options.below) {
110 | svg.insertBefore(textNode, svg.firstChild);
111 | }
112 | else {
113 | svg.appendChild(textNode);
114 | }
115 |
116 | /* Center text according to the path's bounding box */
117 | if (options.center) {
118 | var textLength = textNode.getComputedTextLength();
119 | var pathLength = this._path.getTotalLength();
120 | /* Set the position for the left side of the textNode */
121 | textNode.setAttribute('dx', ((pathLength / 2) - (textLength / 2)));
122 | }
123 |
124 | /* Change label rotation (if required) */
125 | if (options.orientation) {
126 | var rotateAngle = 0;
127 | switch (options.orientation) {
128 | case 'flip':
129 | rotateAngle = 180;
130 | break;
131 | case 'perpendicular':
132 | rotateAngle = 90;
133 | break;
134 | default:
135 | rotateAngle = options.orientation;
136 | }
137 |
138 | var rotatecenterX = (textNode.getBBox().x + textNode.getBBox().width / 2);
139 | var rotatecenterY = (textNode.getBBox().y + textNode.getBBox().height / 2);
140 | textNode.setAttribute('transform','rotate(' + rotateAngle + ' ' + rotatecenterX + ' ' + rotatecenterY + ')');
141 | }
142 |
143 | /* Initialize mouse events for the additional nodes */
144 | if (this.options.interactive) {
145 | if (L.Browser.svg || !L.Browser.vml) {
146 | textPath.setAttribute('class', 'leaflet-interactive');
147 | }
148 |
149 | var events = ['click', 'dblclick', 'mousedown', 'mouseover',
150 | 'mouseout', 'mousemove', 'contextmenu'];
151 | for (var i = 0; i < events.length; i++) {
152 | L.DomEvent.on(textNode, events[i], this.fire, this);
153 | }
154 | }
155 |
156 | return this;
157 | }
158 | };
159 |
160 | L.Polyline.include(PolylineTextPath);
161 |
162 | L.LayerGroup.include({
163 | setText: function(text, options) {
164 | for (var layer in this._layers) {
165 | if (typeof this._layers[layer].setText === 'function') {
166 | this._layers[layer].setText(text, options);
167 | }
168 | }
169 | return this;
170 | }
171 | });
172 |
173 |
174 |
175 | })();
176 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "leaflet-textpath",
3 | "version": "1.2.3",
4 | "description": "Shows a text (or a pattern) along a Polyline",
5 | "keywords": [
6 | "Leaflet",
7 | "GIS",
8 | "SVG"
9 | ],
10 | "main": "leaflet.textpath.js",
11 | "bugs": {
12 | "url": "https://github.com/makinacorpus/Leaflet.TextPath/issues"
13 | },
14 | "repository": {
15 | "type": "git",
16 | "url": "git://github.com/makinacorpus/Leaflet.TextPath.git"
17 | },
18 | "license": "MIT",
19 | "scripts": {
20 | "version": "git changelog -t $npm_package_version && git add CHANGELOG.md"
21 | },
22 | "peerDependencies": {
23 | "leaflet": "^1.3.1"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/makinacorpus/Leaflet.TextPath/86bd037d411a706a02779032d1386fa4d0d945a0/screenshot.png
--------------------------------------------------------------------------------
8 | 
9 | 
18 |
19 | 
21 | 