1
|
|
|
/* |
2
|
|
|
* Leaflet.TextPath - Shows text along a polyline |
3
|
|
|
* Inspired by Tom Mac Wright article : |
4
|
|
|
* 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
|
|
|
__update = L.Polyline.prototype._update, |
13
|
|
|
__bringToFront = L.Polyline.prototype.bringToFront; |
14
|
|
|
|
15
|
|
|
|
16
|
|
|
var PolylineTextPath = { |
17
|
|
|
|
18
|
|
|
onAdd: function (map) { |
19
|
|
|
__onAdd.call(this, map); |
20
|
|
|
this._textRedraw(); |
21
|
|
|
}, |
22
|
|
|
|
23
|
|
|
_update: function () { |
24
|
|
|
__update.call(this); |
25
|
|
|
this._textRedraw(); |
26
|
|
|
}, |
27
|
|
|
|
28
|
|
|
onRemove: function (map) { |
29
|
|
|
map = map || this._map; |
30
|
|
|
if (map && this._textNode) |
31
|
|
|
this._map._renderer._container.removeChild(this._textNode); |
|
|
|
|
32
|
|
|
__onRemove.call(this, map); |
33
|
|
|
}, |
34
|
|
|
|
35
|
|
|
bringToFront: function () { |
36
|
|
|
__bringToFront.call(this); |
37
|
|
|
this._textRedraw(); |
38
|
|
|
}, |
39
|
|
|
|
40
|
|
|
_updatePath: function () { |
41
|
|
|
__updatePath.call(this); |
42
|
|
|
this._textRedraw(); |
43
|
|
|
}, |
44
|
|
|
|
45
|
|
|
_textRedraw: function () { |
46
|
|
|
var text = this._text, |
47
|
|
|
options = this._textOptions; |
48
|
|
|
if (text) { |
49
|
|
|
this.setText(null).setText(text, options); |
50
|
|
|
} |
51
|
|
|
}, |
52
|
|
|
|
53
|
|
|
setText: function (text, options) { |
54
|
|
|
this._text = text; |
55
|
|
|
this._textOptions = options; |
56
|
|
|
|
57
|
|
|
/* If not in SVG mode or Polyline not added to map yet return */ |
58
|
|
|
/* setText will be called by onAdd, using value stored in this._text */ |
59
|
|
|
if (!L.Browser.svg || typeof this._map === 'undefined') { |
|
|
|
|
60
|
|
|
return this; |
61
|
|
|
} |
62
|
|
|
|
63
|
|
|
var defaults = { |
64
|
|
|
repeat: false, |
65
|
|
|
fillColor: 'black', |
66
|
|
|
attributes: {}, |
67
|
|
|
below: false, |
68
|
|
|
}; |
69
|
|
|
options = L.Util.extend(defaults, options); |
70
|
|
|
|
71
|
|
|
/* If empty text, hide */ |
72
|
|
|
if (!text) { |
73
|
|
|
if (this._textNode && this._textNode.parentNode) { |
74
|
|
|
this._map._renderer._container.removeChild(this._textNode); |
75
|
|
|
|
76
|
|
|
/* delete the node, so it will not be removed a 2nd time if the layer is later removed from the map */ |
77
|
|
|
delete this._textNode; |
78
|
|
|
} |
79
|
|
|
return this; |
80
|
|
|
} |
81
|
|
|
|
82
|
|
|
text = text.replace(/ /g, '\u00A0'); // Non breakable spaces |
83
|
|
|
var id = 'pathdef-' + L.Util.stamp(this); |
84
|
|
|
var svg = this._map._renderer._container; |
85
|
|
|
this._path.setAttribute('id', id); |
86
|
|
|
|
87
|
|
|
if (options.repeat) { |
88
|
|
|
/* Compute single pattern length */ |
89
|
|
|
var pattern = document.createElementNS('http://www.w3.org/2000/svg', 'text'); |
90
|
|
|
for (var attr in options.attributes) |
|
|
|
|
91
|
|
|
pattern.setAttribute(attr, options.attributes[attr]); |
|
|
|
|
92
|
|
|
pattern.appendChild(document.createTextNode(text)); |
93
|
|
|
svg.appendChild(pattern); |
94
|
|
|
var alength = pattern.getComputedTextLength(); |
95
|
|
|
svg.removeChild(pattern); |
96
|
|
|
|
97
|
|
|
/* Create string as long as path */ |
98
|
|
|
text = new Array(Math.ceil(this._path.getTotalLength() / alength)).join(text); |
|
|
|
|
99
|
|
|
} |
100
|
|
|
|
101
|
|
|
/* Put it along the path using textPath */ |
102
|
|
|
var textNode = document.createElementNS('http://www.w3.org/2000/svg', 'text'), |
103
|
|
|
textPath = document.createElementNS('http://www.w3.org/2000/svg', 'textPath'); |
104
|
|
|
|
105
|
|
|
var dy = options.offset || this._path.getAttribute('stroke-width'); |
106
|
|
|
|
107
|
|
|
textPath.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", '#'+id); |
108
|
|
|
textNode.setAttribute('dy', dy); |
109
|
|
|
for (var attr in options.attributes) |
|
|
|
|
110
|
|
|
textNode.setAttribute(attr, options.attributes[attr]); |
|
|
|
|
111
|
|
|
textPath.appendChild(document.createTextNode(text)); |
112
|
|
|
textNode.appendChild(textPath); |
113
|
|
|
this._textNode = textNode; |
114
|
|
|
|
115
|
|
|
if (options.below) { |
116
|
|
|
svg.insertBefore(textNode, svg.firstChild); |
117
|
|
|
} |
118
|
|
|
else { |
119
|
|
|
svg.appendChild(textNode); |
120
|
|
|
} |
121
|
|
|
|
122
|
|
|
/* Center text according to the path's bounding box */ |
123
|
|
|
if (options.center) { |
124
|
|
|
var textLength = textNode.getComputedTextLength(); |
125
|
|
|
var pathLength = this._path.getTotalLength(); |
126
|
|
|
/* Set the position for the left side of the textNode */ |
127
|
|
|
textNode.setAttribute('dx', ((pathLength / 2) - (textLength / 2))); |
128
|
|
|
} |
129
|
|
|
|
130
|
|
|
/* Change label rotation (if required) */ |
131
|
|
|
if (options.orientation) { |
132
|
|
|
var rotateAngle = 0; |
133
|
|
|
switch (options.orientation) { |
134
|
|
|
case 'flip': |
135
|
|
|
rotateAngle = 180; |
136
|
|
|
break; |
137
|
|
|
case 'perpendicular': |
138
|
|
|
rotateAngle = 90; |
139
|
|
|
break; |
140
|
|
|
default: |
141
|
|
|
rotateAngle = options.orientation; |
142
|
|
|
} |
143
|
|
|
|
144
|
|
|
var rotatecenterX = (textNode.getBBox().x + textNode.getBBox().width / 2); |
145
|
|
|
var rotatecenterY = (textNode.getBBox().y + textNode.getBBox().height / 2); |
146
|
|
|
textNode.setAttribute('transform','rotate(' + rotateAngle + ' ' + rotatecenterX + ' ' + rotatecenterY + ')'); |
147
|
|
|
} |
148
|
|
|
|
149
|
|
|
/* Initialize mouse events for the additional nodes */ |
150
|
|
|
if (this.options.clickable) { |
151
|
|
|
if (L.Browser.svg || !L.Browser.vml) { |
152
|
|
|
textPath.setAttribute('class', 'leaflet-clickable'); |
153
|
|
|
} |
154
|
|
|
|
155
|
|
|
/*L.DomEvent.on(textNode, 'click', this._onMouseClick, this); |
156
|
|
|
|
157
|
|
|
var events = ['dblclick', 'mousedown', 'mouseover', |
158
|
|
|
'mouseout', 'mousemove', 'contextmenu']; |
159
|
|
|
for (var i = 0; i < events.length; i++) { |
160
|
|
|
L.DomEvent.on(textNode, events[i], this._fireMouseEvent, this); |
161
|
|
|
}*/ |
162
|
|
|
} |
163
|
|
|
|
164
|
|
|
return this; |
165
|
|
|
} |
166
|
|
|
}; |
167
|
|
|
|
168
|
|
|
L.Polyline.include(PolylineTextPath); |
169
|
|
|
|
170
|
|
|
L.LayerGroup.include({ |
171
|
|
|
setText: function(text, options) { |
172
|
|
|
for (var layer in this._layers) { |
|
|
|
|
173
|
|
|
if (typeof this._layers[layer].setText === 'function') { |
174
|
|
|
this._layers[layer].setText(text, options); |
175
|
|
|
} |
176
|
|
|
} |
177
|
|
|
return this; |
178
|
|
|
} |
179
|
|
|
}); |
180
|
|
|
|
181
|
|
|
|
182
|
|
|
|
183
|
|
|
})(); |
184
|
|
|
|
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.