ig_markerfactory - npm Package Compare versions

Comparing version 2.11.1 to 2.12.0

dist/markerfactory.es6.js

@@ -1,86 +0,189 @@
-function compact(array) {
-    var index = -1,
-        length = array ? array.length : 0,
-        resIndex = 0,
-        result = [];
+function IconObject(canvas, markerOpts) {
+	this.url = canvas.toDataURL();
+	this.fillColor = canvas.fillColor;
+	this.markerOpts = markerOpts;
+	Object.assign(this, markerOpts);
+	return this;
+}
 
-    while (++index < length) {
-        var value = array[index];
-        if (value) {
-            result[resIndex++] = value;
+IconObject.prototype.toJSON = function() {
+	return {
+		url: null,
+		markerOpts: this.markerOpts
+	};
+};
+
+/** global: google */
+
+function createClusterIcon(theoptions) {
+    var generateClusterCanvas = function(options) {
+        var canvas = options.canvas || document.createElement("canvas"),
+            anchorX = 27,
+            anchorY = 53,
+            radius = anchorX - 9,
+            color1,
+            font = options.font || "fontello",
+            fontsize = options.fontsize || 14,
+            context = canvas.getContext("2d");
+
+        canvas.width = anchorX * 2;
+        canvas.height = anchorY + 1;
+
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        context.moveTo(anchorX, anchorY);
+
+        var labelvalue = parseInt(options.label, 10);
+        if (labelvalue < 10) {
+            color1 = "orange";
+            fontsize = 14;
+        } else if (labelvalue < 30) {
+            color1 = "red";
+            fontsize = 15;
+        } else {
+            color1 = "purple";
+            fontsize = 16;
         }
-    }
-    return result;
-}
+        if (labelvalue > 99) {
+            radius = radius + 3;
+            context.setLineDash([5, 5]);
+            context.beginPath();
+            context.arc(
+                anchorX,
+                2 + 0.5 * anchorY,
+                radius + 7,
+                0,
+                2 * Math.PI,
+                false
+            );
+            context.fillStyle = "transparent";
+            context.strokeStyle = color1;
+            context.lineWidth = 2;
+            context.fill();
+            context.stroke();
+        }
 
-function padHex(str_in) {
-    if (('' + str_in).length === 1) {
-        return '0' + String(str_in);
-    } else {
-        return String(str_in);
-    }
-}
+        context.setLineDash([5, 5]);
+        context.beginPath();
+        context.arc(
+            anchorX,
+            2 + 0.5 * anchorY,
+            radius + 2,
+            0,
+            2 * Math.PI,
+            false
+        );
+        context.fillStyle = "transparent";
+        context.strokeStyle = color1;
+        context.lineWidth = 2;
+        context.fill();
+        context.stroke();
 
-var defaults = {
-    h: 1,
-    s: 78, // constant saturation
-    l: 63, // constant luminance
-    a: 1
-};
+        // Círculo blanco
+        context.setLineDash([5, 0]);
+        context.beginPath();
+        context.arc(
+            anchorX,
+            2 + 0.5 * anchorY,
+            radius - 3,
+            0,
+            2 * Math.PI,
+            false
+        );
+        context.fillStyle = "white";
+        context.strokeStyle = color1;
+        context.lineWidth = 4;
+        context.fill();
+        context.stroke();
 
-function hslaString(hslcolor) {
-    if (hslcolor.a) {
-        return 'hsla(' + hslcolor.h + ',' + hslcolor.s + '%,' + hslcolor.l + '%,' + hslcolor.a + ')';
+        context.beginPath();
+
+        context.font = "normal normal normal " + fontsize + "px " + font;
+        context.fillStyle = "#333";
+        context.textBaseline = "top";
+
+        var textWidth = context.measureText(options.label),
+            text_x = options.label,
+            label_x = Math.floor(canvas.width / 2 - textWidth.width / 2),
+            label_y = 1 + Math.floor(canvas.height / 2 - fontsize / 2);
+
+        // centre the text.
+        context.fillText(text_x, label_x, label_y);
+
+        return canvas;
+    };
+    theoptions.scale = theoptions.scale || 1;
+    var markerCanvas = generateClusterCanvas(theoptions),
+        markerOpts = {},
+        scale = theoptions.scale;
+
+    Object.assign(markerOpts, theoptions);
+
+    if (window && window.google && window.google.maps) {
+        Object.assign(markerOpts, {
+            size: new google.maps.Size(54, 48),
+            origin: new google.maps.Point(0, 0),
+            anchor: new google.maps.Point(27 * scale, 24 * scale),
+            scaledSize: new google.maps.Size(54 * scale, 48 * scale)
+        });
     }
-    return 'hsl(' + hslcolor.h + ',' + hslcolor.s + '%,' + hslcolor.l + '%)';
-}
 
-function rgbaString(hexcolor) {
-    if (hexcolor.a) {
-        return 'rgba(' + hexcolor.r + ',' + hexcolor.g + ',' + hexcolor.b + ',' + hexcolor.a + ')';
-    }
-    return 'rgb(' + hexcolor.r + ',' + hexcolor.g + ',' + hexcolor.b + ')';
+    var iconObj = new IconObject(markerCanvas, markerOpts);
+
+    return iconObj;
 }
 
-function getColor(val, range) {
-    defaults.h = Math.floor((360 / range) * val);
-    return hslaString(defaults);
+function hslaString(hslcolor) {
+	if (hslcolor.a) {
+		return (
+			"hsla(" +
+			hslcolor.h +
+			"," +
+			hslcolor.s +
+			"%," +
+			hslcolor.l +
+			"%," +
+			hslcolor.a +
+			")"
+		);
+	}
+	return "hsl(" + hslcolor.h + "," + hslcolor.s + "%," + hslcolor.l + "%)";
 }
 
-function getColor1() {
-    var defaults1 = {
-        h: 1,
-        s: 78, // constant saturation
-        l: 33, // constant luminance
-        a: 1
-    };
-    return hslaString(defaults1);
+function rgbaString(hexcolor) {
+	if (hexcolor.a) {
+		return (
+			"rgba(" +
+			hexcolor.r +
+			"," +
+			hexcolor.g +
+			"," +
+			hexcolor.b +
+			"," +
+			hexcolor.a +
+			")"
+		);
+	}
+	return "rgb(" + hexcolor.r + "," + hexcolor.g + "," + hexcolor.b + ")";
 }
 
 function parseHalf(foo) {
-    return parseInt(foo / 2, 10);
+	return parseInt(foo / 2, 10);
 }
 
+function compact(array) {
+	var index = -1,
+		length = array ? array.length : 0,
+		resIndex = 0,
+		result = [];
 
-function darken(stringcolor, factor) {
-    var darkercolor = {};
-    if (!factor) {
-        factor = 1;
-    }
-    if (stringcolor.fillColor.indexOf('rgb') !== -1) {
-        darkercolor.r = factor * parseHalf(stringcolor.r);
-        darkercolor.g = factor * parseHalf(stringcolor.g);
-        darkercolor.b = factor * parseHalf(stringcolor.b);
-        darkercolor.a = 0.99;
-        darkercolor.fillColor = rgbaString(darkercolor);
-    } else if (stringcolor.fillColor.indexOf('hsl') !== -1) {
-        darkercolor.h = stringcolor.h;
-        darkercolor.s = stringcolor.s;
-        darkercolor.l = factor * stringcolor.l - 30;
-        darkercolor.fillColor = hslaString(darkercolor);
-    }
-
-    return darkercolor;
+	while (++index < length) {
+		var value = array[index];
+		if (value) {
+			result[resIndex++] = value;
+		}
+	}
+	return result;
 }
 
+/** global: google, r, g, b */
 
@@ -93,5 +196,11 @@ function parseHex(hexstring, opacity, darkenfactor) {
 
-    hexstring = hexstring.replace('#', '');
+    hexstring = hexstring.replace("#", "");
     if (hexstring.length === 3) {
-        hexstring = hexstring[0] + hexstring[0] + hexstring[1] + hexstring[1] + hexstring[2] + hexstring[2];
+        hexstring =
+            hexstring[0] +
+            hexstring[0] +
+            hexstring[1] +
+            hexstring[1] +
+            hexstring[2] +
+            hexstring[2];
     }
@@ -102,12 +211,22 @@ if (isNaN(parseFloat(opacity, 10))) {
 
-    hexcolor.r = parseInt(darkenfactor * (parseInt(hexstring.substring(0, 2), 16)), 10);
-    hexcolor.g = parseInt(darkenfactor * (parseInt(hexstring.substring(2, 4), 16)), 10);
-    hexcolor.b = parseInt(darkenfactor * (parseInt(hexstring.substring(4, 6), 16)), 10);
+    hexcolor.r = parseInt(
+        darkenfactor * parseInt(hexstring.substring(0, 2), 16),
+        10
+    );
+    hexcolor.g = parseInt(
+        darkenfactor * parseInt(hexstring.substring(2, 4), 16),
+        10
+    );
+    hexcolor.b = parseInt(
+        darkenfactor * parseInt(hexstring.substring(4, 6), 16),
+        10
+    );
     hexcolor.a = opacity;
     hexcolor.fillColor = rgbaString(hexcolor);
     hexcolor.strokeColor = [
-        'rgba(' + parseHalf(hexcolor.r),
+        "rgba(" + parseHalf(hexcolor.r),
         parseHalf(hexcolor.g),
-        parseHalf(hexcolor.b), hexcolor.a + ')'
-    ].join(',');
+        parseHalf(hexcolor.b),
+        hexcolor.a + ")"
+    ].join(",");
     hexcolor.rgb = hexcolor.fillColor;
@@ -117,3 +236,2 @@ return hexcolor;
 
-
 function parseHSL(hslstring, opacity) {
@@ -137,3 +255,2 @@ var hslcolor = {},
 
-
     hslcolor.fillColor = hslaString(hslcolor);
@@ -164,3 +281,12 @@ hslcolor.strokeColor = hslaString(hslcolor_stroke);
     rgbcolor.fillColor = rgbaString(rgbcolor);
-    rgbcolor.strokeColor = 'rgba(' + rgbcolor.r / 2 + ',' + rgbcolor.g / 2 + ',' + rgbcolor.b / 2 + ',' + rgbcolor.a + ')';
+    rgbcolor.strokeColor =
+        "rgba(" +
+        rgbcolor.r / 2 +
+        "," +
+        rgbcolor.g / 2 +
+        "," +
+        rgbcolor.b / 2 +
+        "," +
+        rgbcolor.a +
+        ")";
     rgbcolor.rgb = rgbcolor.fillColor;
@@ -170,77 +296,2 @@ return rgbcolor;
 
-function toDecColor(stringcolor) {
-    var parsedcolor = {};
-    if (!stringcolor) {
-        parsedcolor.fillColor = 'rgba(100,250,50,0.99)';
-    } else if (stringcolor.indexOf('rgb') !== -1) {
-        parsedcolor = parseRGB(stringcolor);
-    } else if (stringcolor.indexOf('hsl') !== -1) {
-        parsedcolor = parseHSL(stringcolor);
-    } else {
-        parsedcolor = parseHex(stringcolor);
-    }
-
-    return parsedcolor;
-}
-
-
-function getColors(options) {
-    var color0, color1;
-    if (options.index !== undefined && options.count > 0) {
-        color0 = getColor(options.index, options.count);
-        color1 = getColor1();
-    } else {
-        var deccolor = toDecColor(options.color);
-        color0 = deccolor.fillColor;
-        color1 = darken(deccolor).fillColor;
-    }
-    return [color0, color1];
-}
-
-
-function rgbToHSL(r, g, b, a) {
-    r = (r % 256) / 255;
-    g = (g % 256) / 255;
-    b = (b % 256) / 255;
-    if (a === undefined) {
-        a = 1;
-    }
-    var max = Math.max(r, g, b),
-        min = Math.min(r, g, b);
-    var h, s, l = (max + min) / 2;
-
-    if (max === min) {
-        h = s = 0; // achromatic
-    } else {
-        var d = max - min;
-        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-        switch (max) {
-        case r:
-            h = (g - b) / d + (g < b ? 6 : 0);
-            break;
-        case g:
-            h = (b - r) / d + 2;
-            break;
-        case b:
-            h = (r - g) / d + 4;
-            break;
-        default:
-            h = 0;
-            break;
-        }
-
-        h /= 6;
-    }
-    var hsl = {
-        h: Math.round(360 * h),
-        s: Math.round(100 * s),
-        l: Math.round(100 * l),
-        a: Math.round(100 * a) / 100
-    };
-
-    hsl.fillColor = hslaString(hsl);
-
-    return hsl;
-}
-
 function hue2rgb(p, q, t) {
@@ -278,4 +329,2 @@ if (t < 0) {
     } else {
-
-
         var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
@@ -302,23 +351,123 @@ var p = 2 * l - q;
     return rgb;
+}
 
+function rgbToHSL(in_r, in_g, in_b, in_a) {
+    var h,
+        r = (in_r % 256) / 255,
+        g = (in_g % 256) / 255,
+        b = (in_b % 256) / 255,
+        a = in_a === undefined ? 1 : in_a,
+        max = Math.max(r, g, b),
+        min = Math.min(r, g, b),
+        sum = max + min,
+        diff = max - min,
+        s = sum > 1 ? diff / (2 - sum) : diff / sum;
+
+    switch (max) {
+        case r:
+            h = (g - b) / diff + (g < b ? 6 : 0);
+            break;
+        case g:
+            h = (b - r) / diff + 2;
+            break;
+        case b:
+            h = (r - g) / diff + 4;
+            break;
+        default:
+            h = 0;
+            break;
+    }
+
+    h /= 6;
+
+    if (diff === 0) {
+        h = s = 0; // achromatic
+    }
+
+    var hsl = {
+        h: Math.round(360 * h),
+        s: Math.round(100 * s),
+        l: Math.round(50 * sum),
+        a: Math.round(100 * a) / 100
+    };
+
+    hsl.fillColor = hslaString(hsl);
+
+    return hsl;
 }
 
+function toDecColor(stringcolor) {
+    var parsedcolor = {};
+    if (!stringcolor) {
+        parsedcolor.fillColor = "rgba(100,250,50,0.99)";
+    } else if (stringcolor.indexOf("rgb") !== -1) {
+        parsedcolor = parseRGB(stringcolor);
+    } else if (stringcolor.indexOf("hsl") !== -1) {
+        parsedcolor = parseHSL(stringcolor);
+    } else {
+        parsedcolor = parseHex(stringcolor);
+    }
 
-function IconObject(canvas, markerOpts) {
-    this.url = canvas.toDataURL();
-    this.fillColor = canvas.fillColor;
-    this.markerOpts = markerOpts;
-    Object.assign(this, markerOpts);
-    return this;
+    return parsedcolor;
 }
-IconObject.prototype.toJSON = function () {
-    return {
-        url: null,
-        markerOpts: this.markerOpts
+
+function getColor(val, range) {
+    var defaults = {
+        h: Math.floor((360 / range) * val),
+        s: 78, // constant saturation
+        l: 63, // constant luminance
+        a: 1
     };
-};
 
+    return hslaString(defaults);
+}
+
+function getColor1() {
+    var defaults1 = {
+        h: 1,
+        s: 78, // constant saturation
+        l: 33, // constant luminance
+        a: 1
+    };
+    return hslaString(defaults1);
+}
+
+function darken(stringcolor, factor) {
+    var darkercolor = {};
+    if (!factor) {
+        factor = 1;
+    }
+    if (stringcolor.fillColor.indexOf("rgb") !== -1) {
+        darkercolor.r = factor * parseHalf(stringcolor.r);
+        darkercolor.g = factor * parseHalf(stringcolor.g);
+        darkercolor.b = factor * parseHalf(stringcolor.b);
+        darkercolor.a = 0.99;
+        darkercolor.fillColor = rgbaString(darkercolor);
+    } else if (stringcolor.fillColor.indexOf("hsl") !== -1) {
+        darkercolor.h = stringcolor.h;
+        darkercolor.s = stringcolor.s;
+        darkercolor.l = factor * stringcolor.l - 30;
+        darkercolor.fillColor = hslaString(darkercolor);
+    }
+
+    return darkercolor;
+}
+
+function getColors(options) {
+    var color0, color1;
+    if (options.index !== undefined && options.count > 0) {
+        color0 = getColor(options.index, options.count);
+        color1 = getColor1();
+    } else {
+        var deccolor = toDecColor(options.color);
+        color0 = deccolor.fillColor;
+        color1 = darken(deccolor).fillColor;
+    }
+    return [color0, color1];
+}
+
+/** global: google */
+
 function createTextMarker(theoptions) {
-
-    var generateCanvas = function (options) {
+    var generateCanvas = function(options) {
         var canvas = document.createElement("canvas");
@@ -334,3 +483,3 @@ var ancho = 30,
 
-        var font = "'" + options.font + "'" || 'Arial';
+        var font = "'" + options.font + "'" || "Arial";
         var fontsize = options.fontsize || 11;
@@ -355,3 +504,3 @@
         context.fillStyle = grad;
-        context.strokeStyle = 'rgba(200,200,200,0.7)';
+        context.strokeStyle = "rgba(200,200,200,0.7)";
 
@@ -361,3 +510,10 @@ context.beginPath();
         //arco izquierdo
-        context.arc(cx - 1, cy, radius0, 9 * Math.PI / 8, -6 * Math.PI / 8, false);
+        context.arc(
+            cx - 1,
+            cy,
+            radius0,
+            (9 * Math.PI) / 8,
+            (-6 * Math.PI) / 8,
+            false
+        );
 
@@ -368,3 +524,10 @@ // arco superior
         //arco derecho
-        context.arc(2 * x - cx + 1, cy, radius0, -0.95 * Math.PI / 3, -Math.PI / 8, false);
+        context.arc(
+            2 * x - cx + 1,
+            cy,
+            radius0,
+            (-0.95 * Math.PI) / 3,
+            -Math.PI / 8,
+            false
+        );
         context.fill();
@@ -374,4 +537,4 @@ context.stroke();
         context.beginPath();
-        context.arc(x, 0.40 * y, 2 * radius / 3, 0, 2 * Math.PI, false);
-        context.fillStyle = 'white';
+        context.arc(x, 0.4 * y, (2 * radius) / 3, 0, 2 * Math.PI, false);
+        context.fillStyle = "white";
         context.fill();
@@ -389,4 +552,9 @@
         if (textWidth.width > ancho || String(options.label).length > 3) {
-            context.rect(x - 2 - textWidth.width / 2, y - 30, x - 2 + textWidth.width / 2, y - 23);
-            context.fillStyle = '#F7F0F0';
+            context.rect(
+                x - 2 - textWidth.width / 2,
+                y - 30,
+                x - 2 + textWidth.width / 2,
+                y - 23
+            );
+            context.fillStyle = "#F7F0F0";
             context.fill();
@@ -399,6 +567,9 @@ context.stroke();
         // centre the text.
-        context.fillText(options.label, 1 + Math.floor((canvas.width / 2) - (textWidth.width / 2)), 8);
+        context.fillText(
+            options.label,
+            1 + Math.floor(canvas.width / 2 - textWidth.width / 2),
+            8
+        );
 
         return canvas;
-
     };
@@ -409,3 +580,3 @@ theoptions.scale = theoptions.scale || 0.75;
 
-    theoptions.type = 'textmarker';
+    theoptions.type = "textmarker";
 
@@ -418,4 +589,10 @@ Object.assign(markerOpts, theoptions);
             origin: new google.maps.Point(0, 0),
-            anchor: new google.maps.Point(24 * theoptions.scale, 40 * theoptions.scale),
-            scaledSize: new google.maps.Size(48 * theoptions.scale, 40 * theoptions.scale)
+            anchor: new google.maps.Point(
+                24 * theoptions.scale,
+                40 * theoptions.scale
+            ),
+            scaledSize: new google.maps.Size(
+                48 * theoptions.scale,
+                40 * theoptions.scale
+            )
         });
@@ -428,200 +605,110 @@ }
 
+/** global: google */
 
-function createClusterIcon(theoptions) {
+function createFatMarkerIcon(theoptions) {
+	var generateFatCanvas = function(options) {
+		var canvas = options.canvas || document.createElement("canvas"),
+			anchorX = 27,
+			anchorY = 53,
+			radius = anchorX - 9,
+			angulo = 1.1,
+			font = options.font || "fontello",
+			fontsize = options.fontsize || 14,
+			context = canvas.getContext("2d"),
+			grad = context.createLinearGradient(0, 0, 0, anchorY);
 
-    var generateClusterCanvas = function (options) {
-        var canvas = options.canvas || document.createElement("canvas"),
-            anchorX = 27,
-            anchorY = 53,
-            radius = (anchorX - 9),
-            angulo = 1.1,
-            font = options.font || 'fontello',
-            fontsize = options.fontsize || 14,
-            context = canvas.getContext("2d"),
-            grad = context.createLinearGradient(0, 0, 0, anchorY);
+		canvas.width = anchorX * 2;
+		canvas.height = anchorY + 1;
 
-        canvas.width = anchorX * 2;
-        canvas.height = anchorY + 1;
+		var colors = getColors(options),
+			color0 = colors[0],
+			color1 = colors[1];
 
-        var colors = getColors(options),
-            color0 = colors[0],
-            color1 = colors[1];
+		context.clearRect(0, 0, canvas.width, canvas.height);
 
+		grad.addColorStop(0, color0);
+		grad.addColorStop(1, color1);
 
-        context.clearRect(0, 0, canvas.width, canvas.height);
-        context.moveTo(anchorX, anchorY);
+		context.fillStyle = grad;
+		context.strokeStyle = color1;
+		context.beginPath();
 
-        var labelvalue = parseInt(options.label, 10);
-        if (labelvalue < 10) {
-            color1 = 'orange';
-            fontsize = 14;
-        } else if (labelvalue < 30) {
-            color1 = 'red';
-            fontsize = 15;
-        } else {
-            color1 = 'purple';
-            fontsize = 16;
-        }
-        if (labelvalue > 99) {
-            radius = radius + 3;
-            context.setLineDash([5, 5]);
-            context.beginPath();
-            context.arc(anchorX, 2 + (0.50 * anchorY), (radius + 7), 0, 2 * Math.PI, false);
-            context.fillStyle = 'transparent';
-            context.strokeStyle = color1;
-            context.lineWidth = 2;
-            context.fill();
-            context.stroke();
-        }
+		context.moveTo(anchorX, anchorY);
 
-        context.setLineDash([5, 5]);
-        context.beginPath();
-        context.arc(anchorX, 2 + (0.50 * anchorY), (radius + 2), 0, 2 * Math.PI, false);
-        context.fillStyle = 'transparent';
-        context.strokeStyle = color1;
-        context.lineWidth = 2;
-        context.fill();
-        context.stroke();
+		// arco superior
+		context.arc(
+			anchorX,
+			2 + 0.5 * anchorY,
+			radius,
+			angulo,
+			Math.PI - angulo,
+			true
+		);
 
-        // Círculo blanco
-        context.setLineDash([5, 0]);
-        context.beginPath();
-        context.arc(anchorX, 2 + (0.50 * anchorY), (radius - 3), 0, 2 * Math.PI, false);
-        context.fillStyle = 'white';
-        context.strokeStyle = color1;
-        context.lineWidth = 4;
-        context.fill();
-        context.stroke();
+		//punta inferior
+		context.lineTo(anchorX, anchorY);
 
-        context.beginPath();
+		context.fill();
+		context.stroke();
 
-        context.font = 'normal normal normal ' + fontsize + 'px ' + font;
-        context.fillStyle = '#333';
-        context.textBaseline = "top";
+		// Círculo blanco
+		context.beginPath();
+		context.arc(
+			anchorX,
+			2 + 0.5 * anchorY,
+			radius - 3,
+			0,
+			2 * Math.PI,
+			false
+		);
+		context.fillStyle = "white";
+		context.fill();
 
+		context.beginPath();
 
-        var textWidth = context.measureText(options.label),
-            text_x = options.label,
-            label_x = Math.floor((canvas.width / 2) - (textWidth.width / 2)),
-            label_y = 1 + Math.floor(canvas.height / 2 - fontsize / 2);
+		context.font = "normal normal normal " + fontsize + "px " + font;
+		//console.log('context font', context.font);
+		context.fillStyle = color1;
+		context.textBaseline = "top";
 
-        // centre the text.
-        context.fillText(text_x, label_x, label_y);
+		var textWidth = context.measureText(options.unicodelabel),
+			text_x = options.unicodelabel,
+			label_x = Math.floor(canvas.width / 2 - textWidth.width / 2),
+			label_y = 1 + Math.floor(canvas.height / 2 - fontsize / 2);
 
-        return canvas;
+		// centre the text.
+		context.fillText(text_x, label_x, label_y);
+		canvas.fillColor = color0;
+		return canvas;
+	};
 
-    };
-    theoptions.scale = theoptions.scale || 1;
-    var markerCanvas = generateClusterCanvas(theoptions),
-        markerOpts = {},
-        scale = theoptions.scale;
+	var scale = theoptions.scale || 1,
+		markerCanvas = generateFatCanvas(theoptions),
+		markerOpts = {};
 
-    Object.assign(markerOpts, theoptions);
+	theoptions.type = "fatmarker";
 
-    if (window && window.google && window.google.maps) {
-        Object.assign(markerOpts, {
-            size: new google.maps.Size(54, 48),
-            origin: new google.maps.Point(0, 0),
-            anchor: new google.maps.Point(27 * scale, 24 * scale),
-            scaledSize: new google.maps.Size(54 * scale, 48 * scale)
-        });
-    }
+	Object.assign(markerOpts, theoptions);
 
-    var iconObj = new IconObject(markerCanvas, markerOpts);
-
-    return iconObj;
+	if (window && window.google && window.google.maps) {
+		Object.assign(markerOpts, {
+			size: new google.maps.Size(54, 48),
+			origin: new google.maps.Point(0, 0),
+			anchor: new google.maps.Point(21 * scale, 36 * scale),
+			scaledSize: new google.maps.Size(42 * scale, 36 * scale),
+			scale: scale
+		});
+	}
+	var iconObj = new IconObject(markerCanvas, markerOpts);
+	return iconObj;
 }
 
-function createFatMarkerIcon(theoptions) {
+/** global: google */
 
-    var generateFatCanvas = function (options) {
-        var canvas = options.canvas || document.createElement("canvas"),
-            anchorX = 27,
-            anchorY = 53,
-            radius = (anchorX - 9),
-            angulo = 1.1,
-            font = options.font || 'fontello',
-            fontsize = options.fontsize || 14,
-            context = canvas.getContext("2d"),
-            grad = context.createLinearGradient(0, 0, 0, anchorY);
-
-        canvas.width = anchorX * 2;
-        canvas.height = anchorY + 1;
-
-        var colors = getColors(options),
-            color0 = colors[0],
-            color1 = colors[1];
-
-        context.clearRect(0, 0, canvas.width, canvas.height);
-
-        grad.addColorStop(0, color0);
-        grad.addColorStop(1, color1);
-
-        context.fillStyle = grad;
-        context.strokeStyle = color1;
-        context.beginPath();
-
-        context.moveTo(anchorX, anchorY);
-
-        // arco superior
-        context.arc(anchorX, 2 + (0.50 * anchorY), radius, angulo, Math.PI - angulo, true);
-
-        //punta inferior
-        context.lineTo(anchorX, anchorY);
-
-        context.fill();
-        context.stroke();
-
-        // Círculo blanco
-        context.beginPath();
-        context.arc(anchorX, 2 + (0.50 * anchorY), (radius - 3), 0, 2 * Math.PI, false);
-        context.fillStyle = 'white';
-        context.fill();
-
-        context.beginPath();
-
-        context.font = 'normal normal normal ' + fontsize + 'px ' + font;
-        //console.log('context font', context.font);
-        context.fillStyle = color1;
-        context.textBaseline = "top";
-
-        var textWidth = context.measureText(options.unicodelabel),
-            text_x = options.unicodelabel,
-            label_x = Math.floor((canvas.width / 2) - (textWidth.width / 2)),
-            label_y = 1 + Math.floor(canvas.height / 2 - fontsize / 2);
-
-        // centre the text.
-        context.fillText(text_x, label_x, label_y);
-        canvas.fillColor = color0;
-        return canvas;
-    };
-
-    var scale = theoptions.scale || 1,
-        markerCanvas = generateFatCanvas(theoptions),
-        markerOpts = {};
-
-    theoptions.type = 'fatmarker';
-
-    Object.assign(markerOpts, theoptions);
-
-    if (window && window.google && window.google.maps) {
-        Object.assign(markerOpts, {
-            size: new google.maps.Size(54, 48),
-            origin: new google.maps.Point(0, 0),
-            anchor: new google.maps.Point(21 * scale, 36 * scale),
-            scaledSize: new google.maps.Size(42 * scale, 36 * scale),
-            scale: scale
-        });
-    }
-    var iconObj = new IconObject(markerCanvas, markerOpts);
-    return iconObj;
-}
-
 function createTransparentMarkerIcon(theoptions) {
-
-    var generateTransparentCanvas = function (options) {
+    var generateTransparentCanvas = function(options) {
         var text_x,
             canvas = options.canvas || document.createElement("canvas"),
             context = canvas.getContext("2d"),
-            font = options.font || 'fontello',
+            font = options.font || "fontello",
             fontsize = options.fontsize || 26;
@@ -639,8 +726,7 @@
         if (options.shadow) {
+            context.font = "normal normal normal " + fontsize + "px " + font;
 
-            context.font = 'normal normal normal ' + fontsize + 'px ' + font;
-
             context.textBaseline = "top";
             var textWidth = context.measureText(options.unicodelabel);
-            text_x = Math.floor((canvas.width / 2) - (textWidth.width / 2));
+            text_x = Math.floor(canvas.width / 2 - textWidth.width / 2);
 
@@ -651,4 +737,4 @@ context.shadowOffsetX = -2;
 
-            context.fillStyle = '#FFFFFF';
-            context.shadowColor = '#666666';
+            context.fillStyle = "#FFFFFF";
+            context.shadowColor = "#666666";
 
@@ -660,12 +746,11 @@ context.fillText(options.unicodelabel, text_x - 4, 2);
 
-            context.strokeStyle = '#FFFFFF';
+            context.strokeStyle = "#FFFFFF";
             context.strokeText(options.unicodelabel, text_x + 4, 8);
-
         } else {
+            context.font =
+                "normal normal normal " + (fontsize - 3) + "px " + font;
 
-            context.font = 'normal normal normal ' + (fontsize - 3) + 'px ' + font;
-
             context.textBaseline = "top";
             var textmetric = context.measureText(options.unicodelabel);
-            text_x = Math.floor((canvas.width / 2) - (textmetric.width / 2));
+            text_x = Math.floor(canvas.width / 2 - textmetric.width / 2);
 
@@ -677,3 +762,3 @@ //console.debug('textmetric', textmetric);
             context.shadowBlur = 0;
-            context.shadowColor = '#FFFFFF';
+            context.shadowColor = "#FFFFFF";
             context.fillStyle = color0;
@@ -685,6 +770,5 @@ context.fillText(options.unicodelabel, text_x + 1, 6);
             context.shadowBlur = 1;
-            context.shadowColor = '#FFFFFF';
+            context.shadowColor = "#FFFFFF";
             context.strokeStyle = color1;
             context.strokeText(options.unicodelabel, text_x + 1, 6);
-
         }
@@ -695,3 +779,2 @@
         return canvas;
-
     };
@@ -706,7 +789,5 @@
     var scale = theoptions.scale;
-    /*if (theoptions.shadow) {
-        scale = 0.9 * scale;
-    }*/
-    theoptions.type = 'transparent';
 
+    theoptions.type = "transparent";
+
     Object.assign(markerOpts, theoptions);
@@ -727,3 +808,34 @@
 
+/** global: google, r, g, b */
 
+function padHex(str_in) {
+    if (("" + str_in).length === 1) {
+        return "0" + String(str_in);
+    } else {
+        return String(str_in);
+    }
+}
+
+function generateAutoicon(options) {
+    var cacheKey = JSON.stringify(options);
+
+    var iconObj = window.sessionStorage.getItem(cacheKey);
+    if (iconObj !== null) {
+        return JSON.parse(iconObj);
+    }
+    if (!options.is_icon) {
+        iconObj = createTextMarker(options);
+    } else if (options.transparent_background) {
+        //console.log("createTransparentMarkerIcon", options.font);
+        iconObj = createTransparentMarkerIcon(options);
+    } else {
+        //console.log("createFatMarkerIcon", options.font);
+        iconObj = createFatMarkerIcon(options);
+    }
+    var cached = iconObj.toJSON();
+    cached.url = iconObj.url;
+    window.sessionStorage.setItem(cacheKey, JSON.stringify(cached));
+    return iconObj;
+}
+
 var MarkerFactory = {
@@ -738,13 +850,14 @@ createTransparentMarkerIcon: createTransparentMarkerIcon,
      *
-     * @param {string} somecolor          - A color string in  rgb(a), hsl(a) or hex format
-     * @param {Number} [opacity=1]        - Opacity to apply to the color
-     * @param {Number} [darkenfactor=1] - How much darker should the resulting color be
+     * @param {string} somecolor    - A color string in  rgb(a), hsl(a) or hex format
+     * @param {Number} opacity      - Opacity to apply to the color. Optional, default 1
+     * @param {Number} darkenfactor - How much darker should the resulting color be. Optional, default 1
      *
      * @return     {Object}  input color parsed and modified as requested
      */
-    parseColorString: function (somecolor, opacity, darkenfactor) {
+    parseColorString: function(somecolor, opacity, darkenfactor) {
         var parsedcolor = {
                 original: somecolor
             },
-            hsl, rgb;
+            hsl,
+            rgb;
 
@@ -754,7 +867,6 @@ darkenfactor = darkenfactor || 1;
 
-        if (somecolor.indexOf('hsl') !== -1) {
+        if (somecolor.indexOf("hsl") !== -1) {
             hsl = parseHSL(somecolor, opacity);
             rgb = hslToRGB(hsl.h, hsl.s, hsl.l, hsl.a, darkenfactor);
-
-        } else if (somecolor.indexOf('rgb') !== -1) {
+        } else if (somecolor.indexOf("rgb") !== -1) {
             rgb = parseRGB(somecolor, opacity, darkenfactor);
@@ -765,6 +877,4 @@ } else {
 
-
         hsl = rgbToHSL(rgb.r, rgb.g, rgb.b, rgb.a);
 
-
         parsedcolor.hsl = {
@@ -783,3 +893,2 @@ h: hsl.h,
 
-
         parsedcolor.fillColor = rgb.fillColor;
@@ -789,5 +898,11 @@ parsedcolor.rgba = rgb.fillColor;
         parsedcolor.strokeColor = rgb.strokeColor;
-        parsedcolor.hex = ['#', padHex(rgb.r.toString(16)), padHex(rgb.g.toString(16)), padHex(rgb.b.toString(16))].join('');
+        parsedcolor.hex = [
+            "#",
+            padHex(rgb.r.toString(16)),
+            padHex(rgb.g.toString(16)),
+            padHex(rgb.b.toString(16))
+        ].join("");
         return parsedcolor;
     },
+
     /**
@@ -799,41 +914,36 @@ * Generates an google maps marker (or an image as dataurl from the given options)
      */
-    autoIcon: function (options) {
-
-        if (typeof (options) !== 'object') {
-            console.warn('autoIcon expects an object as its only parameter');
+    autoIcon: function(options) {
+        if (typeof options !== "object") {
+            console.warn("autoIcon expects an object as its only parameter");
             return null;
         }
-
-        options.label = String(options.label || 'A');
-        options.color = options.color || '#FF0000';
-
         // unless explicitly set to false, the icon doesn't have a marker-like wrapper
-        if (options.transparent_background === undefined) {
-            options.transparent_background = true;
-        }
+        options.transparent_background =
+            options.transparent_background !== false;
+        options.label = String(options.label || "A");
+        options.color = options.color || "#FF0000";
 
-        if (options.label.length === 4 || options.label.substring(0, 2) === '0x') {
-
-
-            options.font = options.font || 'fontello';
-            options.label = (options.label || 'e836').slice(-4);
-            options.unicodelabel = String.fromCharCode('0x' + options.label);
+        if (
+            options.label.length === 4 ||
+            options.label.substring(0, 2) === "0x"
+        ) {
+            options.font = options.font || "fontello";
+            options.label = (options.label || "e836").slice(-4);
+            options.unicodelabel = String.fromCharCode("0x" + options.label);
             options.scale = options.scale || 1;
+            options.is_icon = true;
 
-            if (options.transparent_background) {
-                return MarkerFactory.createTransparentMarkerIcon(options);
-            } else {
-                return MarkerFactory.createFatMarkerIcon(options);
-            }
+            return generateAutoicon(options);
         } else if (options.shadow) {
+
             return createClusterIcon(options);
         } else {
             options.scale = options.scale || 0.75;
-            options.label = String(options.label || 'A');
+            options.label = String(options.label || "A");
             options.fontsize = options.fontsize || 11;
-            options.font = options.font || 'Arial';
+            options.font = options.font || "Arial";
             // This is text I should print literally
-            return MarkerFactory.createTextMarker(options);
+
+            return generateAutoicon(options);
         }
-
     }
@@ -843,2 +953,1 @@ };
 export { MarkerFactory };
-export default MarkerFactory;

dist/markerfactory.js

@@ -7,816 +7,925 @@ (function (global, factory) {
 
-function compact(array) {
-    var index = -1,
-        length = array ? array.length : 0,
-        resIndex = 0,
-        result = [];
+	function IconObject(canvas, markerOpts) {
+		this.url = canvas.toDataURL();
+		this.fillColor = canvas.fillColor;
+		this.markerOpts = markerOpts;
+		Object.assign(this, markerOpts);
+		return this;
+	}
 
-    while (++index < length) {
-        var value = array[index];
-        if (value) {
-            result[resIndex++] = value;
-        }
-    }
-    return result;
-}
+	IconObject.prototype.toJSON = function() {
+		return {
+			url: null,
+			markerOpts: this.markerOpts
+		};
+	};
 
-function padHex(str_in) {
-    if (('' + str_in).length === 1) {
-        return '0' + String(str_in);
-    } else {
-        return String(str_in);
-    }
-}
+	/** global: google */
 
-var defaults = {
-    h: 1,
-    s: 78, // constant saturation
-    l: 63, // constant luminance
-    a: 1
-};
+	function createClusterIcon(theoptions) {
+	    var generateClusterCanvas = function(options) {
+	        var canvas = options.canvas || document.createElement("canvas"),
+	            anchorX = 27,
+	            anchorY = 53,
+	            radius = anchorX - 9,
+	            color1,
+	            font = options.font || "fontello",
+	            fontsize = options.fontsize || 14,
+	            context = canvas.getContext("2d");
 
-function hslaString(hslcolor) {
-    if (hslcolor.a) {
-        return 'hsla(' + hslcolor.h + ',' + hslcolor.s + '%,' + hslcolor.l + '%,' + hslcolor.a + ')';
-    }
-    return 'hsl(' + hslcolor.h + ',' + hslcolor.s + '%,' + hslcolor.l + '%)';
-}
+	        canvas.width = anchorX * 2;
+	        canvas.height = anchorY + 1;
 
-function rgbaString(hexcolor) {
-    if (hexcolor.a) {
-        return 'rgba(' + hexcolor.r + ',' + hexcolor.g + ',' + hexcolor.b + ',' + hexcolor.a + ')';
-    }
-    return 'rgb(' + hexcolor.r + ',' + hexcolor.g + ',' + hexcolor.b + ')';
-}
+	        context.clearRect(0, 0, canvas.width, canvas.height);
+	        context.moveTo(anchorX, anchorY);
 
-function getColor(val, range) {
-    defaults.h = Math.floor((360 / range) * val);
-    return hslaString(defaults);
-}
+	        var labelvalue = parseInt(options.label, 10);
+	        if (labelvalue < 10) {
+	            color1 = "orange";
+	            fontsize = 14;
+	        } else if (labelvalue < 30) {
+	            color1 = "red";
+	            fontsize = 15;
+	        } else {
+	            color1 = "purple";
+	            fontsize = 16;
+	        }
+	        if (labelvalue > 99) {
+	            radius = radius + 3;
+	            context.setLineDash([5, 5]);
+	            context.beginPath();
+	            context.arc(
+	                anchorX,
+	                2 + 0.5 * anchorY,
+	                radius + 7,
+	                0,
+	                2 * Math.PI,
+	                false
+	            );
+	            context.fillStyle = "transparent";
+	            context.strokeStyle = color1;
+	            context.lineWidth = 2;
+	            context.fill();
+	            context.stroke();
+	        }
 
-function getColor1() {
-    var defaults1 = {
-        h: 1,
-        s: 78, // constant saturation
-        l: 33, // constant luminance
-        a: 1
-    };
-    return hslaString(defaults1);
-}
+	        context.setLineDash([5, 5]);
+	        context.beginPath();
+	        context.arc(
+	            anchorX,
+	            2 + 0.5 * anchorY,
+	            radius + 2,
+	            0,
+	            2 * Math.PI,
+	            false
+	        );
+	        context.fillStyle = "transparent";
+	        context.strokeStyle = color1;
+	        context.lineWidth = 2;
+	        context.fill();
+	        context.stroke();
 
-function parseHalf(foo) {
-    return parseInt(foo / 2, 10);
-}
+	        // Círculo blanco
+	        context.setLineDash([5, 0]);
+	        context.beginPath();
+	        context.arc(
+	            anchorX,
+	            2 + 0.5 * anchorY,
+	            radius - 3,
+	            0,
+	            2 * Math.PI,
+	            false
+	        );
+	        context.fillStyle = "white";
+	        context.strokeStyle = color1;
+	        context.lineWidth = 4;
+	        context.fill();
+	        context.stroke();
 
+	        context.beginPath();
 
-function darken(stringcolor, factor) {
-    var darkercolor = {};
-    if (!factor) {
-        factor = 1;
-    }
-    if (stringcolor.fillColor.indexOf('rgb') !== -1) {
-        darkercolor.r = factor * parseHalf(stringcolor.r);
-        darkercolor.g = factor * parseHalf(stringcolor.g);
-        darkercolor.b = factor * parseHalf(stringcolor.b);
-        darkercolor.a = 0.99;
-        darkercolor.fillColor = rgbaString(darkercolor);
-    } else if (stringcolor.fillColor.indexOf('hsl') !== -1) {
-        darkercolor.h = stringcolor.h;
-        darkercolor.s = stringcolor.s;
-        darkercolor.l = factor * stringcolor.l - 30;
-        darkercolor.fillColor = hslaString(darkercolor);
-    }
+	        context.font = "normal normal normal " + fontsize + "px " + font;
+	        context.fillStyle = "#333";
+	        context.textBaseline = "top";
 
-    return darkercolor;
-}
+	        var textWidth = context.measureText(options.label),
+	            text_x = options.label,
+	            label_x = Math.floor(canvas.width / 2 - textWidth.width / 2),
+	            label_y = 1 + Math.floor(canvas.height / 2 - fontsize / 2);
 
+	        // centre the text.
+	        context.fillText(text_x, label_x, label_y);
 
-function parseHex(hexstring, opacity, darkenfactor) {
-    var hexcolor = {
-        hex: hexstring
-    };
-    darkenfactor = darkenfactor || 1;
+	        return canvas;
+	    };
+	    theoptions.scale = theoptions.scale || 1;
+	    var markerCanvas = generateClusterCanvas(theoptions),
+	        markerOpts = {},
+	        scale = theoptions.scale;
 
-    hexstring = hexstring.replace('#', '');
-    if (hexstring.length === 3) {
-        hexstring = hexstring[0] + hexstring[0] + hexstring[1] + hexstring[1] + hexstring[2] + hexstring[2];
-    }
-    if (isNaN(parseFloat(opacity, 10))) {
-        opacity = 1;
-    }
+	    Object.assign(markerOpts, theoptions);
 
-    hexcolor.r = parseInt(darkenfactor * (parseInt(hexstring.substring(0, 2), 16)), 10);
-    hexcolor.g = parseInt(darkenfactor * (parseInt(hexstring.substring(2, 4), 16)), 10);
-    hexcolor.b = parseInt(darkenfactor * (parseInt(hexstring.substring(4, 6), 16)), 10);
-    hexcolor.a = opacity;
-    hexcolor.fillColor = rgbaString(hexcolor);
-    hexcolor.strokeColor = [
-        'rgba(' + parseHalf(hexcolor.r),
-        parseHalf(hexcolor.g),
-        parseHalf(hexcolor.b), hexcolor.a + ')'
-    ].join(',');
-    hexcolor.rgb = hexcolor.fillColor;
-    return hexcolor;
-}
+	    if (window && window.google && window.google.maps) {
+	        Object.assign(markerOpts, {
+	            size: new google.maps.Size(54, 48),
+	            origin: new google.maps.Point(0, 0),
+	            anchor: new google.maps.Point(27 * scale, 24 * scale),
+	            scaledSize: new google.maps.Size(54 * scale, 48 * scale)
+	        });
+	    }
 
+	    var iconObj = new IconObject(markerCanvas, markerOpts);
 
-function parseHSL(hslstring, opacity) {
-    var hslcolor = {},
-        hslcolor_stroke = {},
-        hslparts = compact(hslstring.split(/hsla?\(|,|\)|%/));
+	    return iconObj;
+	}
 
-    if (hslparts[3] === undefined) {
-        hslparts[3] = 1;
-    }
-    if (isNaN(parseFloat(opacity, 10))) {
-        opacity = 1;
-    }
+	function hslaString(hslcolor) {
+		if (hslcolor.a) {
+			return (
+				"hsla(" +
+				hslcolor.h +
+				"," +
+				hslcolor.s +
+				"%," +
+				hslcolor.l +
+				"%," +
+				hslcolor.a +
+				")"
+			);
+		}
+		return "hsl(" + hslcolor.h + "," + hslcolor.s + "%," + hslcolor.l + "%)";
+	}
 
-    hslcolor.h = hslcolor_stroke.h = parseFloat(hslparts[0], 10);
-    hslcolor.s = hslcolor_stroke.s = parseFloat(hslparts[1], 10);
-    hslcolor.l = parseFloat(hslparts[2], 10);
-    hslcolor.a = hslcolor_stroke.a = parseFloat(opacity * hslparts[3], 10);
-    hslcolor_stroke.l = parseInt(hslcolor.l / 2, 10);
+	function rgbaString(hexcolor) {
+		if (hexcolor.a) {
+			return (
+				"rgba(" +
+				hexcolor.r +
+				"," +
+				hexcolor.g +
+				"," +
+				hexcolor.b +
+				"," +
+				hexcolor.a +
+				")"
+			);
+		}
+		return "rgb(" + hexcolor.r + "," + hexcolor.g + "," + hexcolor.b + ")";
+	}
 
+	function parseHalf(foo) {
+		return parseInt(foo / 2, 10);
+	}
 
-    hslcolor.fillColor = hslaString(hslcolor);
-    hslcolor.strokeColor = hslaString(hslcolor_stroke);
-    hslcolor.hsl = hslcolor.fillColor;
-    return hslcolor;
-}
+	function compact(array) {
+		var index = -1,
+			length = array ? array.length : 0,
+			resIndex = 0,
+			result = [];
 
-function parseRGB(rgbstring, opacity, darkenfactor) {
-    var rgbcolor = {},
-        rgbparts = compact(rgbstring.split(/rgba?\(|,|\)/));
+		while (++index < length) {
+			var value = array[index];
+			if (value) {
+				result[resIndex++] = value;
+			}
+		}
+		return result;
+	}
 
-    darkenfactor = darkenfactor || 1;
+	/** global: google, r, g, b */
 
-    if (rgbparts[3] === undefined) {
-        rgbparts[3] = 1;
-    }
+	function parseHex(hexstring, opacity, darkenfactor) {
+	    var hexcolor = {
+	        hex: hexstring
+	    };
+	    darkenfactor = darkenfactor || 1;
 
-    if (isNaN(parseFloat(opacity, 10))) {
-        opacity = 1;
-    }
+	    hexstring = hexstring.replace("#", "");
+	    if (hexstring.length === 3) {
+	        hexstring =
+	            hexstring[0] +
+	            hexstring[0] +
+	            hexstring[1] +
+	            hexstring[1] +
+	            hexstring[2] +
+	            hexstring[2];
+	    }
+	    if (isNaN(parseFloat(opacity, 10))) {
+	        opacity = 1;
+	    }
 
-    rgbcolor.r = parseInt(darkenfactor * (parseInt(rgbparts[0], 10) % 256), 10);
-    rgbcolor.g = parseInt(darkenfactor * (parseInt(rgbparts[1], 10) % 256), 10);
-    rgbcolor.b = parseInt(darkenfactor * (parseInt(rgbparts[2], 10) % 256), 10);
-    rgbcolor.a = parseFloat(opacity * rgbparts[3], 10);
-    rgbcolor.fillColor = rgbaString(rgbcolor);
-    rgbcolor.strokeColor = 'rgba(' + rgbcolor.r / 2 + ',' + rgbcolor.g / 2 + ',' + rgbcolor.b / 2 + ',' + rgbcolor.a + ')';
-    rgbcolor.rgb = rgbcolor.fillColor;
-    return rgbcolor;
-}
+	    hexcolor.r = parseInt(
+	        darkenfactor * parseInt(hexstring.substring(0, 2), 16),
+	        10
+	    );
+	    hexcolor.g = parseInt(
+	        darkenfactor * parseInt(hexstring.substring(2, 4), 16),
+	        10
+	    );
+	    hexcolor.b = parseInt(
+	        darkenfactor * parseInt(hexstring.substring(4, 6), 16),
+	        10
+	    );
+	    hexcolor.a = opacity;
+	    hexcolor.fillColor = rgbaString(hexcolor);
+	    hexcolor.strokeColor = [
+	        "rgba(" + parseHalf(hexcolor.r),
+	        parseHalf(hexcolor.g),
+	        parseHalf(hexcolor.b),
+	        hexcolor.a + ")"
+	    ].join(",");
+	    hexcolor.rgb = hexcolor.fillColor;
+	    return hexcolor;
+	}
 
-function toDecColor(stringcolor) {
-    var parsedcolor = {};
-    if (!stringcolor) {
-        parsedcolor.fillColor = 'rgba(100,250,50,0.99)';
-    } else if (stringcolor.indexOf('rgb') !== -1) {
-        parsedcolor = parseRGB(stringcolor);
-    } else if (stringcolor.indexOf('hsl') !== -1) {
-        parsedcolor = parseHSL(stringcolor);
-    } else {
-        parsedcolor = parseHex(stringcolor);
-    }
+	function parseHSL(hslstring, opacity) {
+	    var hslcolor = {},
+	        hslcolor_stroke = {},
+	        hslparts = compact(hslstring.split(/hsla?\(|,|\)|%/));
 
-    return parsedcolor;
-}
+	    if (hslparts[3] === undefined) {
+	        hslparts[3] = 1;
+	    }
+	    if (isNaN(parseFloat(opacity, 10))) {
+	        opacity = 1;
+	    }
 
+	    hslcolor.h = hslcolor_stroke.h = parseFloat(hslparts[0], 10);
+	    hslcolor.s = hslcolor_stroke.s = parseFloat(hslparts[1], 10);
+	    hslcolor.l = parseFloat(hslparts[2], 10);
+	    hslcolor.a = hslcolor_stroke.a = parseFloat(opacity * hslparts[3], 10);
+	    hslcolor_stroke.l = parseInt(hslcolor.l / 2, 10);
 
-function getColors(options) {
-    var color0, color1;
-    if (options.index !== undefined && options.count > 0) {
-        color0 = getColor(options.index, options.count);
-        color1 = getColor1();
-    } else {
-        var deccolor = toDecColor(options.color);
-        color0 = deccolor.fillColor;
-        color1 = darken(deccolor).fillColor;
-    }
-    return [color0, color1];
-}
+	    hslcolor.fillColor = hslaString(hslcolor);
+	    hslcolor.strokeColor = hslaString(hslcolor_stroke);
+	    hslcolor.hsl = hslcolor.fillColor;
+	    return hslcolor;
+	}
 
+	function parseRGB(rgbstring, opacity, darkenfactor) {
+	    var rgbcolor = {},
+	        rgbparts = compact(rgbstring.split(/rgba?\(|,|\)/));
 
-function rgbToHSL(r, g, b, a) {
-    r = (r % 256) / 255;
-    g = (g % 256) / 255;
-    b = (b % 256) / 255;
-    if (a === undefined) {
-        a = 1;
-    }
-    var max = Math.max(r, g, b),
-        min = Math.min(r, g, b);
-    var h, s, l = (max + min) / 2;
+	    darkenfactor = darkenfactor || 1;
 
-    if (max === min) {
-        h = s = 0; // achromatic
-    } else {
-        var d = max - min;
-        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-        switch (max) {
-        case r:
-            h = (g - b) / d + (g < b ? 6 : 0);
-            break;
-        case g:
-            h = (b - r) / d + 2;
-            break;
-        case b:
-            h = (r - g) / d + 4;
-            break;
-        default:
-            h = 0;
-            break;
-        }
+	    if (rgbparts[3] === undefined) {
+	        rgbparts[3] = 1;
+	    }
 
-        h /= 6;
-    }
-    var hsl = {
-        h: Math.round(360 * h),
-        s: Math.round(100 * s),
-        l: Math.round(100 * l),
-        a: Math.round(100 * a) / 100
-    };
+	    if (isNaN(parseFloat(opacity, 10))) {
+	        opacity = 1;
+	    }
 
-    hsl.fillColor = hslaString(hsl);
+	    rgbcolor.r = parseInt(darkenfactor * (parseInt(rgbparts[0], 10) % 256), 10);
+	    rgbcolor.g = parseInt(darkenfactor * (parseInt(rgbparts[1], 10) % 256), 10);
+	    rgbcolor.b = parseInt(darkenfactor * (parseInt(rgbparts[2], 10) % 256), 10);
+	    rgbcolor.a = parseFloat(opacity * rgbparts[3], 10);
+	    rgbcolor.fillColor = rgbaString(rgbcolor);
+	    rgbcolor.strokeColor =
+	        "rgba(" +
+	        rgbcolor.r / 2 +
+	        "," +
+	        rgbcolor.g / 2 +
+	        "," +
+	        rgbcolor.b / 2 +
+	        "," +
+	        rgbcolor.a +
+	        ")";
+	    rgbcolor.rgb = rgbcolor.fillColor;
+	    return rgbcolor;
+	}
 
-    return hsl;
-}
+	function hue2rgb(p, q, t) {
+	    if (t < 0) {
+	        t += 1;
+	    }
+	    if (t > 1) {
+	        t -= 1;
+	    }
+	    if (t < 1 / 6) {
+	        return p + (q - p) * 6 * t;
+	    }
+	    if (t < 1 / 2) {
+	        return q;
+	    }
+	    if (t < 2 / 3) {
+	        return p + (q - p) * (2 / 3 - t) * 6;
+	    }
+	    return p;
+	}
 
-function hue2rgb(p, q, t) {
-    if (t < 0) {
-        t += 1;
-    }
-    if (t > 1) {
-        t -= 1;
-    }
-    if (t < 1 / 6) {
-        return p + (q - p) * 6 * t;
-    }
-    if (t < 1 / 2) {
-        return q;
-    }
-    if (t < 2 / 3) {
-        return p + (q - p) * (2 / 3 - t) * 6;
-    }
-    return p;
-}
+	function hslToRGB(h, s, l, a, darkenfactor) {
+	    var r, g, b;
 
-function hslToRGB(h, s, l, a, darkenfactor) {
-    var r, g, b;
+	    darkenfactor = darkenfactor || 1;
+	    h = parseFloat(h, 10) / 360;
+	    s = parseFloat(s, 10) / 100;
+	    l = parseFloat(l, 10) / 100;
+	    if (a === undefined) {
+	        a = 1;
+	    }
+	    if (s === 0) {
+	        r = g = b = l; // achromatic
+	    } else {
+	        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+	        var p = 2 * l - q;
+	        r = hue2rgb(p, q, h + 1 / 3);
+	        g = hue2rgb(p, q, h);
+	        b = hue2rgb(p, q, h - 1 / 3);
+	    }
 
-    darkenfactor = darkenfactor || 1;
-    h = parseFloat(h, 10) / 360;
-    s = parseFloat(s, 10) / 100;
-    l = parseFloat(l, 10) / 100;
-    if (a === undefined) {
-        a = 1;
-    }
-    if (s === 0) {
-        r = g = b = l; // achromatic
-    } else {
+	    if (a === undefined) {
+	        a = 1;
+	    }
 
+	    var rgb = {
+	        r: Math.round(r * 255 * darkenfactor),
+	        g: Math.round(g * 255 * darkenfactor),
+	        b: Math.round(b * 255 * darkenfactor),
+	        a: parseFloat(a, 10)
+	    };
 
-        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-        var p = 2 * l - q;
-        r = hue2rgb(p, q, h + 1 / 3);
-        g = hue2rgb(p, q, h);
-        b = hue2rgb(p, q, h - 1 / 3);
-    }
+	    rgb.fillColor = rgbaString(rgb);
 
-    if (a === undefined) {
-        a = 1;
-    }
+	    return rgb;
+	}
 
-    var rgb = {
-        r: Math.round(r * 255 * darkenfactor),
-        g: Math.round(g * 255 * darkenfactor),
-        b: Math.round(b * 255 * darkenfactor),
-        a: parseFloat(a, 10)
-    };
+	function rgbToHSL(in_r, in_g, in_b, in_a) {
+	    var h,
+	        r = (in_r % 256) / 255,
+	        g = (in_g % 256) / 255,
+	        b = (in_b % 256) / 255,
+	        a = in_a === undefined ? 1 : in_a,
+	        max = Math.max(r, g, b),
+	        min = Math.min(r, g, b),
+	        sum = max + min,
+	        diff = max - min,
+	        s = sum > 1 ? diff / (2 - sum) : diff / sum;
 
-    rgb.fillColor = rgbaString(rgb);
+	    switch (max) {
+	        case r:
+	            h = (g - b) / diff + (g < b ? 6 : 0);
+	            break;
+	        case g:
+	            h = (b - r) / diff + 2;
+	            break;
+	        case b:
+	            h = (r - g) / diff + 4;
+	            break;
+	        default:
+	            h = 0;
+	            break;
+	    }
 
-    return rgb;
+	    h /= 6;
 
-}
+	    if (diff === 0) {
+	        h = s = 0; // achromatic
+	    }
 
+	    var hsl = {
+	        h: Math.round(360 * h),
+	        s: Math.round(100 * s),
+	        l: Math.round(50 * sum),
+	        a: Math.round(100 * a) / 100
+	    };
 
-function IconObject(canvas, markerOpts) {
-    this.url = canvas.toDataURL();
-    this.fillColor = canvas.fillColor;
-    this.markerOpts = markerOpts;
-    Object.assign(this, markerOpts);
-    return this;
-}
-IconObject.prototype.toJSON = function () {
-    return {
-        url: null,
-        markerOpts: this.markerOpts
-    };
-};
+	    hsl.fillColor = hslaString(hsl);
 
-function createTextMarker(theoptions) {
+	    return hsl;
+	}
 
-    var generateCanvas = function (options) {
-        var canvas = document.createElement("canvas");
-        var ancho = 30,
-            alto = 40;
-        canvas.width = ancho + 18;
-        canvas.height = alto;
-        var x = canvas.width / 2,
-            y = canvas.height - 2,
-            radius = ancho / 2,
-            angulo = 0.6;
+	function toDecColor(stringcolor) {
+	    var parsedcolor = {};
+	    if (!stringcolor) {
+	        parsedcolor.fillColor = "rgba(100,250,50,0.99)";
+	    } else if (stringcolor.indexOf("rgb") !== -1) {
+	        parsedcolor = parseRGB(stringcolor);
+	    } else if (stringcolor.indexOf("hsl") !== -1) {
+	        parsedcolor = parseHSL(stringcolor);
+	    } else {
+	        parsedcolor = parseHex(stringcolor);
+	    }
 
-        var font = "'" + options.font + "'" || 'Arial';
-        var fontsize = options.fontsize || 11;
+	    return parsedcolor;
+	}
 
-        var context = canvas.getContext("2d");
+	function getColor(val, range) {
+	    var defaults = {
+	        h: Math.floor((360 / range) * val),
+	        s: 78, // constant saturation
+	        l: 63, // constant luminance
+	        a: 1
+	    };
 
-        context.clearRect(0, 0, canvas.width, canvas.height);
+	    return hslaString(defaults);
+	}
 
-        var radius0 = 2 * radius,
-            cx = x + 0.95 * radius0,
-            cy = y + 0.45 * radius0;
+	function getColor1() {
+	    var defaults1 = {
+	        h: 1,
+	        s: 78, // constant saturation
+	        l: 33, // constant luminance
+	        a: 1
+	    };
+	    return hslaString(defaults1);
+	}
 
-        var grad = context.createLinearGradient(0, 0, 0, canvas.height),
-            colors = getColors(options),
-            color0 = colors[0],
-            color1 = colors[1];
+	function darken(stringcolor, factor) {
+	    var darkercolor = {};
+	    if (!factor) {
+	        factor = 1;
+	    }
+	    if (stringcolor.fillColor.indexOf("rgb") !== -1) {
+	        darkercolor.r = factor * parseHalf(stringcolor.r);
+	        darkercolor.g = factor * parseHalf(stringcolor.g);
+	        darkercolor.b = factor * parseHalf(stringcolor.b);
+	        darkercolor.a = 0.99;
+	        darkercolor.fillColor = rgbaString(darkercolor);
+	    } else if (stringcolor.fillColor.indexOf("hsl") !== -1) {
+	        darkercolor.h = stringcolor.h;
+	        darkercolor.s = stringcolor.s;
+	        darkercolor.l = factor * stringcolor.l - 30;
+	        darkercolor.fillColor = hslaString(darkercolor);
+	    }
 
-        grad.addColorStop(0, color0);
-        grad.addColorStop(1, color1);
+	    return darkercolor;
+	}
 
-        context.fillStyle = grad;
-        context.strokeStyle = 'rgba(200,200,200,0.7)';
+	function getColors(options) {
+	    var color0, color1;
+	    if (options.index !== undefined && options.count > 0) {
+	        color0 = getColor(options.index, options.count);
+	        color1 = getColor1();
+	    } else {
+	        var deccolor = toDecColor(options.color);
+	        color0 = deccolor.fillColor;
+	        color1 = darken(deccolor).fillColor;
+	    }
+	    return [color0, color1];
+	}
 
-        context.beginPath();
+	/** global: google */
 
-        //arco izquierdo
-        context.arc(cx - 1, cy, radius0, 9 * Math.PI / 8, -6 * Math.PI / 8, false);
+	function createTextMarker(theoptions) {
+	    var generateCanvas = function(options) {
+	        var canvas = document.createElement("canvas");
+	        var ancho = 30,
+	            alto = 40;
+	        canvas.width = ancho + 18;
+	        canvas.height = alto;
+	        var x = canvas.width / 2,
+	            y = canvas.height - 2,
+	            radius = ancho / 2,
+	            angulo = 0.6;
 
-        // arco superior
-        context.arc(x, (y - 7) / 2, radius, angulo, Math.PI - angulo, true);
+	        var font = "'" + options.font + "'" || "Arial";
+	        var fontsize = options.fontsize || 11;
 
-        //arco derecho
-        context.arc(2 * x - cx + 1, cy, radius0, -0.95 * Math.PI / 3, -Math.PI / 8, false);
-        context.fill();
-        context.stroke();
+	        var context = canvas.getContext("2d");
 
-        context.beginPath();
-        context.arc(x, 0.40 * y, 2 * radius / 3, 0, 2 * Math.PI, false);
-        context.fillStyle = 'white';
-        context.fill();
+	        context.clearRect(0, 0, canvas.width, canvas.height);
 
-        context.beginPath();
+	        var radius0 = 2 * radius,
+	            cx = x + 0.95 * radius0,
+	            cy = y + 0.45 * radius0;
 
-        // Render Label
-        //context.font = "11pt Arial";
-        context.font = fontsize + "pt " + font;
-        context.textBaseline = "top";
+	        var grad = context.createLinearGradient(0, 0, 0, canvas.height),
+	            colors = getColors(options),
+	            color0 = colors[0],
+	            color1 = colors[1];
 
-        var textWidth = context.measureText(options.label);
+	        grad.addColorStop(0, color0);
+	        grad.addColorStop(1, color1);
 
-        if (textWidth.width > ancho || String(options.label).length > 3) {
-            context.rect(x - 2 - textWidth.width / 2, y - 30, x - 2 + textWidth.width / 2, y - 23);
-            context.fillStyle = '#F7F0F0';
-            context.fill();
-            context.stroke();
-        }
+	        context.fillStyle = grad;
+	        context.strokeStyle = "rgba(200,200,200,0.7)";
 
-        context.fillStyle = "black";
-        context.strokeStyle = "black";
-        // centre the text.
-        context.fillText(options.label, 1 + Math.floor((canvas.width / 2) - (textWidth.width / 2)), 8);
+	        context.beginPath();
 
-        return canvas;
+	        //arco izquierdo
+	        context.arc(
+	            cx - 1,
+	            cy,
+	            radius0,
+	            (9 * Math.PI) / 8,
+	            (-6 * Math.PI) / 8,
+	            false
+	        );
 
-    };
-    theoptions.scale = theoptions.scale || 0.75;
-    var markerCanvas = generateCanvas(theoptions),
-        markerOpts = {};
+	        // arco superior
+	        context.arc(x, (y - 7) / 2, radius, angulo, Math.PI - angulo, true);
 
-    theoptions.type = 'textmarker';
+	        //arco derecho
+	        context.arc(
+	            2 * x - cx + 1,
+	            cy,
+	            radius0,
+	            (-0.95 * Math.PI) / 3,
+	            -Math.PI / 8,
+	            false
+	        );
+	        context.fill();
+	        context.stroke();
 
-    Object.assign(markerOpts, theoptions);
+	        context.beginPath();
+	        context.arc(x, 0.4 * y, (2 * radius) / 3, 0, 2 * Math.PI, false);
+	        context.fillStyle = "white";
+	        context.fill();
 
-    if (window && window.google && window.google.maps) {
-        Object.assign(markerOpts, {
-            size: new google.maps.Size(48, 40),
-            origin: new google.maps.Point(0, 0),
-            anchor: new google.maps.Point(24 * theoptions.scale, 40 * theoptions.scale),
-            scaledSize: new google.maps.Size(48 * theoptions.scale, 40 * theoptions.scale)
-        });
-    }
-    var iconObj = new IconObject(markerCanvas, markerOpts);
+	        context.beginPath();
 
-    return iconObj;
-}
+	        // Render Label
+	        //context.font = "11pt Arial";
+	        context.font = fontsize + "pt " + font;
+	        context.textBaseline = "top";
 
+	        var textWidth = context.measureText(options.label);
 
-function createClusterIcon(theoptions) {
+	        if (textWidth.width > ancho || String(options.label).length > 3) {
+	            context.rect(
+	                x - 2 - textWidth.width / 2,
+	                y - 30,
+	                x - 2 + textWidth.width / 2,
+	                y - 23
+	            );
+	            context.fillStyle = "#F7F0F0";
+	            context.fill();
+	            context.stroke();
+	        }
 
-    var generateClusterCanvas = function (options) {
-        var canvas = options.canvas || document.createElement("canvas"),
-            anchorX = 27,
-            anchorY = 53,
-            radius = (anchorX - 9),
-            angulo = 1.1,
-            font = options.font || 'fontello',
-            fontsize = options.fontsize || 14,
-            context = canvas.getContext("2d"),
-            grad = context.createLinearGradient(0, 0, 0, anchorY);
+	        context.fillStyle = "black";
+	        context.strokeStyle = "black";
+	        // centre the text.
+	        context.fillText(
+	            options.label,
+	            1 + Math.floor(canvas.width / 2 - textWidth.width / 2),
+	            8
+	        );
 
-        canvas.width = anchorX * 2;
-        canvas.height = anchorY + 1;
+	        return canvas;
+	    };
+	    theoptions.scale = theoptions.scale || 0.75;
+	    var markerCanvas = generateCanvas(theoptions),
+	        markerOpts = {};
 
-        var colors = getColors(options),
-            color0 = colors[0],
-            color1 = colors[1];
+	    theoptions.type = "textmarker";
 
+	    Object.assign(markerOpts, theoptions);
 
-        context.clearRect(0, 0, canvas.width, canvas.height);
-        context.moveTo(anchorX, anchorY);
+	    if (window && window.google && window.google.maps) {
+	        Object.assign(markerOpts, {
+	            size: new google.maps.Size(48, 40),
+	            origin: new google.maps.Point(0, 0),
+	            anchor: new google.maps.Point(
+	                24 * theoptions.scale,
+	                40 * theoptions.scale
+	            ),
+	            scaledSize: new google.maps.Size(
+	                48 * theoptions.scale,
+	                40 * theoptions.scale
+	            )
+	        });
+	    }
+	    var iconObj = new IconObject(markerCanvas, markerOpts);
 
-        var labelvalue = parseInt(options.label, 10);
-        if (labelvalue < 10) {
-            color1 = 'orange';
-            fontsize = 14;
-        } else if (labelvalue < 30) {
-            color1 = 'red';
-            fontsize = 15;
-        } else {
-            color1 = 'purple';
-            fontsize = 16;
-        }
-        if (labelvalue > 99) {
-            radius = radius + 3;
-            context.setLineDash([5, 5]);
-            context.beginPath();
-            context.arc(anchorX, 2 + (0.50 * anchorY), (radius + 7), 0, 2 * Math.PI, false);
-            context.fillStyle = 'transparent';
-            context.strokeStyle = color1;
-            context.lineWidth = 2;
-            context.fill();
-            context.stroke();
-        }
+	    return iconObj;
+	}
 
-        context.setLineDash([5, 5]);
-        context.beginPath();
-        context.arc(anchorX, 2 + (0.50 * anchorY), (radius + 2), 0, 2 * Math.PI, false);
-        context.fillStyle = 'transparent';
-        context.strokeStyle = color1;
-        context.lineWidth = 2;
-        context.fill();
-        context.stroke();
+	/** global: google */
 
-        // Círculo blanco
-        context.setLineDash([5, 0]);
-        context.beginPath();
-        context.arc(anchorX, 2 + (0.50 * anchorY), (radius - 3), 0, 2 * Math.PI, false);
-        context.fillStyle = 'white';
-        context.strokeStyle = color1;
-        context.lineWidth = 4;
-        context.fill();
-        context.stroke();
+	function createFatMarkerIcon(theoptions) {
+		var generateFatCanvas = function(options) {
+			var canvas = options.canvas || document.createElement("canvas"),
+				anchorX = 27,
+				anchorY = 53,
+				radius = anchorX - 9,
+				angulo = 1.1,
+				font = options.font || "fontello",
+				fontsize = options.fontsize || 14,
+				context = canvas.getContext("2d"),
+				grad = context.createLinearGradient(0, 0, 0, anchorY);
 
-        context.beginPath();
+			canvas.width = anchorX * 2;
+			canvas.height = anchorY + 1;
 
-        context.font = 'normal normal normal ' + fontsize + 'px ' + font;
-        context.fillStyle = '#333';
-        context.textBaseline = "top";
+			var colors = getColors(options),
+				color0 = colors[0],
+				color1 = colors[1];
 
+			context.clearRect(0, 0, canvas.width, canvas.height);
 
-        var textWidth = context.measureText(options.label),
-            text_x = options.label,
-            label_x = Math.floor((canvas.width / 2) - (textWidth.width / 2)),
-            label_y = 1 + Math.floor(canvas.height / 2 - fontsize / 2);
+			grad.addColorStop(0, color0);
+			grad.addColorStop(1, color1);
 
-        // centre the text.
-        context.fillText(text_x, label_x, label_y);
+			context.fillStyle = grad;
+			context.strokeStyle = color1;
+			context.beginPath();
 
-        return canvas;
+			context.moveTo(anchorX, anchorY);
 
-    };
-    theoptions.scale = theoptions.scale || 1;
-    var markerCanvas = generateClusterCanvas(theoptions),
-        markerOpts = {},
-        scale = theoptions.scale;
+			// arco superior
+			context.arc(
+				anchorX,
+				2 + 0.5 * anchorY,
+				radius,
+				angulo,
+				Math.PI - angulo,
+				true
+			);
 
-    Object.assign(markerOpts, theoptions);
+			//punta inferior
+			context.lineTo(anchorX, anchorY);
 
-    if (window && window.google && window.google.maps) {
-        Object.assign(markerOpts, {
-            size: new google.maps.Size(54, 48),
-            origin: new google.maps.Point(0, 0),
-            anchor: new google.maps.Point(27 * scale, 24 * scale),
-            scaledSize: new google.maps.Size(54 * scale, 48 * scale)
-        });
-    }
+			context.fill();
+			context.stroke();
 
-    var iconObj = new IconObject(markerCanvas, markerOpts);
+			// Círculo blanco
+			context.beginPath();
+			context.arc(
+				anchorX,
+				2 + 0.5 * anchorY,
+				radius - 3,
+				0,
+				2 * Math.PI,
+				false
+			);
+			context.fillStyle = "white";
+			context.fill();
 
-    return iconObj;
-}
+			context.beginPath();
 
-function createFatMarkerIcon(theoptions) {
+			context.font = "normal normal normal " + fontsize + "px " + font;
+			//console.log('context font', context.font);
+			context.fillStyle = color1;
+			context.textBaseline = "top";
 
-    var generateFatCanvas = function (options) {
-        var canvas = options.canvas || document.createElement("canvas"),
-            anchorX = 27,
-            anchorY = 53,
-            radius = (anchorX - 9),
-            angulo = 1.1,
-            font = options.font || 'fontello',
-            fontsize = options.fontsize || 14,
-            context = canvas.getContext("2d"),
-            grad = context.createLinearGradient(0, 0, 0, anchorY);
+			var textWidth = context.measureText(options.unicodelabel),
+				text_x = options.unicodelabel,
+				label_x = Math.floor(canvas.width / 2 - textWidth.width / 2),
+				label_y = 1 + Math.floor(canvas.height / 2 - fontsize / 2);
 
-        canvas.width = anchorX * 2;
-        canvas.height = anchorY + 1;
+			// centre the text.
+			context.fillText(text_x, label_x, label_y);
+			canvas.fillColor = color0;
+			return canvas;
+		};
 
-        var colors = getColors(options),
-            color0 = colors[0],
-            color1 = colors[1];
+		var scale = theoptions.scale || 1,
+			markerCanvas = generateFatCanvas(theoptions),
+			markerOpts = {};
 
-        context.clearRect(0, 0, canvas.width, canvas.height);
+		theoptions.type = "fatmarker";
 
-        grad.addColorStop(0, color0);
-        grad.addColorStop(1, color1);
+		Object.assign(markerOpts, theoptions);
 
-        context.fillStyle = grad;
-        context.strokeStyle = color1;
-        context.beginPath();
+		if (window && window.google && window.google.maps) {
+			Object.assign(markerOpts, {
+				size: new google.maps.Size(54, 48),
+				origin: new google.maps.Point(0, 0),
+				anchor: new google.maps.Point(21 * scale, 36 * scale),
+				scaledSize: new google.maps.Size(42 * scale, 36 * scale),
+				scale: scale
+			});
+		}
+		var iconObj = new IconObject(markerCanvas, markerOpts);
+		return iconObj;
+	}
 
-        context.moveTo(anchorX, anchorY);
+	/** global: google */
 
-        // arco superior
-        context.arc(anchorX, 2 + (0.50 * anchorY), radius, angulo, Math.PI - angulo, true);
+	function createTransparentMarkerIcon(theoptions) {
+	    var generateTransparentCanvas = function(options) {
+	        var text_x,
+	            canvas = options.canvas || document.createElement("canvas"),
+	            context = canvas.getContext("2d"),
+	            font = options.font || "fontello",
+	            fontsize = options.fontsize || 26;
 
-        //punta inferior
-        context.lineTo(anchorX, anchorY);
+	        canvas.width = 54;
+	        canvas.height = 48;
+	        context.clearRect(0, 0, canvas.width, canvas.height);
 
-        context.fill();
-        context.stroke();
+	        var colors = getColors(options),
+	            color0 = colors[0],
+	            color1 = colors[1];
+	        context.beginPath();
 
-        // Círculo blanco
-        context.beginPath();
-        context.arc(anchorX, 2 + (0.50 * anchorY), (radius - 3), 0, 2 * Math.PI, false);
-        context.fillStyle = 'white';
-        context.fill();
+	        if (options.shadow) {
+	            context.font = "normal normal normal " + fontsize + "px " + font;
 
-        context.beginPath();
+	            context.textBaseline = "top";
+	            var textWidth = context.measureText(options.unicodelabel);
+	            text_x = Math.floor(canvas.width / 2 - textWidth.width / 2);
 
-        context.font = 'normal normal normal ' + fontsize + 'px ' + font;
-        //console.log('context font', context.font);
-        context.fillStyle = color1;
-        context.textBaseline = "top";
+	            context.shadowOffsetX = -2;
+	            context.shadowOffsetY = -2;
+	            context.shadowBlur = 0;
 
-        var textWidth = context.measureText(options.unicodelabel),
-            text_x = options.unicodelabel,
-            label_x = Math.floor((canvas.width / 2) - (textWidth.width / 2)),
-            label_y = 1 + Math.floor(canvas.height / 2 - fontsize / 2);
+	            context.fillStyle = "#FFFFFF";
+	            context.shadowColor = "#666666";
 
-        // centre the text.
-        context.fillText(text_x, label_x, label_y);
-        canvas.fillColor = color0;
-        return canvas;
-    };
+	            context.fillText(options.unicodelabel, text_x - 4, 2);
+	            context.fillText(options.unicodelabel, text_x, 5);
+	            context.fillStyle = color0;
+	            context.fillText(options.unicodelabel, text_x + 4, 8);
 
-    var scale = theoptions.scale || 1,
-        markerCanvas = generateFatCanvas(theoptions),
-        markerOpts = {};
+	            context.strokeStyle = "#FFFFFF";
+	            context.strokeText(options.unicodelabel, text_x + 4, 8);
+	        } else {
+	            context.font =
+	                "normal normal normal " + (fontsize - 3) + "px " + font;
 
-    theoptions.type = 'fatmarker';
+	            context.textBaseline = "top";
+	            var textmetric = context.measureText(options.unicodelabel);
+	            text_x = Math.floor(canvas.width / 2 - textmetric.width / 2);
 
-    Object.assign(markerOpts, theoptions);
+	            //console.debug('textmetric', textmetric);
 
-    if (window && window.google && window.google.maps) {
-        Object.assign(markerOpts, {
-            size: new google.maps.Size(54, 48),
-            origin: new google.maps.Point(0, 0),
-            anchor: new google.maps.Point(21 * scale, 36 * scale),
-            scaledSize: new google.maps.Size(42 * scale, 36 * scale),
-            scale: scale
-        });
-    }
-    var iconObj = new IconObject(markerCanvas, markerOpts);
-    return iconObj;
-}
+	            context.shadowOffsetX = 2;
+	            context.shadowOffsetY = 2;
+	            context.shadowBlur = 0;
+	            context.shadowColor = "#FFFFFF";
+	            context.fillStyle = color0;
+	            context.fillText(options.unicodelabel, text_x + 1, 6);
 
-function createTransparentMarkerIcon(theoptions) {
+	            context.shadowOffsetX = 2;
+	            context.shadowOffsetY = 2;
+	            context.shadowBlur = 1;
+	            context.shadowColor = "#FFFFFF";
+	            context.strokeStyle = color1;
+	            context.strokeText(options.unicodelabel, text_x + 1, 6);
+	        }
 
-    var generateTransparentCanvas = function (options) {
-        var text_x,
-            canvas = options.canvas || document.createElement("canvas"),
-            context = canvas.getContext("2d"),
-            font = options.font || 'fontello',
-            fontsize = options.fontsize || 26;
+	        canvas.fillColor = color0;
 
-        canvas.width = 54;
-        canvas.height = 48;
-        context.clearRect(0, 0, canvas.width, canvas.height);
+	        return canvas;
+	    };
 
-        var colors = getColors(options),
-            color0 = colors[0],
-            color1 = colors[1];
-        context.beginPath();
+	    theoptions.scale = theoptions.scale || 1;
+	    theoptions.fontsize = theoptions.fontsize || 26;
 
-        if (options.shadow) {
+	    var markerCanvas = generateTransparentCanvas(theoptions),
+	        markerOpts = {};
 
-            context.font = 'normal normal normal ' + fontsize + 'px ' + font;
+	    var scale = theoptions.scale;
 
-            context.textBaseline = "top";
-            var textWidth = context.measureText(options.unicodelabel);
-            text_x = Math.floor((canvas.width / 2) - (textWidth.width / 2));
+	    theoptions.type = "transparent";
 
-            context.shadowOffsetX = -2;
-            context.shadowOffsetY = -2;
-            context.shadowBlur = 0;
+	    Object.assign(markerOpts, theoptions);
 
-            context.fillStyle = '#FFFFFF';
-            context.shadowColor = '#666666';
+	    if (window.google && window.google.maps) {
+	        Object.assign(markerOpts, {
+	            size: new google.maps.Size(54 * scale, 48 * scale),
+	            origin: new google.maps.Point(0, 0),
+	            anchor: new google.maps.Point(27 * scale, 24 * scale),
+	            scaledSize: new google.maps.Size(54 * scale, 48 * scale)
+	        });
+	    }
+	    var iconObj = new IconObject(markerCanvas, markerOpts);
 
-            context.fillText(options.unicodelabel, text_x - 4, 2);
-            context.fillText(options.unicodelabel, text_x, 5);
-            context.fillStyle = color0;
-            context.fillText(options.unicodelabel, text_x + 4, 8);
+	    return iconObj;
+	}
 
-            context.strokeStyle = '#FFFFFF';
-            context.strokeText(options.unicodelabel, text_x + 4, 8);
+	/** global: google, r, g, b */
 
-        } else {
+	function padHex(str_in) {
+	    if (("" + str_in).length === 1) {
+	        return "0" + String(str_in);
+	    } else {
+	        return String(str_in);
+	    }
+	}
 
-            context.font = 'normal normal normal ' + (fontsize - 3) + 'px ' + font;
+	function generateAutoicon(options) {
+	    var cacheKey = JSON.stringify(options);
 
-            context.textBaseline = "top";
-            var textmetric = context.measureText(options.unicodelabel);
-            text_x = Math.floor((canvas.width / 2) - (textmetric.width / 2));
+	    var iconObj = window.sessionStorage.getItem(cacheKey);
+	    if (iconObj !== null) {
+	        return JSON.parse(iconObj);
+	    }
+	    if (!options.is_icon) {
+	        iconObj = createTextMarker(options);
+	    } else if (options.transparent_background) {
+	        //console.log("createTransparentMarkerIcon", options.font);
+	        iconObj = createTransparentMarkerIcon(options);
+	    } else {
+	        //console.log("createFatMarkerIcon", options.font);
+	        iconObj = createFatMarkerIcon(options);
+	    }
+	    var cached = iconObj.toJSON();
+	    cached.url = iconObj.url;
+	    window.sessionStorage.setItem(cacheKey, JSON.stringify(cached));
+	    return iconObj;
+	}
 
-            //console.debug('textmetric', textmetric);
+	var MarkerFactory = {
+	    createTransparentMarkerIcon: createTransparentMarkerIcon,
+	    createFatMarkerIcon: createFatMarkerIcon,
+	    createTextMarker: createTextMarker,
+	    /**
+	     * Receives a color string rgb(a), hsl(a) or hex, returns its components
+	     * in rgba and hsla, with optional transparency
+	     * plus a darkened version (default is half of each RGB component) and a
+	     *
+	     * @param {string} somecolor    - A color string in  rgb(a), hsl(a) or hex format
+	     * @param {Number} opacity      - Opacity to apply to the color. Optional, default 1
+	     * @param {Number} darkenfactor - How much darker should the resulting color be. Optional, default 1
+	     *
+	     * @return     {Object}  input color parsed and modified as requested
+	     */
+	    parseColorString: function(somecolor, opacity, darkenfactor) {
+	        var parsedcolor = {
+	                original: somecolor
+	            },
+	            hsl,
+	            rgb;
 
-            context.shadowOffsetX = 2;
-            context.shadowOffsetY = 2;
-            context.shadowBlur = 0;
-            context.shadowColor = '#FFFFFF';
-            context.fillStyle = color0;
-            context.fillText(options.unicodelabel, text_x + 1, 6);
+	        darkenfactor = darkenfactor || 1;
+	        opacity = opacity || 1;
 
-            context.shadowOffsetX = 2;
-            context.shadowOffsetY = 2;
-            context.shadowBlur = 1;
-            context.shadowColor = '#FFFFFF';
-            context.strokeStyle = color1;
-            context.strokeText(options.unicodelabel, text_x + 1, 6);
+	        if (somecolor.indexOf("hsl") !== -1) {
+	            hsl = parseHSL(somecolor, opacity);
+	            rgb = hslToRGB(hsl.h, hsl.s, hsl.l, hsl.a, darkenfactor);
+	        } else if (somecolor.indexOf("rgb") !== -1) {
+	            rgb = parseRGB(somecolor, opacity, darkenfactor);
+	        } else {
+	            rgb = parseHex(somecolor, opacity, darkenfactor);
+	        }
 
-        }
+	        hsl = rgbToHSL(rgb.r, rgb.g, rgb.b, rgb.a);
 
-        canvas.fillColor = color0;
+	        parsedcolor.hsl = {
+	            h: hsl.h,
+	            s: hsl.s,
+	            l: hsl.l,
+	            a: hsl.a
+	        };
+	        parsedcolor.rgb = {
+	            r: rgb.r,
+	            g: rgb.g,
+	            b: rgb.b,
+	            a: rgb.a
+	        };
 
-        return canvas;
+	        parsedcolor.fillColor = rgb.fillColor;
+	        parsedcolor.rgba = rgb.fillColor;
+	        parsedcolor.hsla = hsl.fillColor;
+	        parsedcolor.strokeColor = rgb.strokeColor;
+	        parsedcolor.hex = [
+	            "#",
+	            padHex(rgb.r.toString(16)),
+	            padHex(rgb.g.toString(16)),
+	            padHex(rgb.b.toString(16))
+	        ].join("");
+	        return parsedcolor;
+	    },
 
-    };
+	    /**
+	     * Generates an google maps marker (or an image as dataurl from the given options)
+	     *
+	     * @param      {Object}  options  The options
+	     * @return     {Object}  { description_of_the_return_value }
+	     */
+	    autoIcon: function(options) {
+	        if (typeof options !== "object") {
+	            console.warn("autoIcon expects an object as its only parameter");
+	            return null;
+	        }
+	        // unless explicitly set to false, the icon doesn't have a marker-like wrapper
+	        options.transparent_background =
+	            options.transparent_background !== false;
+	        options.label = String(options.label || "A");
+	        options.color = options.color || "#FF0000";
 
-    theoptions.scale = theoptions.scale || 1;
-    theoptions.fontsize = theoptions.fontsize || 26;
+	        if (
+	            options.label.length === 4 ||
+	            options.label.substring(0, 2) === "0x"
+	        ) {
+	            options.font = options.font || "fontello";
+	            options.label = (options.label || "e836").slice(-4);
+	            options.unicodelabel = String.fromCharCode("0x" + options.label);
+	            options.scale = options.scale || 1;
+	            options.is_icon = true;
 
-    var markerCanvas = generateTransparentCanvas(theoptions),
-        markerOpts = {};
+	            return generateAutoicon(options);
+	        } else if (options.shadow) {
 
-    var scale = theoptions.scale;
-    /*if (theoptions.shadow) {
-        scale = 0.9 * scale;
-    }*/
-    theoptions.type = 'transparent';
+	            return createClusterIcon(options);
+	        } else {
+	            options.scale = options.scale || 0.75;
+	            options.label = String(options.label || "A");
+	            options.fontsize = options.fontsize || 11;
+	            options.font = options.font || "Arial";
+	            // This is text I should print literally
 
-    Object.assign(markerOpts, theoptions);
+	            return generateAutoicon(options);
+	        }
+	    }
+	};
 
-    if (window.google && window.google.maps) {
-        Object.assign(markerOpts, {
-            size: new google.maps.Size(54 * scale, 48 * scale),
-            origin: new google.maps.Point(0, 0),
-            anchor: new google.maps.Point(27 * scale, 24 * scale),
-            scaledSize: new google.maps.Size(54 * scale, 48 * scale)
-        });
-    }
-    var iconObj = new IconObject(markerCanvas, markerOpts);
+	exports.MarkerFactory = MarkerFactory;
 
-    return iconObj;
-}
+	Object.defineProperty(exports, '__esModule', { value: true });
 
-
-var MarkerFactory = {
-    createTransparentMarkerIcon: createTransparentMarkerIcon,
-    createFatMarkerIcon: createFatMarkerIcon,
-    createTextMarker: createTextMarker,
-    /**
-     * Receives a color string rgb(a), hsl(a) or hex, returns its components
-     * in rgba and hsla, with optional transparency
-     * plus a darkened version (default is half of each RGB component) and a
-     *
-     * @param {string} somecolor          - A color string in  rgb(a), hsl(a) or hex format
-     * @param {Number} [opacity=1]        - Opacity to apply to the color
-     * @param {Number} [darkenfactor=1] - How much darker should the resulting color be
-     *
-     * @return     {Object}  input color parsed and modified as requested
-     */
-    parseColorString: function (somecolor, opacity, darkenfactor) {
-        var parsedcolor = {
-                original: somecolor
-            },
-            hsl, rgb;
-
-        darkenfactor = darkenfactor || 1;
-        opacity = opacity || 1;
-
-        if (somecolor.indexOf('hsl') !== -1) {
-            hsl = parseHSL(somecolor, opacity);
-            rgb = hslToRGB(hsl.h, hsl.s, hsl.l, hsl.a, darkenfactor);
-
-        } else if (somecolor.indexOf('rgb') !== -1) {
-            rgb = parseRGB(somecolor, opacity, darkenfactor);
-        } else {
-            rgb = parseHex(somecolor, opacity, darkenfactor);
-        }
-
-
-        hsl = rgbToHSL(rgb.r, rgb.g, rgb.b, rgb.a);
-
-
-        parsedcolor.hsl = {
-            h: hsl.h,
-            s: hsl.s,
-            l: hsl.l,
-            a: hsl.a
-        };
-        parsedcolor.rgb = {
-            r: rgb.r,
-            g: rgb.g,
-            b: rgb.b,
-            a: rgb.a
-        };
-
-
-        parsedcolor.fillColor = rgb.fillColor;
-        parsedcolor.rgba = rgb.fillColor;
-        parsedcolor.hsla = hsl.fillColor;
-        parsedcolor.strokeColor = rgb.strokeColor;
-        parsedcolor.hex = ['#', padHex(rgb.r.toString(16)), padHex(rgb.g.toString(16)), padHex(rgb.b.toString(16))].join('');
-        return parsedcolor;
-    },
-    /**
-     * Generates an google maps marker (or an image as dataurl from the given options)
-     *
-     * @param      {Object}  options  The options
-     * @return     {Object}  { description_of_the_return_value }
-     */
-    autoIcon: function (options) {
-
-        if (typeof (options) !== 'object') {
-            console.warn('autoIcon expects an object as its only parameter');
-            return null;
-        }
-
-        options.label = String(options.label || 'A');
-        options.color = options.color || '#FF0000';
-
-        // unless explicitly set to false, the icon doesn't have a marker-like wrapper
-        if (options.transparent_background === undefined) {
-            options.transparent_background = true;
-        }
-
-        if (options.label.length === 4 || options.label.substring(0, 2) === '0x') {
-
-
-            options.font = options.font || 'fontello';
-            options.label = (options.label || 'e836').slice(-4);
-            options.unicodelabel = String.fromCharCode('0x' + options.label);
-            options.scale = options.scale || 1;
-
-            if (options.transparent_background) {
-                return MarkerFactory.createTransparentMarkerIcon(options);
-            } else {
-                return MarkerFactory.createFatMarkerIcon(options);
-            }
-        } else if (options.shadow) {
-            return createClusterIcon(options);
-        } else {
-            options.scale = options.scale || 0.75;
-            options.label = String(options.label || 'A');
-            options.fontsize = options.fontsize || 11;
-            options.font = options.font || 'Arial';
-            // This is text I should print literally
-            return MarkerFactory.createTextMarker(options);
-        }
-
-    }
-};
-
-exports.MarkerFactory = MarkerFactory;
-exports['default'] = MarkerFactory;
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
 })));

dist/markerfactory.min.js

@@ -1,2 +0,2 @@
-!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports):"function"==typeof define&&define.amd?define(["exports"],factory):factory(global=global||{})}(this,function(exports){"use strict";function compact(array){for(var index=-1,length=array?array.length:0,resIndex=0,result=[];++index<length;){var value=array[index];value&&(result[resIndex++]=value)}return result}function padHex(str_in){return 1===(""+str_in).length?"0"+String(str_in):String(str_in)}function hslaString(hslcolor){return hslcolor.a?"hsla("+hslcolor.h+","+hslcolor.s+"%,"+hslcolor.l+"%,"+hslcolor.a+")":"hsl("+hslcolor.h+","+hslcolor.s+"%,"+hslcolor.l+"%)"}function rgbaString(hexcolor){return hexcolor.a?"rgba("+hexcolor.r+","+hexcolor.g+","+hexcolor.b+","+hexcolor.a+")":"rgb("+hexcolor.r+","+hexcolor.g+","+hexcolor.b+")"}function parseHalf(foo){return parseInt(foo/2,10)}function parseHex(hexstring,opacity,darkenfactor){var hexcolor={hex:hexstring};return darkenfactor=darkenfactor||1,3===(hexstring=hexstring.replace("#","")).length&&(hexstring=hexstring[0]+hexstring[0]+hexstring[1]+hexstring[1]+hexstring[2]+hexstring[2]),isNaN(parseFloat(opacity,10))&&(opacity=1),hexcolor.r=parseInt(darkenfactor*parseInt(hexstring.substring(0,2),16),10),hexcolor.g=parseInt(darkenfactor*parseInt(hexstring.substring(2,4),16),10),hexcolor.b=parseInt(darkenfactor*parseInt(hexstring.substring(4,6),16),10),hexcolor.a=opacity,hexcolor.fillColor=rgbaString(hexcolor),hexcolor.strokeColor=["rgba("+parseHalf(hexcolor.r),parseHalf(hexcolor.g),parseHalf(hexcolor.b),hexcolor.a+")"].join(","),hexcolor.rgb=hexcolor.fillColor,hexcolor}function parseHSL(hslstring,opacity){var hslcolor={},hslcolor_stroke={},hslparts=compact(hslstring.split(/hsla?\(|,|\)|%/));return void 0===hslparts[3]&&(hslparts[3]=1),isNaN(parseFloat(opacity,10))&&(opacity=1),hslcolor.h=hslcolor_stroke.h=parseFloat(hslparts[0],10),hslcolor.s=hslcolor_stroke.s=parseFloat(hslparts[1],10),hslcolor.l=parseFloat(hslparts[2],10),hslcolor.a=hslcolor_stroke.a=parseFloat(opacity*hslparts[3],10),hslcolor_stroke.l=parseInt(hslcolor.l/2,10),hslcolor.fillColor=hslaString(hslcolor),hslcolor.strokeColor=hslaString(hslcolor_stroke),hslcolor.hsl=hslcolor.fillColor,hslcolor}function parseRGB(rgbstring,opacity,darkenfactor){var rgbcolor={},rgbparts=compact(rgbstring.split(/rgba?\(|,|\)/));return darkenfactor=darkenfactor||1,void 0===rgbparts[3]&&(rgbparts[3]=1),isNaN(parseFloat(opacity,10))&&(opacity=1),rgbcolor.r=parseInt(darkenfactor*(parseInt(rgbparts[0],10)%256),10),rgbcolor.g=parseInt(darkenfactor*(parseInt(rgbparts[1],10)%256),10),rgbcolor.b=parseInt(darkenfactor*(parseInt(rgbparts[2],10)%256),10),rgbcolor.a=parseFloat(opacity*rgbparts[3],10),rgbcolor.fillColor=rgbaString(rgbcolor),rgbcolor.strokeColor="rgba("+rgbcolor.r/2+","+rgbcolor.g/2+","+rgbcolor.b/2+","+rgbcolor.a+")",rgbcolor.rgb=rgbcolor.fillColor,rgbcolor}function getColors(options){var color0,color1;if(void 0!==options.index&&options.count>0)color0=function(val,range){return defaults.h=Math.floor(360/range*val),hslaString(defaults)}(options.index,options.count),color1=hslaString({h:1,s:78,l:33,a:1});else{var deccolor=function(stringcolor){var parsedcolor={};return stringcolor?parsedcolor=-1!==stringcolor.indexOf("rgb")?parseRGB(stringcolor):-1!==stringcolor.indexOf("hsl")?parseHSL(stringcolor):parseHex(stringcolor):parsedcolor.fillColor="rgba(100,250,50,0.99)",parsedcolor}(options.color);color0=deccolor.fillColor,color1=function(stringcolor,factor){var darkercolor={};return factor||(factor=1),-1!==stringcolor.fillColor.indexOf("rgb")?(darkercolor.r=factor*parseHalf(stringcolor.r),darkercolor.g=factor*parseHalf(stringcolor.g),darkercolor.b=factor*parseHalf(stringcolor.b),darkercolor.a=.99,darkercolor.fillColor=rgbaString(darkercolor)):-1!==stringcolor.fillColor.indexOf("hsl")&&(darkercolor.h=stringcolor.h,darkercolor.s=stringcolor.s,darkercolor.l=factor*stringcolor.l-30,darkercolor.fillColor=hslaString(darkercolor)),darkercolor}(deccolor).fillColor}return[color0,color1]}function hue2rgb(p,q,t){return t<0&&(t+=1),t>1&&(t-=1),t<1/6?p+6*(q-p)*t:t<.5?q:t<2/3?p+(q-p)*(2/3-t)*6:p}function IconObject(canvas,markerOpts){return this.url=canvas.toDataURL(),this.fillColor=canvas.fillColor,this.markerOpts=markerOpts,Object.assign(this,markerOpts),this}var defaults={h:1,s:78,l:63,a:1};IconObject.prototype.toJSON=function(){return{url:null,markerOpts:this.markerOpts}};var MarkerFactory={createTransparentMarkerIcon:function(theoptions){theoptions.scale=theoptions.scale||1,theoptions.fontsize=theoptions.fontsize||26;var markerCanvas=function(options){var text_x,canvas=options.canvas||document.createElement("canvas"),context=canvas.getContext("2d"),font=options.font||"fontello",fontsize=options.fontsize||26;canvas.width=54,canvas.height=48,context.clearRect(0,0,canvas.width,canvas.height);var colors=getColors(options),color0=colors[0],color1=colors[1];if(context.beginPath(),options.shadow){context.font="normal normal normal "+fontsize+"px "+font,context.textBaseline="top";var textWidth=context.measureText(options.unicodelabel);text_x=Math.floor(canvas.width/2-textWidth.width/2),context.shadowOffsetX=-2,context.shadowOffsetY=-2,context.shadowBlur=0,context.fillStyle="#FFFFFF",context.shadowColor="#666666",context.fillText(options.unicodelabel,text_x-4,2),context.fillText(options.unicodelabel,text_x,5),context.fillStyle=color0,context.fillText(options.unicodelabel,text_x+4,8),context.strokeStyle="#FFFFFF",context.strokeText(options.unicodelabel,text_x+4,8)}else{context.font="normal normal normal "+(fontsize-3)+"px "+font,context.textBaseline="top";var textmetric=context.measureText(options.unicodelabel);text_x=Math.floor(canvas.width/2-textmetric.width/2),context.shadowOffsetX=2,context.shadowOffsetY=2,context.shadowBlur=0,context.shadowColor="#FFFFFF",context.fillStyle=color0,context.fillText(options.unicodelabel,text_x+1,6),context.shadowOffsetX=2,context.shadowOffsetY=2,context.shadowBlur=1,context.shadowColor="#FFFFFF",context.strokeStyle=color1,context.strokeText(options.unicodelabel,text_x+1,6)}return canvas.fillColor=color0,canvas}(theoptions),markerOpts={},scale=theoptions.scale;return theoptions.type="transparent",Object.assign(markerOpts,theoptions),window.google&&window.google.maps&&Object.assign(markerOpts,{size:new google.maps.Size(54*scale,48*scale),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(27*scale,24*scale),scaledSize:new google.maps.Size(54*scale,48*scale)}),new IconObject(markerCanvas,markerOpts)},createFatMarkerIcon:function(theoptions){var scale=theoptions.scale||1,markerCanvas=function(options){var canvas=options.canvas||document.createElement("canvas"),font=options.font||"fontello",fontsize=options.fontsize||14,context=canvas.getContext("2d"),grad=context.createLinearGradient(0,0,0,53);canvas.width=54,canvas.height=54;var colors=getColors(options),color0=colors[0],color1=colors[1];context.clearRect(0,0,canvas.width,canvas.height),grad.addColorStop(0,color0),grad.addColorStop(1,color1),context.fillStyle=grad,context.strokeStyle=color1,context.beginPath(),context.moveTo(27,53),context.arc(27,28.5,18,1.1,Math.PI-1.1,!0),context.lineTo(27,53),context.fill(),context.stroke(),context.beginPath(),context.arc(27,28.5,15,0,2*Math.PI,!1),context.fillStyle="white",context.fill(),context.beginPath(),context.font="normal normal normal "+fontsize+"px "+font,context.fillStyle=color1,context.textBaseline="top";var textWidth=context.measureText(options.unicodelabel),text_x=options.unicodelabel,label_x=Math.floor(canvas.width/2-textWidth.width/2),label_y=1+Math.floor(canvas.height/2-fontsize/2);return context.fillText(text_x,label_x,label_y),canvas.fillColor=color0,canvas}(theoptions),markerOpts={};return theoptions.type="fatmarker",Object.assign(markerOpts,theoptions),window&&window.google&&window.google.maps&&Object.assign(markerOpts,{size:new google.maps.Size(54,48),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(21*scale,36*scale),scaledSize:new google.maps.Size(42*scale,36*scale),scale:scale}),new IconObject(markerCanvas,markerOpts)},createTextMarker:function(theoptions){theoptions.scale=theoptions.scale||.75;var markerCanvas=function(options){var canvas=document.createElement("canvas");canvas.width=48,canvas.height=40;var x=canvas.width/2,y=canvas.height-2,font="'"+options.font+"'"||"Arial",fontsize=options.fontsize||11,context=canvas.getContext("2d");context.clearRect(0,0,canvas.width,canvas.height);var cx=x+28.5,cy=y+13.5,grad=context.createLinearGradient(0,0,0,canvas.height),colors=getColors(options),color0=colors[0],color1=colors[1];grad.addColorStop(0,color0),grad.addColorStop(1,color1),context.fillStyle=grad,context.strokeStyle="rgba(200,200,200,0.7)",context.beginPath(),context.arc(cx-1,cy,30,9*Math.PI/8,-6*Math.PI/8,!1),context.arc(x,(y-7)/2,15,.6,Math.PI-.6,!0),context.arc(2*x-cx+1,cy,30,-.95*Math.PI/3,-Math.PI/8,!1),context.fill(),context.stroke(),context.beginPath(),context.arc(x,.4*y,10,0,2*Math.PI,!1),context.fillStyle="white",context.fill(),context.beginPath(),context.font=fontsize+"pt "+font,context.textBaseline="top";var textWidth=context.measureText(options.label);return(textWidth.width>30||String(options.label).length>3)&&(context.rect(x-2-textWidth.width/2,y-30,x-2+textWidth.width/2,y-23),context.fillStyle="#F7F0F0",context.fill(),context.stroke()),context.fillStyle="black",context.strokeStyle="black",context.fillText(options.label,1+Math.floor(canvas.width/2-textWidth.width/2),8),canvas}(theoptions),markerOpts={};return theoptions.type="textmarker",Object.assign(markerOpts,theoptions),window&&window.google&&window.google.maps&&Object.assign(markerOpts,{size:new google.maps.Size(48,40),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(24*theoptions.scale,40*theoptions.scale),scaledSize:new google.maps.Size(48*theoptions.scale,40*theoptions.scale)}),new IconObject(markerCanvas,markerOpts)},parseColorString:function(somecolor,opacity,darkenfactor){var hsl,rgb,parsedcolor={original:somecolor};return darkenfactor=darkenfactor||1,opacity=opacity||1,rgb=-1!==somecolor.indexOf("hsl")?function(h,s,l,a,darkenfactor){var r,g,b;if(darkenfactor=darkenfactor||1,h=parseFloat(h,10)/360,s=parseFloat(s,10)/100,l=parseFloat(l,10)/100,void 0===a&&(a=1),0===s)r=g=b=l;else{var q=l<.5?l*(1+s):l+s-l*s,p=2*l-q;r=hue2rgb(p,q,h+1/3),g=hue2rgb(p,q,h),b=hue2rgb(p,q,h-1/3)}void 0===a&&(a=1);var rgb={r:Math.round(255*r*darkenfactor),g:Math.round(255*g*darkenfactor),b:Math.round(255*b*darkenfactor),a:parseFloat(a,10)};return rgb.fillColor=rgbaString(rgb),rgb}((hsl=parseHSL(somecolor,opacity)).h,hsl.s,hsl.l,hsl.a,darkenfactor):-1!==somecolor.indexOf("rgb")?parseRGB(somecolor,opacity,darkenfactor):parseHex(somecolor,opacity,darkenfactor),hsl=function(r,g,b,a){r=r%256/255,g=g%256/255,b=b%256/255,void 0===a&&(a=1);var h,s,max=Math.max(r,g,b),min=Math.min(r,g,b),l=(max+min)/2;if(max===min)h=s=0;else{var d=max-min;switch(s=l>.5?d/(2-max-min):d/(max+min),max){case r:h=(g-b)/d+(g<b?6:0);break;case g:h=(b-r)/d+2;break;case b:h=(r-g)/d+4;break;default:h=0}h/=6}var hsl={h:Math.round(360*h),s:Math.round(100*s),l:Math.round(100*l),a:Math.round(100*a)/100};return hsl.fillColor=hslaString(hsl),hsl}(rgb.r,rgb.g,rgb.b,rgb.a),parsedcolor.hsl={h:hsl.h,s:hsl.s,l:hsl.l,a:hsl.a},parsedcolor.rgb={r:rgb.r,g:rgb.g,b:rgb.b,a:rgb.a},parsedcolor.fillColor=rgb.fillColor,parsedcolor.rgba=rgb.fillColor,parsedcolor.hsla=hsl.fillColor,parsedcolor.strokeColor=rgb.strokeColor,parsedcolor.hex=["#",padHex(rgb.r.toString(16)),padHex(rgb.g.toString(16)),padHex(rgb.b.toString(16))].join(""),parsedcolor},autoIcon:function(options){return"object"!=typeof options?(console.warn("autoIcon expects an object as its only parameter"),null):(options.label=String(options.label||"A"),options.color=options.color||"#FF0000",void 0===options.transparent_background&&(options.transparent_background=!0),4===options.label.length||"0x"===options.label.substring(0,2)?(options.font=options.font||"fontello",options.label=(options.label||"e836").slice(-4),options.unicodelabel=String.fromCharCode("0x"+options.label),options.scale=options.scale||1,options.transparent_background?MarkerFactory.createTransparentMarkerIcon(options):MarkerFactory.createFatMarkerIcon(options)):options.shadow?function(theoptions){theoptions.scale=theoptions.scale||1;var markerCanvas=function(options){var canvas=options.canvas||document.createElement("canvas"),radius=18,font=options.font||"fontello",fontsize=options.fontsize||14,context=canvas.getContext("2d");context.createLinearGradient(0,0,0,53),canvas.width=54,canvas.height=54;var colors=getColors(options),color1=(colors[0],colors[1]);context.clearRect(0,0,canvas.width,canvas.height),context.moveTo(27,53);var labelvalue=parseInt(options.label,10);labelvalue<10?(color1="orange",fontsize=14):labelvalue<30?(color1="red",fontsize=15):(color1="purple",fontsize=16),labelvalue>99&&(radius+=3,context.setLineDash([5,5]),context.beginPath(),context.arc(27,28.5,radius+7,0,2*Math.PI,!1),context.fillStyle="transparent",context.strokeStyle=color1,context.lineWidth=2,context.fill(),context.stroke()),context.setLineDash([5,5]),context.beginPath(),context.arc(27,28.5,radius+2,0,2*Math.PI,!1),context.fillStyle="transparent",context.strokeStyle=color1,context.lineWidth=2,context.fill(),context.stroke(),context.setLineDash([5,0]),context.beginPath(),context.arc(27,28.5,radius-3,0,2*Math.PI,!1),context.fillStyle="white",context.strokeStyle=color1,context.lineWidth=4,context.fill(),context.stroke(),context.beginPath(),context.font="normal normal normal "+fontsize+"px "+font,context.fillStyle="#333",context.textBaseline="top";var textWidth=context.measureText(options.label),text_x=options.label,label_x=Math.floor(canvas.width/2-textWidth.width/2),label_y=1+Math.floor(canvas.height/2-fontsize/2);return context.fillText(text_x,label_x,label_y),canvas}(theoptions),markerOpts={},scale=theoptions.scale;return Object.assign(markerOpts,theoptions),window&&window.google&&window.google.maps&&Object.assign(markerOpts,{size:new google.maps.Size(54,48),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(27*scale,24*scale),scaledSize:new google.maps.Size(54*scale,48*scale)}),new IconObject(markerCanvas,markerOpts)}(options):(options.scale=options.scale||.75,options.label=String(options.label||"A"),options.fontsize=options.fontsize||11,options.font=options.font||"Arial",MarkerFactory.createTextMarker(options)))}};exports.MarkerFactory=MarkerFactory,exports.default=MarkerFactory,Object.defineProperty(exports,"__esModule",{value:!0})});
+!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports):"function"==typeof define&&define.amd?define(["exports"],factory):factory(global=global||{})}(this,function(exports){"use strict";function IconObject(canvas,markerOpts){return this.url=canvas.toDataURL(),this.fillColor=canvas.fillColor,this.markerOpts=markerOpts,Object.assign(this,markerOpts),this}function hslaString(hslcolor){return hslcolor.a?"hsla("+hslcolor.h+","+hslcolor.s+"%,"+hslcolor.l+"%,"+hslcolor.a+")":"hsl("+hslcolor.h+","+hslcolor.s+"%,"+hslcolor.l+"%)"}function rgbaString(hexcolor){return hexcolor.a?"rgba("+hexcolor.r+","+hexcolor.g+","+hexcolor.b+","+hexcolor.a+")":"rgb("+hexcolor.r+","+hexcolor.g+","+hexcolor.b+")"}function parseHalf(foo){return parseInt(foo/2,10)}function compact(array){for(var index=-1,length=array?array.length:0,resIndex=0,result=[];++index<length;){var value=array[index];value&&(result[resIndex++]=value)}return result}function parseHex(hexstring,opacity,darkenfactor){var hexcolor={hex:hexstring};return darkenfactor=darkenfactor||1,3===(hexstring=hexstring.replace("#","")).length&&(hexstring=hexstring[0]+hexstring[0]+hexstring[1]+hexstring[1]+hexstring[2]+hexstring[2]),isNaN(parseFloat(opacity,10))&&(opacity=1),hexcolor.r=parseInt(darkenfactor*parseInt(hexstring.substring(0,2),16),10),hexcolor.g=parseInt(darkenfactor*parseInt(hexstring.substring(2,4),16),10),hexcolor.b=parseInt(darkenfactor*parseInt(hexstring.substring(4,6),16),10),hexcolor.a=opacity,hexcolor.fillColor=rgbaString(hexcolor),hexcolor.strokeColor=["rgba("+parseHalf(hexcolor.r),parseHalf(hexcolor.g),parseHalf(hexcolor.b),hexcolor.a+")"].join(","),hexcolor.rgb=hexcolor.fillColor,hexcolor}function parseHSL(hslstring,opacity){var hslcolor={},hslcolor_stroke={},hslparts=compact(hslstring.split(/hsla?\(|,|\)|%/));return void 0===hslparts[3]&&(hslparts[3]=1),isNaN(parseFloat(opacity,10))&&(opacity=1),hslcolor.h=hslcolor_stroke.h=parseFloat(hslparts[0],10),hslcolor.s=hslcolor_stroke.s=parseFloat(hslparts[1],10),hslcolor.l=parseFloat(hslparts[2],10),hslcolor.a=hslcolor_stroke.a=parseFloat(opacity*hslparts[3],10),hslcolor_stroke.l=parseInt(hslcolor.l/2,10),hslcolor.fillColor=hslaString(hslcolor),hslcolor.strokeColor=hslaString(hslcolor_stroke),hslcolor.hsl=hslcolor.fillColor,hslcolor}function parseRGB(rgbstring,opacity,darkenfactor){var rgbcolor={},rgbparts=compact(rgbstring.split(/rgba?\(|,|\)/));return darkenfactor=darkenfactor||1,void 0===rgbparts[3]&&(rgbparts[3]=1),isNaN(parseFloat(opacity,10))&&(opacity=1),rgbcolor.r=parseInt(darkenfactor*(parseInt(rgbparts[0],10)%256),10),rgbcolor.g=parseInt(darkenfactor*(parseInt(rgbparts[1],10)%256),10),rgbcolor.b=parseInt(darkenfactor*(parseInt(rgbparts[2],10)%256),10),rgbcolor.a=parseFloat(opacity*rgbparts[3],10),rgbcolor.fillColor=rgbaString(rgbcolor),rgbcolor.strokeColor="rgba("+rgbcolor.r/2+","+rgbcolor.g/2+","+rgbcolor.b/2+","+rgbcolor.a+")",rgbcolor.rgb=rgbcolor.fillColor,rgbcolor}function hue2rgb(p,q,t){return t<0&&(t+=1),t>1&&(t-=1),t<1/6?p+6*(q-p)*t:t<.5?q:t<2/3?p+(q-p)*(2/3-t)*6:p}function getColors(options){var color0,color1;if(void 0!==options.index&&options.count>0)color0=function(val,range){return hslaString({h:Math.floor(360/range*val),s:78,l:63,a:1})}(options.index,options.count),color1=hslaString({h:1,s:78,l:33,a:1});else{var deccolor=function(stringcolor){var parsedcolor={};return stringcolor?parsedcolor=-1!==stringcolor.indexOf("rgb")?parseRGB(stringcolor):-1!==stringcolor.indexOf("hsl")?parseHSL(stringcolor):parseHex(stringcolor):parsedcolor.fillColor="rgba(100,250,50,0.99)",parsedcolor}(options.color);color0=deccolor.fillColor,color1=function(stringcolor,factor){var darkercolor={};return factor||(factor=1),-1!==stringcolor.fillColor.indexOf("rgb")?(darkercolor.r=factor*parseHalf(stringcolor.r),darkercolor.g=factor*parseHalf(stringcolor.g),darkercolor.b=factor*parseHalf(stringcolor.b),darkercolor.a=.99,darkercolor.fillColor=rgbaString(darkercolor)):-1!==stringcolor.fillColor.indexOf("hsl")&&(darkercolor.h=stringcolor.h,darkercolor.s=stringcolor.s,darkercolor.l=factor*stringcolor.l-30,darkercolor.fillColor=hslaString(darkercolor)),darkercolor}(deccolor).fillColor}return[color0,color1]}function createTextMarker(theoptions){theoptions.scale=theoptions.scale||.75;var markerCanvas=function(options){var canvas=document.createElement("canvas");canvas.width=48,canvas.height=40;var x=canvas.width/2,y=canvas.height-2,font="'"+options.font+"'"||"Arial",fontsize=options.fontsize||11,context=canvas.getContext("2d");context.clearRect(0,0,canvas.width,canvas.height);var cx=x+28.5,cy=y+13.5,grad=context.createLinearGradient(0,0,0,canvas.height),colors=getColors(options),color0=colors[0],color1=colors[1];grad.addColorStop(0,color0),grad.addColorStop(1,color1),context.fillStyle=grad,context.strokeStyle="rgba(200,200,200,0.7)",context.beginPath(),context.arc(cx-1,cy,30,9*Math.PI/8,-6*Math.PI/8,!1),context.arc(x,(y-7)/2,15,.6,Math.PI-.6,!0),context.arc(2*x-cx+1,cy,30,-.95*Math.PI/3,-Math.PI/8,!1),context.fill(),context.stroke(),context.beginPath(),context.arc(x,.4*y,10,0,2*Math.PI,!1),context.fillStyle="white",context.fill(),context.beginPath(),context.font=fontsize+"pt "+font,context.textBaseline="top";var textWidth=context.measureText(options.label);return(textWidth.width>30||String(options.label).length>3)&&(context.rect(x-2-textWidth.width/2,y-30,x-2+textWidth.width/2,y-23),context.fillStyle="#F7F0F0",context.fill(),context.stroke()),context.fillStyle="black",context.strokeStyle="black",context.fillText(options.label,1+Math.floor(canvas.width/2-textWidth.width/2),8),canvas}(theoptions),markerOpts={};return theoptions.type="textmarker",Object.assign(markerOpts,theoptions),window&&window.google&&window.google.maps&&Object.assign(markerOpts,{size:new google.maps.Size(48,40),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(24*theoptions.scale,40*theoptions.scale),scaledSize:new google.maps.Size(48*theoptions.scale,40*theoptions.scale)}),new IconObject(markerCanvas,markerOpts)}function createFatMarkerIcon(theoptions){var scale=theoptions.scale||1,markerCanvas=function(options){var canvas=options.canvas||document.createElement("canvas"),font=options.font||"fontello",fontsize=options.fontsize||14,context=canvas.getContext("2d"),grad=context.createLinearGradient(0,0,0,53);canvas.width=54,canvas.height=54;var colors=getColors(options),color0=colors[0],color1=colors[1];context.clearRect(0,0,canvas.width,canvas.height),grad.addColorStop(0,color0),grad.addColorStop(1,color1),context.fillStyle=grad,context.strokeStyle=color1,context.beginPath(),context.moveTo(27,53),context.arc(27,28.5,18,1.1,Math.PI-1.1,!0),context.lineTo(27,53),context.fill(),context.stroke(),context.beginPath(),context.arc(27,28.5,15,0,2*Math.PI,!1),context.fillStyle="white",context.fill(),context.beginPath(),context.font="normal normal normal "+fontsize+"px "+font,context.fillStyle=color1,context.textBaseline="top";var textWidth=context.measureText(options.unicodelabel),text_x=options.unicodelabel,label_x=Math.floor(canvas.width/2-textWidth.width/2),label_y=1+Math.floor(canvas.height/2-fontsize/2);return context.fillText(text_x,label_x,label_y),canvas.fillColor=color0,canvas}(theoptions),markerOpts={};return theoptions.type="fatmarker",Object.assign(markerOpts,theoptions),window&&window.google&&window.google.maps&&Object.assign(markerOpts,{size:new google.maps.Size(54,48),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(21*scale,36*scale),scaledSize:new google.maps.Size(42*scale,36*scale),scale:scale}),new IconObject(markerCanvas,markerOpts)}function createTransparentMarkerIcon(theoptions){theoptions.scale=theoptions.scale||1,theoptions.fontsize=theoptions.fontsize||26;var markerCanvas=function(options){var text_x,canvas=options.canvas||document.createElement("canvas"),context=canvas.getContext("2d"),font=options.font||"fontello",fontsize=options.fontsize||26;canvas.width=54,canvas.height=48,context.clearRect(0,0,canvas.width,canvas.height);var colors=getColors(options),color0=colors[0],color1=colors[1];if(context.beginPath(),options.shadow){context.font="normal normal normal "+fontsize+"px "+font,context.textBaseline="top";var textWidth=context.measureText(options.unicodelabel);text_x=Math.floor(canvas.width/2-textWidth.width/2),context.shadowOffsetX=-2,context.shadowOffsetY=-2,context.shadowBlur=0,context.fillStyle="#FFFFFF",context.shadowColor="#666666",context.fillText(options.unicodelabel,text_x-4,2),context.fillText(options.unicodelabel,text_x,5),context.fillStyle=color0,context.fillText(options.unicodelabel,text_x+4,8),context.strokeStyle="#FFFFFF",context.strokeText(options.unicodelabel,text_x+4,8)}else{context.font="normal normal normal "+(fontsize-3)+"px "+font,context.textBaseline="top";var textmetric=context.measureText(options.unicodelabel);text_x=Math.floor(canvas.width/2-textmetric.width/2),context.shadowOffsetX=2,context.shadowOffsetY=2,context.shadowBlur=0,context.shadowColor="#FFFFFF",context.fillStyle=color0,context.fillText(options.unicodelabel,text_x+1,6),context.shadowOffsetX=2,context.shadowOffsetY=2,context.shadowBlur=1,context.shadowColor="#FFFFFF",context.strokeStyle=color1,context.strokeText(options.unicodelabel,text_x+1,6)}return canvas.fillColor=color0,canvas}(theoptions),markerOpts={},scale=theoptions.scale;return theoptions.type="transparent",Object.assign(markerOpts,theoptions),window.google&&window.google.maps&&Object.assign(markerOpts,{size:new google.maps.Size(54*scale,48*scale),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(27*scale,24*scale),scaledSize:new google.maps.Size(54*scale,48*scale)}),new IconObject(markerCanvas,markerOpts)}function padHex(str_in){return 1===(""+str_in).length?"0"+String(str_in):String(str_in)}function generateAutoicon(options){var cacheKey=JSON.stringify(options),iconObj=window.sessionStorage.getItem(cacheKey);if(null!==iconObj)return JSON.parse(iconObj);var cached=(iconObj=options.is_icon?options.transparent_background?createTransparentMarkerIcon(options):createFatMarkerIcon(options):createTextMarker(options)).toJSON();return cached.url=iconObj.url,window.sessionStorage.setItem(cacheKey,JSON.stringify(cached)),iconObj}IconObject.prototype.toJSON=function(){return{url:null,markerOpts:this.markerOpts}};var MarkerFactory={createTransparentMarkerIcon:createTransparentMarkerIcon,createFatMarkerIcon:createFatMarkerIcon,createTextMarker:createTextMarker,parseColorString:function(somecolor,opacity,darkenfactor){var hsl,rgb,parsedcolor={original:somecolor};return darkenfactor=darkenfactor||1,opacity=opacity||1,rgb=-1!==somecolor.indexOf("hsl")?function(h,s,l,a,darkenfactor){var r,g,b;if(darkenfactor=darkenfactor||1,h=parseFloat(h,10)/360,s=parseFloat(s,10)/100,l=parseFloat(l,10)/100,void 0===a&&(a=1),0===s)r=g=b=l;else{var q=l<.5?l*(1+s):l+s-l*s,p=2*l-q;r=hue2rgb(p,q,h+1/3),g=hue2rgb(p,q,h),b=hue2rgb(p,q,h-1/3)}void 0===a&&(a=1);var rgb={r:Math.round(255*r*darkenfactor),g:Math.round(255*g*darkenfactor),b:Math.round(255*b*darkenfactor),a:parseFloat(a,10)};return rgb.fillColor=rgbaString(rgb),rgb}((hsl=parseHSL(somecolor,opacity)).h,hsl.s,hsl.l,hsl.a,darkenfactor):-1!==somecolor.indexOf("rgb")?parseRGB(somecolor,opacity,darkenfactor):parseHex(somecolor,opacity,darkenfactor),hsl=function(in_r,in_g,in_b,in_a){var h,r=in_r%256/255,g=in_g%256/255,b=in_b%256/255,a=void 0===in_a?1:in_a,max=Math.max(r,g,b),min=Math.min(r,g,b),sum=max+min,diff=max-min,s=sum>1?diff/(2-sum):diff/sum;switch(max){case r:h=(g-b)/diff+(g<b?6:0);break;case g:h=(b-r)/diff+2;break;case b:h=(r-g)/diff+4;break;default:h=0}h/=6,0===diff&&(h=s=0);var hsl={h:Math.round(360*h),s:Math.round(100*s),l:Math.round(50*sum),a:Math.round(100*a)/100};return hsl.fillColor=hslaString(hsl),hsl}(rgb.r,rgb.g,rgb.b,rgb.a),parsedcolor.hsl={h:hsl.h,s:hsl.s,l:hsl.l,a:hsl.a},parsedcolor.rgb={r:rgb.r,g:rgb.g,b:rgb.b,a:rgb.a},parsedcolor.fillColor=rgb.fillColor,parsedcolor.rgba=rgb.fillColor,parsedcolor.hsla=hsl.fillColor,parsedcolor.strokeColor=rgb.strokeColor,parsedcolor.hex=["#",padHex(rgb.r.toString(16)),padHex(rgb.g.toString(16)),padHex(rgb.b.toString(16))].join(""),parsedcolor},autoIcon:function(options){return"object"!=typeof options?(console.warn("autoIcon expects an object as its only parameter"),null):(options.transparent_background=!1!==options.transparent_background,options.label=String(options.label||"A"),options.color=options.color||"#FF0000",4===options.label.length||"0x"===options.label.substring(0,2)?(options.font=options.font||"fontello",options.label=(options.label||"e836").slice(-4),options.unicodelabel=String.fromCharCode("0x"+options.label),options.scale=options.scale||1,options.is_icon=!0,generateAutoicon(options)):options.shadow?function(theoptions){theoptions.scale=theoptions.scale||1;var markerCanvas=function(options){var color1,canvas=options.canvas||document.createElement("canvas"),radius=18,font=options.font||"fontello",fontsize=options.fontsize||14,context=canvas.getContext("2d");canvas.width=54,canvas.height=54,context.clearRect(0,0,canvas.width,canvas.height),context.moveTo(27,53);var labelvalue=parseInt(options.label,10);labelvalue<10?(color1="orange",fontsize=14):labelvalue<30?(color1="red",fontsize=15):(color1="purple",fontsize=16),labelvalue>99&&(radius+=3,context.setLineDash([5,5]),context.beginPath(),context.arc(27,28.5,radius+7,0,2*Math.PI,!1),context.fillStyle="transparent",context.strokeStyle=color1,context.lineWidth=2,context.fill(),context.stroke()),context.setLineDash([5,5]),context.beginPath(),context.arc(27,28.5,radius+2,0,2*Math.PI,!1),context.fillStyle="transparent",context.strokeStyle=color1,context.lineWidth=2,context.fill(),context.stroke(),context.setLineDash([5,0]),context.beginPath(),context.arc(27,28.5,radius-3,0,2*Math.PI,!1),context.fillStyle="white",context.strokeStyle=color1,context.lineWidth=4,context.fill(),context.stroke(),context.beginPath(),context.font="normal normal normal "+fontsize+"px "+font,context.fillStyle="#333",context.textBaseline="top";var textWidth=context.measureText(options.label),text_x=options.label,label_x=Math.floor(canvas.width/2-textWidth.width/2),label_y=1+Math.floor(canvas.height/2-fontsize/2);return context.fillText(text_x,label_x,label_y),canvas}(theoptions),markerOpts={},scale=theoptions.scale;return Object.assign(markerOpts,theoptions),window&&window.google&&window.google.maps&&Object.assign(markerOpts,{size:new google.maps.Size(54,48),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(27*scale,24*scale),scaledSize:new google.maps.Size(54*scale,48*scale)}),new IconObject(markerCanvas,markerOpts)}(options):(options.scale=options.scale||.75,options.label=String(options.label||"A"),options.fontsize=options.fontsize||11,options.font=options.font||"Arial",generateAutoicon(options)))}};exports.MarkerFactory=MarkerFactory,Object.defineProperty(exports,"__esModule",{value:!0})});
 //# sourceMappingURL=markerfactory.min.js.map

package.json

 {
   "name": "ig_markerfactory",
-  "version": "2.11.1",
+  "version": "2.12.0",
   "description": "Uses canvas to generate google.maps.Marker Icons from graphic fonts (i.e. font-awesome) on the fly",
@@ -47,15 +47,15 @@ "keywords": [
   "scripts": {
-    "test": "karma start"
+    "test": "karma start",
+    "build": "rollup -c"
   },
   "devDependencies": {
-    "babel-eslint": "^8.0.2",
+    "babel-eslint": "^10.0.1",
     "eslint": "^4.19.1",
     "jasmine-core": "^3.1.0",
-    "karma": "^2.0.0",
+    "karma": "^3.1.1",
     "karma-jasmine": "^1.1.1",
     "karma-mocha-reporter": "^2.2.5",
     "karma-phantomjs-launcher": "^1.0.4",
-    "lodash": "^4",
     "phantomjs-prebuilt": "^2.1.16",
-    "rollup": "^0.50.0",
+    "rollup": "^0.67.0",
     "rollup-plugin-replace": "^2.0.0",
@@ -66,4 +66,4 @@ "rollup-plugin-strip": "^1.1.1",
   "dependencies": {
-    "serve": "^6.5.3"
+    "serve": "^10.0.2"
   }
-}
+}

README.md

@@ -136,3 +136,3 @@ # IG MarkerFactory
 ```js
-import MarkerFactory from 'ig_markerfactory/dist/markerfactory.es6';
+import {MarkerFactory} from 'ig_markerfactory/dist/markerfactory.es6';
 
@@ -139,0 +139,0 @@ const myIcon = MarkerFactory.autoIcon({

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

117139

increased by5.38%

Dev dependency count

12

decreased by-7.69%

Lines of code

1626

increased by19.12%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@zeit/schemas@2.6.0(transitive)

• + Addedajv@6.5.3(transitive)

• + Addedbalanced-match@1.0.2(transitive)

• + Addedbrace-expansion@1.1.11(transitive)

• + Addedcompression@1.7.3(transitive)

• + Addedconcat-map@0.0.1(transitive)

• + Addedcontent-disposition@0.5.2(transitive)

• + Addedfast-deep-equal@2.0.1(transitive)

• + Addedfast-json-stable-stringify@2.1.0(transitive)

• + Addedfast-url-parser@1.1.3(transitive)

• + Addedjson-schema-traverse@0.4.1(transitive)

• + Addedminimatch@3.0.4(transitive)

• + Addedpath-to-regexp@2.2.1(transitive)

• + Addedpunycode@1.4.12.3.1(transitive)

• + Addedrange-parser@1.2.0(transitive)

• + Addedserve@10.1.2(transitive)

• + Addedserve-handler@5.0.8(transitive)

• + Addedupdate-check@1.5.2(transitive)

• + Addeduri-js@4.4.1(transitive)

• - Removedaddress@1.2.2(transitive)

• - Removedalign-text@0.1.4(transitive)

• - Removedamdefine@1.0.1(transitive)

• - Removedargs@4.0.0(transitive)

• - Removedasync@1.5.2(transitive)

• - Removedbasic-auth@2.0.0(transitive)

• - Removedbluebird@3.5.1(transitive)

• - Removedcamelcase@1.2.15.0.0(transitive)

• - Removedcenter-align@0.1.3(transitive)

• - Removedchalk@2.3.22.4.0(transitive)

• - Removedcliui@2.1.0(transitive)

• - Removedcompression@1.7.4(transitive)

• - Removedcontent-type@1.0.4(transitive)

• - Removeddargs@5.1.0(transitive)

• - Removeddecamelize@1.2.0(transitive)

• - Removeddepd@1.1.11.1.2(transitive)

• - Removeddestroy@1.0.4(transitive)

• - Removeddetect-port@1.2.3(transitive)

• - Removedee-first@1.1.1(transitive)

• - Removedencodeurl@1.0.2(transitive)

• - Removedescape-html@1.0.3(transitive)

• - Removedetag@1.8.1(transitive)

• - Removedfilesize@3.6.1(transitive)

• - Removedfresh@0.5.2(transitive)

• - Removedfs-extra@6.0.1(transitive)

• - Removedgraceful-fs@4.2.11(transitive)

• - Removedhandlebars@4.0.11(transitive)

• - Removedhttp-errors@1.6.2(transitive)

• - Removediconv-lite@0.4.19(transitive)

• - Removedinherits@2.0.3(transitive)

• - Removedip@1.1.5(transitive)

• - Removedis-buffer@1.1.6(transitive)

• - Removedis-wsl@1.1.0(transitive)

• - Removedjsonfile@4.0.0(transitive)

• - Removedkind-of@3.2.2(transitive)

• - Removedlazy-cache@1.0.4(transitive)

• - Removedleven@2.1.0(transitive)

• - Removedlongest@1.0.1(transitive)

• - Removedmicro@9.3.1(transitive)

• - Removedmicro-compress@1.0.0(transitive)

• - Removedmime@1.4.1(transitive)

• - Removedminimist@0.0.10(transitive)

• - Removedmri@1.1.0(transitive)

• - Removednode-version@1.1.3(transitive)

• - Removedon-finished@2.3.0(transitive)

• - Removedopenssl-self-signed-certificate@1.1.6(transitive)

• - Removedopn@5.3.0(transitive)

• - Removedoptimist@0.6.1(transitive)

• - Removedpath-type@3.0.0(transitive)

• - Removedpify@3.0.0(transitive)

• - Removedrange-parser@1.2.1(transitive)

• - Removedraw-body@2.3.2(transitive)

• - Removedrepeat-string@1.6.1(transitive)

• - Removedright-align@0.1.3(transitive)

• - Removedsafe-buffer@5.1.1(transitive)

• - Removedsend@0.16.2(transitive)

• - Removedserve@6.5.8(transitive)

• - Removedsetprototypeof@1.0.3(transitive)

• - Removedsource-map@0.4.40.5.7(transitive)

• - Removedstatuses@1.4.01.5.0(transitive)

• - Removeduglify-js@2.8.29(transitive)

• - Removeduglify-to-browserify@1.0.2(transitive)

• - Removeduniversalify@0.1.2(transitive)

• - Removedunpipe@1.0.0(transitive)

• - Removedupdate-check@1.5.1(transitive)

• - Removedwindow-size@0.1.0(transitive)

• - Removedwordwrap@0.0.20.0.3(transitive)

• - Removedyargs@3.10.0(transitive)

• Updatedserve@^10.0.2