ig_markerfactory
Advanced tools
Comparing version 2.11.1 to 2.12.0
@@ -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; |
@@ -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 }); | ||
}))); |
@@ -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 |
{ | ||
"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" | ||
} | ||
} | ||
} |
@@ -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({ |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage 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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
117139
12
1626
1
+ 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)
+ Addedmime-db@1.53.0(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