| Total Complexity | 73 |
| Complexity/F | 3.48 |
| Lines of Code | 605 |
| Function Count | 21 |
| Duplicated Lines | 605 |
| Ratio | 100 % |
| Changes | 2 | ||
| Bugs | 1 | Features | 1 |
Duplicate code is one of the most pungent code smells. A rule that is often used is to re-structure code once it is duplicated in three or more places.
Common duplication problems, and corresponding solutions are:
Complex classes like dist/markerfactory.esm.js often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
| 1 | View Code Duplication | var MarkerFactory = {}; |
|
| 2 | |||
| 3 | function compact(array) { |
||
| 4 | var index = -1, |
||
| 5 | length = array ? array.length : 0, |
||
| 6 | resIndex = 0, |
||
| 7 | result = []; |
||
| 8 | |||
| 9 | while (++index < length) { |
||
| 10 | var value = array[index]; |
||
| 11 | if (value) { |
||
| 12 | result[resIndex++] = value; |
||
| 13 | } |
||
| 14 | } |
||
| 15 | return result; |
||
| 16 | } |
||
| 17 | |||
| 18 | |||
| 19 | |||
| 20 | var defaults = { |
||
| 21 | h: 1, |
||
| 22 | s: 78, // constant saturation |
||
| 23 | l: 63, // constant luminance |
||
| 24 | a: 1 |
||
| 25 | }; |
||
| 26 | |||
| 27 | var getColor = function (val, range) { |
||
| 28 | defaults.h = Math.floor((360 / range) * val); |
||
| 29 | return "hsla(" + defaults.h + "," + defaults.s + "%," + defaults.l + "%," + defaults.a + ")"; |
||
| 30 | }; |
||
| 31 | |||
| 32 | var getColor1 = function () { |
||
| 33 | return "hsla(" + defaults.h + "," + defaults.s + "%," + (defaults.l - 30) + "%," + defaults.a + ")"; |
||
| 34 | }; |
||
| 35 | |||
| 36 | var parseHalf = function (foo) { |
||
| 37 | return parseInt(foo / 2, 10); |
||
| 38 | }; |
||
| 39 | |||
| 40 | var darken = function (stringcolor) { |
||
| 41 | var darkercolor = {}; |
||
| 42 | if (stringcolor.fillColor.indexOf('rgb') !== -1) { |
||
| 43 | darkercolor.r = parseHalf(stringcolor.r); |
||
| 44 | darkercolor.g = parseHalf(stringcolor.g); |
||
| 45 | darkercolor.b = parseHalf(stringcolor.b); |
||
| 46 | darkercolor.fillColor = 'rgba(' + darkercolor.r + ',' + darkercolor.g + ',' + darkercolor.b + ',0.99)'; |
||
| 47 | } else if (stringcolor.fillColor.indexOf('hsl') !== -1) { |
||
| 48 | darkercolor.h = stringcolor.h; |
||
| 49 | darkercolor.s = stringcolor.s; |
||
| 50 | darkercolor.l = stringcolor.l - 30; |
||
| 51 | darkercolor.fillColor = 'hsl(' + darkercolor.h + ',' + darkercolor.s + '%,' + darkercolor.l + '%)'; |
||
| 52 | } |
||
| 53 | |||
| 54 | return darkercolor; |
||
| 55 | }; |
||
| 56 | |||
| 57 | var parseHex = function (hexstring, opacity) { |
||
| 58 | var hexcolor = { |
||
| 59 | hex: hexstring |
||
| 60 | }; |
||
| 61 | |||
| 62 | hexstring = hexstring.replace('#', ''); |
||
| 63 | if (hexstring.length === 3) { |
||
| 64 | hexstring = hexstring[0] + hexstring[0] + hexstring[1] + hexstring[1] + hexstring[2] + hexstring[2]; |
||
| 65 | } |
||
| 66 | if (isNaN(parseFloat(opacity, 10))) { |
||
| 67 | opacity = 1; |
||
| 68 | } |
||
| 69 | |||
| 70 | hexcolor.r = parseInt(hexstring.substring(0, 2), 16); |
||
| 71 | hexcolor.g = parseInt(hexstring.substring(2, 4), 16); |
||
| 72 | hexcolor.b = parseInt(hexstring.substring(4, 6), 16); |
||
| 73 | hexcolor.a = opacity; |
||
| 74 | hexcolor.fillColor = 'rgba(' + hexcolor.r + ',' + hexcolor.g + ',' + hexcolor.b + ',' + hexcolor.a + ')'; |
||
| 75 | hexcolor.strokeColor = ['rgba(' + parseHalf(hexcolor.r), parseHalf(hexcolor.g), parseHalf(hexcolor.b), hexcolor.a + ')'].join(','); |
||
| 76 | hexcolor.rgb = hexcolor.fillColor; |
||
| 77 | return hexcolor; |
||
| 78 | }; |
||
| 79 | |||
| 80 | var parseHSL = function (hslstring, opacity) { |
||
| 81 | var hslcolor = {}, |
||
| 82 | hslparts = compact(hslstring.split(/hsla?\(|\,|\)|\%/)); |
||
| 83 | |||
| 84 | if (hslparts[3] === undefined) { |
||
| 85 | hslparts[3] = 1; |
||
| 86 | } |
||
| 87 | if (isNaN(parseFloat(opacity, 10))) { |
||
| 88 | opacity = 1; |
||
| 89 | } |
||
| 90 | |||
| 91 | hslcolor.h = parseFloat(hslparts[0], 10); |
||
| 92 | hslcolor.s = parseFloat(hslparts[1], 10); |
||
| 93 | hslcolor.l = parseFloat(hslparts[2], 10); |
||
| 94 | hslcolor.a = parseFloat(opacity * hslparts[3], 10); |
||
| 95 | |||
| 96 | hslcolor.fillColor = 'hsla(' + hslcolor.h + ',' + hslcolor.s + '%,' + hslcolor.l + '%,' + hslcolor.a + ')'; |
||
| 97 | hslcolor.strokeColor = 'hsla(' + hslcolor.h + ',' + hslcolor.s + '%,' + parseInt(hslcolor.l / 2, 10) + '%,' + hslcolor.a + ')'; |
||
| 98 | hslcolor.hsl = hslcolor.fillColor; |
||
| 99 | return hslcolor; |
||
| 100 | }; |
||
| 101 | |||
| 102 | var parseRGB = function (rgbstring, opacity) { |
||
| 103 | var rgbcolor = {}, |
||
| 104 | rgbparts = compact(rgbstring.split(/rgba?\(|\,|\)/)); |
||
| 105 | |||
| 106 | if (rgbparts[3] === undefined) { |
||
| 107 | rgbparts[3] = 1; |
||
| 108 | } |
||
| 109 | |||
| 110 | if (isNaN(parseFloat(opacity, 10))) { |
||
| 111 | opacity = 1; |
||
| 112 | } |
||
| 113 | |||
| 114 | rgbcolor.r = parseInt(rgbparts[0], 10) % 256; |
||
| 115 | rgbcolor.g = parseInt(rgbparts[1], 10) % 256; |
||
| 116 | rgbcolor.b = parseInt(rgbparts[2], 10) % 256; |
||
| 117 | rgbcolor.a = parseFloat(opacity * rgbparts[3], 10); |
||
| 118 | rgbcolor.fillColor = 'rgba(' + rgbcolor.r + ',' + rgbcolor.g + ',' + rgbcolor.b + ',' + rgbcolor.a + ')'; |
||
| 119 | rgbcolor.strokeColor = 'rgba(' + rgbcolor.r / 2 + ',' + rgbcolor.g / 2 + ',' + rgbcolor.b / 2 + ',' + rgbcolor.a + ')'; |
||
| 120 | rgbcolor.rgb = rgbcolor.fillColor; |
||
| 121 | return rgbcolor; |
||
| 122 | }; |
||
| 123 | |||
| 124 | |||
| 125 | var rgbToHSL = function (r, g, b, a) { |
||
| 126 | r = (r % 256) / 255; |
||
| 127 | g = (g % 256) / 255; |
||
| 128 | b = (b % 256) / 255; |
||
| 129 | if (a === undefined) { |
||
| 130 | a = 1; |
||
| 131 | } |
||
| 132 | var max = Math.max(r, g, b), |
||
| 133 | min = Math.min(r, g, b); |
||
| 134 | var h, s, l = (max + min) / 2; |
||
| 135 | |||
| 136 | if (max === min) { |
||
| 137 | h = s = 0; // achromatic |
||
| 138 | } else { |
||
| 139 | var d = max - min; |
||
| 140 | s = l > 0.5 ? d / (2 - max - min) : d / (max + min); |
||
| 141 | switch (max) { |
||
| 142 | case r: |
||
| 143 | h = (g - b) / d + (g < b ? 6 : 0); |
||
| 144 | break; |
||
| 145 | case g: |
||
| 146 | h = (b - r) / d + 2; |
||
| 147 | break; |
||
| 148 | case b: |
||
| 149 | h = (r - g) / d + 4; |
||
| 150 | break; |
||
| 151 | default: |
||
| 152 | h = 0; |
||
| 153 | break; |
||
| 154 | } |
||
| 155 | |||
| 156 | h /= 6; |
||
| 157 | } |
||
| 158 | var hsl = { |
||
| 159 | h: Math.round(360 * h), |
||
| 160 | s: Math.round(100 * s), |
||
| 161 | l: Math.round(100 * l), |
||
| 162 | a: Math.round(100 * a) / 100 |
||
| 163 | }; |
||
| 164 | |||
| 165 | hsl.fillColor = 'hsla(' + hsl.h + ',' + hsl.s + '%,' + hsl.l + '%,' + hsl.a + ')'; |
||
| 166 | |||
| 167 | return hsl; |
||
| 168 | }; |
||
| 169 | |||
| 170 | var hslToRGB = function (h, s, l, a) { |
||
| 171 | var r, g, b; |
||
| 172 | |||
| 173 | h = parseFloat(h, 10) / 360; |
||
| 174 | s = parseFloat(s, 10) / 100; |
||
| 175 | l = parseFloat(l, 10) / 100; |
||
| 176 | if (a === undefined) { |
||
| 177 | a = 1; |
||
| 178 | } |
||
| 179 | if (s === 0) { |
||
| 180 | r = g = b = l; // achromatic |
||
| 181 | } else { |
||
| 182 | var hue2rgb = function (p, q, t) { |
||
| 183 | if (t < 0) { |
||
| 184 | t += 1; |
||
| 185 | } |
||
| 186 | if (t > 1) { |
||
| 187 | t -= 1; |
||
| 188 | } |
||
| 189 | if (t < 1 / 6) { |
||
| 190 | return p + (q - p) * 6 * t; |
||
| 191 | } |
||
| 192 | if (t < 1 / 2) { |
||
| 193 | return q; |
||
| 194 | } |
||
| 195 | if (t < 2 / 3) { |
||
| 196 | return p + (q - p) * (2 / 3 - t) * 6; |
||
| 197 | } |
||
| 198 | return p; |
||
| 199 | }; |
||
| 200 | |||
| 201 | var q = l < 0.5 ? l * (1 + s) : l + s - l * s; |
||
| 202 | var p = 2 * l - q; |
||
| 203 | r = hue2rgb(p, q, h + 1 / 3); |
||
| 204 | g = hue2rgb(p, q, h); |
||
| 205 | b = hue2rgb(p, q, h - 1 / 3); |
||
| 206 | } |
||
| 207 | |||
| 208 | if (a === undefined) { |
||
| 209 | a = 1; |
||
| 210 | } |
||
| 211 | |||
| 212 | var rgb = { |
||
| 213 | r: Math.round(r * 255), |
||
| 214 | g: Math.round(g * 255), |
||
| 215 | b: Math.round(b * 255), |
||
| 216 | a: parseFloat(a, 10) |
||
| 217 | }; |
||
| 218 | |||
| 219 | rgb.fillColor = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + rgb.a + ')'; |
||
| 220 | |||
| 221 | return rgb; |
||
| 222 | |||
| 223 | }; |
||
| 224 | |||
| 225 | var toDecColor = function (stringcolor) { |
||
| 226 | var parsedcolor = {}; |
||
| 227 | if (!stringcolor) { |
||
| 228 | parsedcolor.fillColor = 'rgba(100,250,50,0.99)'; |
||
| 229 | } else if (stringcolor.indexOf('rgb') !== -1) { |
||
| 230 | parsedcolor = parseRGB(stringcolor); |
||
| 231 | } else if (stringcolor.indexOf('hsl') !== -1) { |
||
| 232 | parsedcolor = parseHSL(stringcolor); |
||
| 233 | } else { |
||
| 234 | parsedcolor = parseHex(stringcolor); |
||
| 235 | } |
||
| 236 | |||
| 237 | return parsedcolor; |
||
| 238 | }; |
||
| 239 | |||
| 240 | |||
| 241 | var createFatMarkerIcon = function (theoptions) { |
||
| 242 | |||
| 243 | var generateFatCanvas = function (options) { |
||
| 244 | var canvas = document.createElement("canvas"); |
||
| 245 | |||
| 246 | canvas.width = 42; |
||
| 247 | canvas.height = 36; |
||
| 248 | |||
| 249 | var anchorX = canvas.width / 2, |
||
| 250 | anchorY = canvas.height - 1, |
||
| 251 | radius = (canvas.width - 18) / 2, |
||
| 252 | angulo = 1.1; |
||
| 253 | |||
| 254 | |||
| 255 | var fontsize = 11; |
||
| 256 | |||
| 257 | var context = canvas.getContext("2d"); |
||
| 258 | |||
| 259 | context.clearRect(0, 0, canvas.width, canvas.height); |
||
| 260 | |||
| 261 | var grad = context.createLinearGradient(0, 0, 0, canvas.height), |
||
| 262 | color0, color1; |
||
| 263 | |||
| 264 | if (options.index !== undefined && options.count > 0) { |
||
| 265 | color0 = getColor(options.index, options.count); |
||
| 266 | color1 = getColor1(); |
||
| 267 | } else { |
||
| 268 | var deccolor = toDecColor(options.color); |
||
| 269 | color0 = deccolor.fillColor; |
||
| 270 | color1 = darken(deccolor).fillColor; |
||
| 271 | } |
||
| 272 | |||
| 273 | |||
| 274 | grad.addColorStop(0, color0); |
||
| 275 | grad.addColorStop(1, color1); |
||
| 276 | |||
| 277 | context.fillStyle = grad; |
||
| 278 | context.strokeStyle = color1; |
||
| 279 | context.beginPath(); |
||
| 280 | |||
| 281 | context.moveTo(anchorX, anchorY); |
||
| 282 | |||
| 283 | |||
| 284 | // arco superior |
||
| 285 | context.arc(anchorX, 2 + (0.50 * anchorY), radius, angulo, Math.PI - angulo, true); |
||
| 286 | |||
| 287 | //arco derecho |
||
| 288 | context.lineTo(anchorX, anchorY); |
||
| 289 | |||
| 290 | context.fill(); |
||
| 291 | context.stroke(); |
||
| 292 | |||
| 293 | |||
| 294 | // Círculo blanco |
||
| 295 | context.beginPath(); |
||
| 296 | context.arc(anchorX, 2 + (0.50 * anchorY), (radius - 3), 0, 2 * Math.PI, false); |
||
| 297 | context.fillStyle = 'white'; |
||
| 298 | context.fill(); |
||
| 299 | |||
| 300 | |||
| 301 | context.beginPath(); |
||
| 302 | // Render Label |
||
| 303 | //context.font = "11pt Arial"; |
||
| 304 | // |
||
| 305 | var font = "'" + options.font + "'" || 'fontello'; |
||
| 306 | |||
| 307 | context.font = fontsize + "pt " + font; |
||
| 308 | context.fillStyle = color1; |
||
| 309 | |||
| 310 | context.textBaseline = "top"; |
||
| 311 | |||
| 312 | var textWidth = context.measureText(options.label); |
||
| 313 | |||
| 314 | |||
| 315 | // centre the text. |
||
| 316 | context.fillText(options.label, |
||
| 317 | 1 + Math.floor((canvas.width / 2) - (textWidth.width / 2)), |
||
| 318 | 49 - canvas.height |
||
| 319 | ); |
||
| 320 | |||
| 321 | return canvas; |
||
| 322 | |||
| 323 | }; |
||
| 324 | theoptions.scale = theoptions.scale || 1; |
||
| 325 | var markerCanvas = generateFatCanvas(theoptions); |
||
| 326 | |||
| 327 | var iconObj = { |
||
| 328 | url: markerCanvas.toDataURL() |
||
| 329 | }; |
||
| 330 | if (window.google && window.google.maps) { |
||
| 331 | Object.assign(iconObj, { |
||
| 332 | size: new google.maps.Size(42, 36), |
||
| 333 | origin: new google.maps.Point(0, 0), |
||
| 334 | anchor: new google.maps.Point(21, 36), |
||
| 335 | scaledSize: new google.maps.Size(42, 36) |
||
| 336 | }); |
||
| 337 | } |
||
| 338 | return iconObj; |
||
| 339 | }; |
||
| 340 | |||
| 341 | |||
| 342 | var createTextMarker = function (theoptions) { |
||
| 343 | |||
| 344 | var generateCanvas = function (options) { |
||
| 345 | var canvas = document.createElement("canvas"); |
||
| 346 | var ancho = 30, |
||
| 347 | alto = 40; |
||
| 348 | canvas.width = ancho + 18; |
||
| 349 | canvas.height = alto; |
||
| 350 | var x = canvas.width / 2, |
||
| 351 | y = canvas.height - 2, |
||
| 352 | radius = ancho / 2, |
||
| 353 | angulo = 0.6; |
||
| 354 | |||
| 355 | var font = "'" + options.font + "'" || 'Arial'; |
||
| 356 | var fontsize = options.fontsize || 11; |
||
| 357 | |||
| 358 | var context = canvas.getContext("2d"); |
||
| 359 | |||
| 360 | context.clearRect(0, 0, canvas.width, canvas.height); |
||
| 361 | |||
| 362 | var radius0 = 2 * radius, |
||
| 363 | cx = x + 0.95 * radius0, |
||
| 364 | cy = y + 0.45 * radius0; |
||
| 365 | |||
| 366 | var grad = context.createLinearGradient(0, 0, 0, canvas.height), |
||
| 367 | color0, color1; |
||
| 368 | if (options.index !== undefined && options.count > 0) { |
||
| 369 | color0 = getColor(options.index, options.count); |
||
| 370 | color1 = getColor1(); |
||
| 371 | } else { |
||
| 372 | var deccolor = toDecColor(options.color); |
||
| 373 | color0 = deccolor.fillColor; |
||
| 374 | color1 = darken(deccolor).fillColor; |
||
| 375 | } |
||
| 376 | |||
| 377 | |||
| 378 | grad.addColorStop(0, color0); |
||
| 379 | grad.addColorStop(1, color1); |
||
| 380 | |||
| 381 | context.fillStyle = grad; |
||
| 382 | context.strokeStyle = 'rgba(200,200,200,0.7)'; |
||
| 383 | |||
| 384 | context.beginPath(); |
||
| 385 | |||
| 386 | //arco izquierdo |
||
| 387 | context.arc(cx - 1, cy, radius0, 9 * Math.PI / 8, -6 * Math.PI / 8, false); |
||
| 388 | |||
| 389 | // arco superior |
||
| 390 | context.arc(x, (y - 7) / 2, radius, angulo, Math.PI - angulo, true); |
||
| 391 | |||
| 392 | //arco derecho |
||
| 393 | context.arc(2 * x - cx + 1, cy, radius0, -0.95 * Math.PI / 3, -Math.PI / 8, false); |
||
| 394 | context.fill(); |
||
| 395 | context.stroke(); |
||
| 396 | |||
| 397 | |||
| 398 | context.beginPath(); |
||
| 399 | context.arc(x, 0.40 * y, 2 * radius / 3, 0, 2 * Math.PI, false); |
||
| 400 | context.fillStyle = 'white'; |
||
| 401 | context.fill(); |
||
| 402 | |||
| 403 | context.beginPath(); |
||
| 404 | |||
| 405 | // Render Label |
||
| 406 | //context.font = "11pt Arial"; |
||
| 407 | context.font = fontsize + "pt " + font; |
||
| 408 | context.textBaseline = "top"; |
||
| 409 | |||
| 410 | var textWidth = context.measureText(options.label); |
||
| 411 | |||
| 412 | if (textWidth.width > ancho || String(options.label).length > 3) { |
||
| 413 | context.rect(x - 2 - textWidth.width / 2, y - 30, x - 2 + textWidth.width / 2, y - 23); |
||
| 414 | context.fillStyle = '#F7F0F0'; |
||
| 415 | context.fill(); |
||
| 416 | context.stroke(); |
||
| 417 | } |
||
| 418 | |||
| 419 | |||
| 420 | context.fillStyle = "black"; |
||
| 421 | context.strokeStyle = "black"; |
||
| 422 | // centre the text. |
||
| 423 | context.fillText(options.label, 1 + Math.floor((canvas.width / 2) - (textWidth.width / 2)), 8); |
||
| 424 | |||
| 425 | return canvas; |
||
| 426 | |||
| 427 | }; |
||
| 428 | theoptions.scale = theoptions.scale || 0.75; |
||
| 429 | var markerCanvas = generateCanvas(theoptions); |
||
| 430 | |||
| 431 | var iconObj = { |
||
| 432 | url: markerCanvas.toDataURL() |
||
| 433 | }; |
||
| 434 | if (window.google && window.google.maps) { |
||
| 435 | Object.assign(iconObj, { |
||
| 436 | size: new google.maps.Size(48, 40), |
||
| 437 | origin: new google.maps.Point(0, 0), |
||
| 438 | anchor: new google.maps.Point(24 * theoptions.scale, 40 * theoptions.scale), |
||
| 439 | scaledSize: new google.maps.Size(48 * theoptions.scale, 40 * theoptions.scale) |
||
| 440 | }); |
||
| 441 | } |
||
| 442 | |||
| 443 | return iconObj; |
||
| 444 | }; |
||
| 445 | |||
| 446 | |||
| 447 | var createTransparentMarkerIcon = function (theoptions) { |
||
| 448 | |||
| 449 | var generateTransparentCanvas = function (options) { |
||
| 450 | var canvas = document.createElement("canvas"); |
||
| 451 | |||
| 452 | canvas.width = 54; |
||
| 453 | canvas.height = 48; |
||
| 454 | var context = canvas.getContext("2d"); |
||
| 455 | |||
| 456 | context.clearRect(0, 0, canvas.width, canvas.height); |
||
| 457 | |||
| 458 | |||
| 459 | var color0; |
||
| 460 | |||
| 461 | if (options.index !== undefined && options.count > 0) { |
||
| 462 | color0 = getColor(options.index, options.count); |
||
| 463 | } else { |
||
| 464 | var deccolor = toDecColor(options.color); |
||
| 465 | color0 = deccolor.fillColor; |
||
| 466 | } |
||
| 467 | |||
| 468 | |||
| 469 | context.beginPath(); |
||
| 470 | // Render Label |
||
| 471 | //context.font = "11pt Arial"; |
||
| 472 | |||
| 473 | context.font = "40px '" + options.font + "'"; |
||
| 474 | context.fillStyle = color0; |
||
| 475 | |||
| 476 | context.textBaseline = "top"; |
||
| 477 | |||
| 478 | var textWidth = context.measureText(options.label); |
||
| 479 | |||
| 480 | |||
| 481 | // centre the text. |
||
| 482 | context.fillText(options.label, |
||
| 483 | 1 + Math.floor((canvas.width / 2) - (textWidth.width / 2)), |
||
| 484 | 49 - canvas.height |
||
| 485 | ); |
||
| 486 | |||
| 487 | canvas.fillColor = color0; |
||
| 488 | |||
| 489 | return canvas; |
||
| 490 | |||
| 491 | }; |
||
| 492 | var markerCanvas = generateTransparentCanvas(theoptions); |
||
| 493 | theoptions.scale = theoptions.scale || 1; |
||
| 494 | |||
| 495 | |||
| 496 | var iconObj = { |
||
| 497 | url: markerCanvas.toDataURL(), |
||
| 498 | fillColor: markerCanvas.fillColor |
||
| 499 | }; |
||
| 500 | if (window.google && window.google.maps) { |
||
| 501 | Object.assign(iconObj, { |
||
| 502 | size: new google.maps.Size(54 * theoptions.scale, 48 * theoptions.scale), |
||
| 503 | origin: new google.maps.Point(0, 0), |
||
| 504 | anchor: new google.maps.Point(27 * theoptions.scale, 48 * theoptions.scale), |
||
| 505 | scaledSize: new google.maps.Size(54 * theoptions.scale, 48 * theoptions.scale) |
||
| 506 | }); |
||
| 507 | } |
||
| 508 | |||
| 509 | return iconObj; |
||
| 510 | }; |
||
| 511 | MarkerFactory.toDecColor = toDecColor; |
||
| 512 | |||
| 513 | MarkerFactory.parseColorString = function (somecolor, opacity) { |
||
| 514 | var parsedcolor = { |
||
| 515 | original: somecolor |
||
| 516 | }, |
||
| 517 | hsl, rgb; |
||
| 518 | |||
| 519 | opacity = opacity || 1; |
||
| 520 | |||
| 521 | if (somecolor.indexOf('hsl') !== -1) { |
||
| 522 | hsl = parseHSL(somecolor, opacity); |
||
| 523 | rgb = hslToRGB(hsl.h, hsl.s, hsl.l, hsl.a); |
||
| 524 | |||
| 525 | } else { |
||
| 526 | if (somecolor.indexOf('rgb') !== -1) { |
||
| 527 | rgb = parseRGB(somecolor, opacity); |
||
| 528 | } else { |
||
| 529 | rgb = parseHex(somecolor, opacity); |
||
| 530 | } |
||
| 531 | hsl = rgbToHSL(rgb.r, rgb.g, rgb.b, rgb.a); |
||
| 532 | |||
| 533 | } |
||
| 534 | |||
| 535 | parsedcolor.hsl = { |
||
| 536 | h: hsl.h, |
||
| 537 | s: hsl.s, |
||
| 538 | l: hsl.l, |
||
| 539 | a: hsl.a |
||
| 540 | }; |
||
| 541 | parsedcolor.rgb = { |
||
| 542 | r: rgb.r, |
||
| 543 | g: rgb.g, |
||
| 544 | b: rgb.b, |
||
| 545 | a: rgb.a |
||
| 546 | }; |
||
| 547 | |||
| 548 | parsedcolor.fillColor = rgb.fillColor; |
||
| 549 | parsedcolor.strokeColor = rgb.strokeColor; |
||
| 550 | parsedcolor.hex = ['#', rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)].join(''); |
||
| 551 | return parsedcolor; |
||
| 552 | }; |
||
| 553 | |||
| 554 | var getHexColor = function (color) { |
||
| 555 | var hexcolor = color; |
||
| 556 | if (color.indexOf('rgb') !== -1) { |
||
| 557 | var rgbArr = color.split(/[\(,\)]/ig); |
||
| 558 | hexcolor = [ |
||
| 559 | (1 * rgbArr[1]).toString(16), (1 * rgbArr[2]).toString(16), (1 * rgbArr[3]).toString(16) |
||
| 560 | ].join(''); |
||
| 561 | } else if (color.indexOf('#') !== -1) { |
||
| 562 | hexcolor = color.replace(/#/g, ''); |
||
| 563 | } |
||
| 564 | return hexcolor; |
||
| 565 | }; |
||
| 566 | |||
| 567 | MarkerFactory.autoIcon = function (options) { |
||
| 568 | |||
| 569 | |||
| 570 | if (typeof (options) !== 'object') { |
||
| 571 | console.warn('autoIcon expects an object as its only parameter'); |
||
| 572 | return null; |
||
| 573 | } |
||
| 574 | |||
| 575 | |||
| 576 | |||
| 577 | options.label = options.label || 'A'; |
||
| 578 | options.color = options.color || '#FF0000'; |
||
| 579 | options.fontsize = options.fontsize || 11; |
||
| 580 | options.font = options.font || 'Arial'; |
||
| 581 | |||
| 582 | |||
| 583 | options.hexcolor = getHexColor(options.color); |
||
| 584 | |||
| 585 | if (String(options.label).substring(0, 2) === '0x') { |
||
| 586 | // This is a charcode specified as an octal number, so I'll decode it |
||
| 587 | options.label = String.fromCharCode(String(options.label)); |
||
| 588 | |||
| 589 | if (options.transparent_background === true) { |
||
| 590 | // Estilo frontdev |
||
| 591 | return createTransparentMarkerIcon(options); |
||
| 592 | } else { |
||
| 593 | return createFatMarkerIcon(options); |
||
| 594 | } |
||
| 595 | |||
| 596 | |||
| 597 | } else { |
||
| 598 | // This is text I should print literally |
||
| 599 | return createTextMarker(options); |
||
| 600 | } |
||
| 601 | |||
| 602 | |||
| 603 | }; |
||
| 604 | |||
| 605 | export default MarkerFactory; |
Since ECMAScript 6, you can create block-scoped vars or constants with the keywords
letorconst. These variables/constants are only valid in the code block where they have been declared.Consider the following two pieces of code:
and
The variable is not defined otuside of its block. This limits bleeding of variables into other contexts.
To know more about this ECMA6 feature, look at the MDN pages on let and const.