| blob | 1b86421d662f28c5a8fecb7ec48af0b80c9ecb48 |
1 /**\r
2 * @name StyledMarkerMaker\r
3 * @version 0.5\r
4 * @author Gabriel Schneider\r
5 * @copyright (c) 2010 Gabriel Schneider\r
6 * @fileoverview This gives you static functions for creating dynamically\r
7 * styled markers using Charts API outputs as well as an ability to\r
8 * extend with custom types.\r
9 */\r
10 \r
11 /**\r
12 * Licensed under the Apache License, Version 2.0 (the 'License');\r
13 * you may not use this file except in compliance with the License.\r
14 * You may obtain a copy of the License at\r
15 *\r
16 * http://www.apache.org/licenses/LICENSE-2.0\r
17 *\r
18 * Unless required by applicable law or agreed to in writing, software\r
19 * distributed under the License is distributed on an 'AS IS' BASIS,\r
20 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
21 * See the License for the specific language governing permissions and\r
22 * limitations under the License. \r
23 */\r
24 \r
25 var StyledIconTypes = {};\r
26 var StyledMarker, StyledIcon;\r
27 \r
28 (function() {\r
29 var bu_ = 'http://chart.apis.google.com/chart?chst=';\r
30 var gm_ = google.maps;\r
31 var gp_ = gm_.Point;\r
32 var ge_ = gm_.event;\r
33 var gmi_ = gm_.MarkerImage;\r
34 \r
35 \r
36 /**\r
37 * This class is an extended version of google.maps.Marker. It allows\r
38 * styles to be applied that change it's appearance.\r
39 * @extends google.maps.Marker\r
40 * @param {StyledMarkerOptions} StyledMarkerOptions The options for the Marker\r
41 */\r
42 StyledMarker = function(styledMarkerOptions) {\r
43 var me=this;\r
44 var ci = me.styleIcon = styledMarkerOptions.styleIcon;\r
45 me.bindTo('icon',ci);\r
46 me.bindTo('shadow',ci);\r
47 me.bindTo('shape',ci);\r
48 me.setOptions(styledMarkerOptions);\r
49 };\r
50 StyledMarker.prototype = new gm_.Marker();\r
51 \r
52 /**\r
53 * This class stores style information that can be applied to StyledMarkers.\r
54 * @extends google.maps.MVCObject\r
55 * @param {StyledIconType} styledIconType The type of style this icon is.\r
56 * @param {StyledIconOptions} styledIconOptions The options for this StyledIcon.\r
57 * @param {StyledIcon} styleClass A class to apply extended style information.\r
58 */\r
59 StyledIcon = function(styledIconType,styledIconOptions,styleClass) {\r
60 var k;\r
61 var me=this;\r
62 var i_ = 'icon';\r
63 var sw_ = 'shadow';\r
64 var s_ = 'shape';\r
65 var a_ = [];\r
66 \r
67 function gs_() {\r
68 var image_ = document.createElement('img');\r
69 var simage_ = document.createElement('img');\r
70 ge_.addDomListenerOnce(simage_, 'load', function() {\r
71 var w = simage_.width, h = simage_.height;\r
72 me.set(sw_,new gmi_(styledIconType.getShadowURL(me),null,null,styledIconType.getShadowAnchor(me,w,h)));\r
73 simage = null;\r
74 });\r
75 ge_.addDomListenerOnce(image_, 'load', function() {\r
76 var w = image_.width, h = image_.height;\r
77 me.set(i_,new gmi_(styledIconType.getURL(me),null,null,styledIconType.getAnchor(me,w,h)));\r
78 me.set(s_,styledIconType.getShape(me,w,h));\r
79 image_ = null;\r
80 });\r
81 image_.src = styledIconType.getURL(me);\r
82 simage_.src = styledIconType.getShadowURL(me);\r
83 }\r
84 \r
85 /**\r
86 * set:\r
87 * This function sets a given style property to the given value.\r
88 * @param {String} name The name of the property to set.\r
89 * @param {Object} value The value to set the property to.\r
90 * get:\r
91 * This function gets a given style property.\r
92 * @param {String} name The name of the property to get.\r
93 * @return {Object}\r
94 */\r
95 me.as_ = function(v) {\r
96 a_.push(v);\r
97 for(k in styledIconOptions) {\r
98 v.set(k, styledIconOptions[k]);\r
99 }\r
100 }\r
101 \r
102 if (styledIconType !== StyledIconTypes.CLASS) {\r
103 for (k in styledIconType.defaults) {\r
104 me.set(k, styledIconType.defaults[k]);\r
105 }\r
106 me.setValues(styledIconOptions);\r
107 me.set(i_,styledIconType.getURL(me));\r
108 me.set(sw_,styledIconType.getShadowURL(me));\r
109 if (styleClass) styleClass.as_(me);\r
110 gs_();\r
111 me.changed = function(k) {\r
112 if (k!==i_&&k!==s_&&k!==sw_) {\r
113 gs_();\r
114 }\r
115 };\r
116 } else {\r
117 me.setValues(styledIconOptions);\r
118 me.changed = function(v) {\r
119 styledIconOptions[v] = me.get(v);\r
120 for (k = 0; k < a_.length; k++) {\r
121 a_[k].set(v,me.get(v));\r
122 }\r
123 };\r
124 if (styleClass) styleClass.as_(me);\r
125 }\r
126 };\r
127 StyledIcon.prototype = new gm_.MVCObject();\r
128 \r
129 /**\r
130 * StyledIconType\r
131 * This class holds functions for building the information needed to style markers.\r
132 * getURL:\r
133 * This function builds and returns a URL to use for the Marker icon property.\r
134 * @param {StyledIcon} icon The StyledIcon that holds style information\r
135 * @return {String}\r
136 * getShadowURL:\r
137 * This function builds and returns a URL to use for the Marker shadow property.\r
138 * @param {StyledIcon} icon The StyledIcon that holds style information\r
139 * @return {String{\r
140 * getAnchor:\r
141 * This function builds and returns a Point to indicate where the marker is placed.\r
142 * @param {StyledIcon} icon The StyledIcon that holds style information\r
143 * @param {Number} width The width of the icon image.\r
144 * @param {Number} height The height of the icon image.\r
145 * @return {google.maps.Point}\r
146 * getShadowAnchor:\r
147 * This function builds and returns a Point to indicate where the shadow is placed.\r
148 * @param {StyledIcon} icon The StyledIcon that holds style information\r
149 * @param {Number} width The width of the shadow image.\r
150 * @param {Number} height The height of the shadow image.\r
151 * @return {google.maps.Point}\r
152 * getShape:\r
153 * This function builds and returns a MarkerShape to indicate where the Marker is clickable.\r
154 * @param {StyledIcon} icon The StyledIcon that holds style information\r
155 * @param {Number} width The width of the icon image.\r
156 * @param {Number} height The height of the icon image.\r
157 * @return {google.maps.MarkerShape}\r
158 */\r
159 \r
160 StyledIconTypes.CLASS = {};\r
161 \r
162 StyledIconTypes.MARKER = {\r
163 defaults: {\r
164 text:'',\r
165 color:'00ff00',\r
166 fore:'000000',\r
167 starcolor:null\r
168 },\r
169 getURL: function(props){\r
170 var _url;\r
171 var starcolor_=props.get('starcolor');\r
172 var text_=props.get('text');\r
173 var color_=props.get('color').replace(/#/,'');\r
174 var fore_=props.get('fore').replace(/#/,'');\r
175 if (starcolor_) {\r
176 _url = bu_ + 'd_map_xpin_letter&chld=pin_star|';\r
177 } else {\r
178 _url = bu_ + 'd_map_pin_letter&chld=';\r
179 }\r
180 if (text_) {\r
181 text_ = text_.substr(0,2);\r
182 }\r
183 _url+=text_+'|';\r
184 _url+=color_+'|';\r
185 _url+=fore_;\r
186 if (starcolor_) {\r
187 _url+='|'+starcolor_.replace(/#/,'');\r
188 }\r
189 return _url;\r
190 },\r
191 getShadowURL: function(props){\r
192 if (props.get('starcolor')) {\r
193 return bu_ + 'd_map_xpin_shadow&chld=pin_star';\r
194 } else {\r
195 return bu_ + 'd_map_pin_shadow';\r
196 }\r
197 },\r
198 getAnchor: function(props,width,height){\r
199 return new gp_(width / 2,height);\r
200 },\r
201 getShadowAnchor: function(props,width,height){\r
202 return new gp_(width / 4,height);\r
203 },\r
204 getShape: function(props,width,height){\r
205 var _iconmap = {};\r
206 _iconmap.coord = [\r
207 width / 2, height,\r
208 (7 / 16) * width, (5 / 8) * height,\r
209 (5 / 16) * width, (7 / 16) * height,\r
210 (7 / 32) * width, (5 / 16) * height,\r
211 (5 / 16) * width, (1 / 8) * height,\r
212 (1 / 2) * width, 0,\r
213 (11 / 16) * width, (1 / 8) * height,\r
214 (25 / 32) * width, (5 / 16) * height,\r
215 (11 / 16) * width, (7 / 16) * height,\r
216 (9 / 16) * width, (5 / 8) * height\r
217 ];\r
218 for (var i = 0; i < _iconmap.coord.length; i++) {\r
219 _iconmap.coord[i] = Math.round(_iconmap.coord[i]);\r
220 }\r
221 _iconmap.type = 'poly';\r
222 return _iconmap;\r
223 }\r
224 };\r
225 StyledIconTypes.BUBBLE = {\r
226 defaults: {\r
227 text:'',\r
228 color:'00ff00',\r
229 fore:'000000'\r
230 },\r
231 getURL: function(props){\r
232 var _url = bu_ + 'd_bubble_text_small&chld=bb|';\r
233 _url+=props.get('text')+'|';\r
234 _url+=props.get('color').replace(/#/,'')+'|';\r
235 _url+=props.get('fore').replace(/#/,'');\r
236 return _url;\r
237 },\r
238 getShadowURL: function(props){\r
239 return bu_ + 'd_bubble_text_small_shadow&chld=bb|' + props.get('text');\r
240 },\r
241 getAnchor: function(props,width,height){\r
242 return new google.maps.Point(0,42);\r
243 },\r
244 getShadowAnchor: function(props,width,height){\r
245 return new google.maps.Point(0,44);\r
246 },\r
247 getShape: function(props,width,height){\r
248 var _iconmap = {};\r
249 _iconmap.coord = [\r
250 0,44,\r
251 13,26,\r
252 13,6,\r
253 17,1,\r
254 width - 4,1,\r
255 width,6,\r
256 width,21,\r
257 width - 4,26,\r
258 21,26\r
259 ];\r
260 _iconmap.type = 'poly';\r
261 return _iconmap;\r
262 }\r
263 };\r
264 })();