https://tourist-informator.info/js/StyledMarker.js

1/**
2 * @name StyledMarkerMaker
3 * @version 0.5
4 * @author Gabriel Schneider
5 * @copyright (c) 2010 Gabriel Schneider
6 * @fileoverview This gives you static functions for creating dynamically
7 *     styled markers using Charts API outputs as well as an ability to
8 *     extend with custom types.
9 */
10
11/**
12 * Licensed under the Apache License, Version 2.0 (the 'License');
13 * you may not use this file except in compliance with the License.
14 * You may obtain a copy of the License at
15 *
16 *     http://www.apache.org/licenses/LICENSE-2.0
17 *
18 * Unless required by applicable law or agreed to in writing, software
19 * distributed under the License is distributed on an 'AS IS' BASIS,
20 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
21 * See the License for the specific language governing permissions and
22 * limitations under the License. 
23 */
24
25var StyledIconTypes = {};
26var StyledMarker, StyledIcon;
27
28/**
29 * @param {Function} childCtor Child class.
30 * @param {Function} parentCtor Parent class.
31 */
32function inherits(childCtor, parentCtor) {
33  /** @constructor */
34  function tempCtor() {};
35  tempCtor.prototype = parentCtor.prototype;
36  childCtor.superClass_ = parentCtor.prototype;
37  childCtor.prototype = new tempCtor();
38  /** @override */
39  childCtor.prototype.constructor = childCtor;
40}
41 
42(function() {
43  var bu_ = 'https://chart.googleapis.com/chart?chst=';
44  var gm_ = google.maps;
45  var gp_ = gm_.Point;
46  var ge_ = gm_.event;
47  var gmi_ = gm_.MarkerImage;
48  
49
50  /**
51  * This class is an extended version of google.maps.Marker. It allows
52  * styles to be applied that change it's appearance.
53  * @extends google.maps.Marker
54  * @param {StyledMarkerOptions} StyledMarkerOptions The options for the Marker
55  */
56  StyledMarker = function(styledMarkerOptions) {
57    gm_.Marker.call(this);
58    var me=this;
59    var ci = me.styleIcon = styledMarkerOptions.styleIcon;
60    me.bindTo('icon',ci);
61    me.bindTo('shadow',ci);
62    me.bindTo('shape',ci);
63    me.setOptions(styledMarkerOptions);
64  };
65  inherits(StyledMarker, gm_.Marker);
66  
67  /**
68  * This class stores style information that can be applied to StyledMarkers.
69  * @extends google.maps.MVCObject
70  * @param {StyledIconType} styledIconType The type of style this icon is.
71  * @param {StyledIconOptions} styledIconOptions The options for this StyledIcon.
72  * @param {StyledIcon} styleClass A class to apply extended style information.
73  */
74  StyledIcon = function(styledIconType,styledIconOptions,styleClass) {
75    var k;
76    var me=this;
77    var i_ = 'icon';
78    var sw_ = 'shadow';
79    var s_ = 'shape';
80    var a_ = [];
81
82    function gs_() {
83      var image_ = document.createElement('img');
84      var simage_ = document.createElement('img');
85      ge_.addDomListenerOnce(simage_, 'load', function() {
86        var w = simage_.width, h = simage_.height;
87        me.set(sw_,new gmi_(styledIconType.getShadowURL(me),null,null,styledIconType.getShadowAnchor(me,w,h)));
88        simage = null;
89      });
90      ge_.addDomListenerOnce(image_, 'load', function() {
91        var w = image_.width, h = image_.height;
92        me.set(i_,new gmi_(styledIconType.getURL(me),null,null,styledIconType.getAnchor(me,w,h)));
93        me.set(s_,styledIconType.getShape(me,w,h));
94        image_ = null;
95      });
96      image_.src = styledIconType.getURL(me);
97      simage_.src = styledIconType.getShadowURL(me);
98    }
99
100    /**
101    * set:
102    * This function sets a given style property to the given value.
103    * @param {String} name The name of the property to set.
104    * @param {Object} value The value to set the property to.
105    * get:
106    * This function gets a given style property.
107    * @param {String} name The name of the property to get.
108    * @return {Object}
109    */
110    me.as_ = function(v) {
111      a_.push(v);
112      for(k in styledIconOptions) {
113        v.set(k, styledIconOptions[k]);
114      }
115    }
116
117    if (styledIconType !== StyledIconTypes.CLASS) {
118      for (k in styledIconType.defaults) {
119        me.set(k, styledIconType.defaults[k]);
120      }
121      me.setValues(styledIconOptions);
122      me.set(i_,styledIconType.getURL(me));
123      me.set(sw_,styledIconType.getShadowURL(me));
124      if (styleClass) styleClass.as_(me);
125      gs_();
126      me.changed = function(k) {
127        if (k!==i_&&k!==s_&&k!==sw_) {
128          gs_();
129        }
130      };
131    } else {
132      me.setValues(styledIconOptions);
133      me.changed = function(v) {
134        styledIconOptions[v] = me.get(v);
135        for (k = 0; k < a_.length; k++) {
136          a_[k].set(v,me.get(v));
137        }
138      };
139      if (styleClass) styleClass.as_(me);
140    }
141  };
142  StyledIcon.prototype = new gm_.MVCObject();
143  
144  /**
145  * StyledIconType
146  * This class holds functions for building the information needed to style markers.
147  * getURL:
148  * This function builds and returns a URL to use for the Marker icon property.
149  * @param {StyledIcon}

149 icon The StyledIcon that holds style information
150  * @return {String}
151  * getShadowURL:
152  * This function builds and returns a URL to use for the Marker shadow property.
153  * @param {StyledIcon} icon The StyledIcon that holds style information
154  * @return {String{
155  * getAnchor:
156  * This function builds and returns a Point to indicate where the marker is placed.
157  * @param {StyledIcon} icon The StyledIcon that holds style information
158  * @param {Number} width The width of the icon image.
159  * @param {Number} height The height of the icon image.
160  * @return {google.maps.Point}
161  * getShadowAnchor:
162  * This function builds and returns a Point to indicate where the shadow is placed.
163  * @param {StyledIcon} icon The StyledIcon that holds style information
164  * @param {Number} width The width of the shadow image.
165  * @param {Number} height The height of the shadow image.
166  * @return {google.maps.Point}
167  * getShape:
168  * This function builds and returns a MarkerShape to indicate where the Marker is clickable.
169  * @param {StyledIcon}

169 icon The StyledIcon that holds style information
170  * @param {Number} width The width of the icon image.
171  * @param {Number} height The height of the icon image.
172  * @return {google.maps.MarkerShape}
173  */
174  
175  StyledIconTypes.CLASS = {};
176  
177  StyledIconTypes.MARKER = {
178    defaults: {
179      text:'',
180      color:'00ff00',
181      fore:'000000',
182      starcolor:null
183    },
184    getURL: function(props){
185      var _url;
186      var starcolor_=props.get('starcolor');
187      var text_=props.get('text');
188      var color_=props.get('color').replace(/#/,'');
189      var fore_=props.get('fore').replace(/#/,'');
190      if (starcolor_) {
191        _url = bu_ + 'd_map_xpin_letter&chld=pin_star|';
192      } else {
193        _url = bu_ + 'd_map_pin_letter&chld=';
194      }
195      if (text_) {
196        text_ = text_.substr(0,2);
197      }
198      _url+=text_+'|';
199      _url+=color_+'|';
200      _url+=fore_;
201      if (starcolor_) {
202        _url+='|'+starcolor_.replace(/#/,'');
203      }
204      return _url;
205    },
206    getShadowURL: function(props){
207      if (props.get('starcolor')) {
208        return bu_ + 'd_map_xpin_shadow&chld=pin_star';
209      } else {
210        return bu_ + 'd_map_pin_shadow';
211      }
212    },
213    getAnchor: function(props,width,height){
214      return new gp_(width / 2,height);
215    },
216    getShadowAnchor: function(props,width,height){
217      return new gp_(width / 4,height);
218    },
219    getShape: function(props,width,height){
220      var _iconmap = {};
221      _iconmap.coord = [
222        width / 2, height,
223        (7 / 16) * width, (5 / 8) * height,
224        (5 / 16) * width, (7 / 16) * height,
225        (7 / 32) * width, (5 / 16) * height,
226        (5 / 16) * width, (1 / 8) * height,
227        (1 / 2) * width, 0,
228        (11 / 16) * width, (1 / 8) * height,
229        (25 / 32) * width, (5 / 16) * height,
230        (11 / 16) * width, (7 / 16) * height,
231        (9 / 16) * width, (5 / 8) * height
232      ];
233      for (var i = 0; i < _iconmap.coord.length; i++) {
234        _iconmap.coord[i] = Math.round(_iconmap.coord[i]);
235      }
236      _iconmap.type = 'poly';
237      return _iconmap;
238    }
239  };
240  StyledIconTypes.BUBBLE = {
241    defaults: {
242      text:'',
243      color:'00ff00',
244      fore:'000000'
245    },
246    getURL: function(props){
247      var _url = bu_ + 'd_bubble_text_small&chld=bb|';
248      _url+=props.get('text')+'|';
249      _url+=props.get('color').replace(/#/,'')+'|';
250      _url+=props.get('fore').replace(/#/,'');
251      return _url;
252    },
253    getShadowURL: function(props){
254      return bu_ + 'd_bubble_text_small_shadow&chld=bb|' + props.get('text');
255    },
256    getAnchor: function(props,width,height){
257      return new google.maps.Point(0,42);
258    },
259    getShadowAnchor: function(props,width,height){
260      return new google.maps.Point(0,44);
261    },
262    getShape: function(props,width,height){
263      var _iconmap = {};
264      _iconmap.coord = [
265        0,44,
266        13,26,
267        13,6,
268        17,1,
269        width - 4,1,
270        width,6,
271        width,21,
272        width - 4,26,
273        21,26
274      ];
275      _iconmap.type = 'poly';
276      return _iconmap;
277    }
278  };
279})();