in src/app/services/styles.service.ts [203:245]
getIcon(radius: number, color: string, opacity: number) {
const iconCacheKey = `${radius}:${color}:${opacity}`;
const imageCacheKey = `${color}:${opacity}`;
// Use cached icon if available.
if (this.iconCache.has(iconCacheKey)) {
return this.iconCache.get(iconCacheKey);
}
// Use large, scaled icon rather than new image for each size.
const iconRadius = 256;
const iconWidth = 512;
// Used cached image if available.
if (!this.imageCache.has(imageCacheKey)) {
// Parse color and apply opacity.
const parsedColor = d3Color.color(color);
parsedColor.opacity = opacity;
// Create canvas and render circle.
const canvas = document.createElement('canvas');
canvas.height = canvas.width = iconWidth;
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(iconRadius, iconRadius, iconRadius - 0.5, 0, Math.PI * 2);
ctx.fillStyle = String(parsedColor);
ctx.strokeStyle = null;
ctx.fill();
// Cache the image.
this.imageCache.set(imageCacheKey, canvas.toDataURL());
}
// Cache and return result.
const icon = {
url: this.imageCache.get(imageCacheKey),
size: new google.maps.Size(iconWidth, iconWidth),
scaledSize: new google.maps.Size(radius * 2, radius * 2),
anchor: new google.maps.Point(radius, radius)
};
this.iconCache.set(iconCacheKey, icon);
return icon;
}