getIcon()

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;
  }