|
1
|
|
|
/*jslint |
|
2
|
|
|
indent: 4 |
|
3
|
|
|
*/ |
|
4
|
|
|
|
|
5
|
|
|
/*global |
|
6
|
|
|
document, |
|
7
|
|
|
google |
|
8
|
|
|
*/ |
|
9
|
|
|
|
|
10
|
|
|
var IconFactory = {}; |
|
11
|
|
|
IconFactory.m_font = "16px sans"; |
|
12
|
|
|
IconFactory.m_canvas = null; |
|
13
|
|
|
|
|
14
|
|
|
|
|
15
|
|
|
IconFactory.createMapIcon = function (text, hexcolor) { |
|
16
|
|
|
'use strict'; |
|
17
|
|
|
|
|
18
|
|
|
var w = Math.max(33.0, 16.0 + this.computeTextWidth(text, this.m_font)), |
|
19
|
|
|
w2 = 0.5 * w, |
|
20
|
|
|
txtcolor = (this.computeLuma(hexcolor) >= 128) ? "#000000" : "#FFFFFF", |
|
21
|
|
|
svg = |
|
22
|
|
|
'<svg \ |
|
23
|
|
|
xmlns:svg="http://www.w3.org/2000/svg" \ |
|
24
|
|
|
xmlns="http://www.w3.org/2000/svg" \ |
|
25
|
|
|
width="' + w + '" height="37" \ |
|
26
|
|
|
viewBox="0 0 ' + w + ' 37" \ |
|
27
|
|
|
version="1.1"> \ |
|
28
|
|
|
<defs> \ |
|
29
|
|
|
<filter id="shadow" x="0" y="0" width="100%" height="100%"> \ |
|
30
|
|
|
<feOffset result="offOut" in="SourceAlpha" dx="1" dy="1" /> \ |
|
31
|
|
|
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" /> \ |
|
32
|
|
|
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> \ |
|
33
|
|
|
</filter> \ |
|
34
|
|
|
</defs> \ |
|
35
|
|
|
<path \ |
|
36
|
|
|
fill="' + hexcolor + '" stroke="#000000" \ |
|
37
|
|
|
d="M 4 4 L 4 26 L ' + (w2 - 4.0) + ' 26 L ' + (w2) + ' 33 L ' + (w2 + 4.0) + ' 26 L ' + (w - 4.0) + ' 26 L ' + (w - 4.0) + ' 4 L 4 4 z" \ |
|
38
|
|
|
filter="url(#shadow)" /> \ |
|
39
|
|
|
<text \ |
|
40
|
|
|
style="text-anchor:middle;font-style:normal;font-weight:normal;font-size:16px;line-height:100%;font-family:sans;letter-spacing:0px;word-spacing:0px;fill:' + txtcolor + ';fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" \ |
|
41
|
|
|
x="' + (w2) + '" y="21">' + text + '</text> \ |
|
42
|
|
|
</svg>', |
|
43
|
|
|
url = 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg); |
|
44
|
|
|
|
|
45
|
|
|
return { |
|
46
|
|
|
url: url, |
|
47
|
|
|
size: new google.maps.Size(w, 37), |
|
48
|
|
|
scaledSize: new google.maps.Size(w, 37), |
|
49
|
|
|
origin: new google.maps.Point(0, 0), |
|
50
|
|
|
anchor: new google.maps.Point(w2, 37 - 2.0)}; |
|
51
|
|
|
}; |
|
52
|
|
|
|
|
53
|
|
|
|
|
54
|
|
|
IconFactory.createMiniIcon = function (text, hexcolor) { |
|
55
|
|
|
'use strict'; |
|
56
|
|
|
|
|
57
|
|
|
var w = Math.max(33.0, 16.0 + this.computeTextWidth(text, this.m_font)), |
|
58
|
|
|
w2 = 0.5 * w, |
|
59
|
|
|
txtcolor = (this.computeLuma(hexcolor) >= 128) ? "#000000" : "#FFFFFF", |
|
60
|
|
|
svg = |
|
61
|
|
|
'<svg \ |
|
62
|
|
|
xmlns:svg="http://www.w3.org/2000/svg" \ |
|
63
|
|
|
xmlns="http://www.w3.org/2000/svg" \ |
|
64
|
|
|
width="' + w + '" height="30" \ |
|
65
|
|
|
viewBox="0 0 ' + w + ' 30" \ |
|
66
|
|
|
version="1.1"> \ |
|
67
|
|
|
<path \ |
|
68
|
|
|
fill="' + hexcolor + '" stroke="#000000" \ |
|
69
|
|
|
d="M 4 4 L 4 26 L ' + (w - 4.0) + ' 26 L ' + (w - 4.0) + ' 4 L 4 4 z" \ |
|
70
|
|
|
/> \ |
|
71
|
|
|
<text \ |
|
72
|
|
|
style="text-anchor:middle;font-style:normal;font-weight:normal;font-size:16px;line-height:100%;font-family:sans;letter-spacing:0px;word-spacing:0px;fill:' + txtcolor + ';fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" \ |
|
73
|
|
|
x="' + (w2) + '" y="21">' + text + '</text> \ |
|
74
|
|
|
</svg>', |
|
75
|
|
|
url = 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg); |
|
76
|
|
|
|
|
77
|
|
|
return url; |
|
78
|
|
|
}; |
|
79
|
|
|
|
|
80
|
|
|
|
|
81
|
|
|
IconFactory.computeTextWidth = function(text, font) { |
|
82
|
|
|
'use strict'; |
|
83
|
|
|
|
|
84
|
|
|
// re-use canvas object for better performance |
|
85
|
|
|
if (!this.m_canvas) { |
|
86
|
|
|
this.m_canvas = document.createElement("canvas"); |
|
87
|
|
|
} |
|
88
|
|
|
|
|
89
|
|
|
var context = this.m_canvas.getContext("2d"); |
|
90
|
|
|
context.font = font; |
|
91
|
|
|
|
|
92
|
|
|
return context.measureText(text).width; |
|
93
|
|
|
}; |
|
94
|
|
|
|
|
95
|
|
|
|
|
96
|
|
|
IconFactory.computeLuma = function(hexcolor) { |
|
97
|
|
|
'use strict'; |
|
98
|
|
|
|
|
99
|
|
|
var c = hexcolor.substring(1), // strip # |
|
100
|
|
|
rgb = parseInt(c, 16), // convert rrggbb to decimal |
|
101
|
|
|
r = (rgb >> 16) & 0xff, // extract red |
|
102
|
|
|
g = (rgb >> 8) & 0xff, // extract green |
|
103
|
|
|
b = (rgb >> 0) & 0xff, // extract blue |
|
104
|
|
|
luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709 |
|
105
|
|
|
return luma; |
|
106
|
|
|
}; |
|
107
|
|
|
|
flopp /
FloppsMap
