https://www.6columbushotel.com/wp-content/themes/sixty/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 *     https://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(function() {
29  var bu_ = 'https://chart.apis.google.com/chart?chst=';
30  var gm_ = google.maps;
31  var gp_ = gm_.Point;
32  var ge_ = gm_.event;
33  var gmi_ = gm_.MarkerImage;
34  
35
36  /**
37  * This class is an extended version of google.maps.Marker. It allows
38  * styles to be applied that change it's appearance.
39  * @extends google.maps.Marker
40  * @param {StyledMarkerOptions} StyledMarkerOptions The options for the Marker
41  */
42  StyledMarker = function(styledMarkerOptions) {
43    var me=this;
44    var ci = me.styleIcon = styledMarkerOptions.styleIcon;
45    me.bindTo('icon',ci);
46    me.bindTo('shadow',ci);
47    me.bindTo('shape',ci);
48    me.setOptions(styledMarkerOptions);
49  };
50  StyledMarker.prototype = new gm_.Marker();
51  
52  /**
53  * This class stores style information that can be applied to StyledMarkers.
54  * @extends google.maps.MVCObject
55  * @param {StyledIconType} styledIconType The type of style this icon is.
56  * @param {StyledIconOptions} styledIconOptions The options for this StyledIcon.
57  * @param {StyledIcon} styleClass A class to apply extended style information.
58  */
59  StyledIcon = function(styledIconType,styledIconOptions,styleClass) {
60    var k;
61    var me=this;
62    var i_ = 'icon';
63    var sw_ = 'shadow';
64    var s_ = 'shape';
65    var a_ = [];
66
67    function gs_() {
68      var image_ = document.createElement('img');
69      var simage_ = document.createElement('img');
70      ge_.addDomListenerOnce(simage_, 'load', function() {
71        var w = simage_.width, h = simage_.height;
72        me.set(sw_,new gmi_(styledIconType.getShadowURL(me),null,null,styledIconType.getShadowAnchor(me,w,h)));
73        simage = null;
74      });
75      ge_.addDomListenerOnce(image_, 'load', function() {
76        var w = image_.width, h = image_.height;
77        me.set(i_,new gmi_(styledIconType.getURL(me),null,null,styledIconType.getAnchor(me,w,h)));
78        me.set(s_,styledIconType.getShape(me,w,h));
79        image_ = null;
80      });
81      image_.src = styledIconType.getURL(me);
82      simage_.src = styledIconType.getShadowURL(me);
83    }
84
85    /**
86    * set:
87    * This function sets a given style property to the given value.
88    * @param {String} name The name of the property to set.
89    * @param {Object} value The value to set the property to.
90    * get:
91    * This function gets a given style property.
92    * @param {String} name The name of the property to get.
93    * @return {Object}
94    */
95    me.as_ = function(v) {
96      a_.push(v);
97      for(k in styledIconOptions) {
98        v.set(k, styledIconOptions[k]);
99      }
100    }
101
102    if (styledIconType !== StyledIconTypes.CLASS) {
103      for (k in styledIconType.defaults) {
104        me.set(k, styledIconType.defaults[k]);
105      }
106      me.setValues(styledIconOptions);
107      me.set(i_,styledIconType.getURL(me));
108      me.set(sw_,styledIconType.getShadowURL(me));
109      if (styleClass) styleClass.as_(me);
110      gs_();
111      me.changed = function(k) {
112        if (k!==i_&&k!==s_&&k!==sw_) {
113          gs_();
114        }
115      };
116    } else {
117      me.setValues(styledIconOptions);
118      me.changed = function(v) {
119        styledIconOptions[v] = me.get(v);
120        for (k = 0; k < a_.length; k++) {
121          a_[k].set(v,me.get(v));
122        }
123      };
124      if (styleClass) styleClass.as_(me);
125    }
126  };
127  StyledIcon.prototype = new gm_.MVCObject();
128  
129  /**
130  * StyledIconType
131  * This class holds functions for building the information needed to style markers.
132  * getURL:
133  * This function builds and returns a URL to use for the Marker icon property.
134  * @param {StyledIcon}

134 icon The StyledIcon that holds style information
135  * @return {String}
136  * getShadowURL:
137  * This function builds and returns a URL to use for the Marker shadow property.
138  * @param {StyledIcon} icon The StyledIcon that holds style information
139  * @return {String{
140  * getAnchor:
141  * This function builds and returns a Point to indicate where the marker is placed.
142  * @param {StyledIcon} icon The StyledIcon that holds style information
143  * @param {Number} width The width of the icon image.
144  * @param {Number} height The height of the icon image.
145  * @return {google.maps.Point}
146  * getShadowAnchor:
147  * This function builds and returns a Point to indicate where the shadow is placed.
148  * @param {StyledIcon} icon The StyledIcon that holds style information
149  * @param {Number} width The width of the shadow image.
150  * @param {Number} height The height of the shadow image.
151  * @return {google.maps.Point}
152  * getShape:
153  * This function builds and returns a MarkerShape to indicate where the Marker is clickable.
154  * @param {StyledIcon}

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