Text and Icon Layers

/**
 * Composite layer for rendering text labels with advanced typography
 */
class TextLayer<DataT = any> extends CompositeLayer<TextLayerProps<DataT>> {
  static layerName: string;
  static defaultProps: DefaultProps<TextLayerProps<any>>;
}

interface TextLayerProps<DataT> extends LayerProps {
  data: LayerDataSource<DataT>;
  
  /** Always face camera */
  billboard?: boolean;
  /** Text size scaling multiplier */
  sizeScale?: number;
  /** Units for text size */
  sizeUnits?: Unit;
  /** Minimum text size in pixels */
  sizeMinPixels?: number;
  /** Maximum text size in pixels */
  sizeMaxPixels?: number;
  
  /** Render text background */
  background?: boolean;
  /** Character set for font atlas generation */
  characterSet?: FontSettings['characterSet'] | 'auto';
  /** Font family name */
  fontFamily?: string;
  /** Font weight (normal, bold, etc.) */
  fontWeight?: string | number;
  /** Line height multiplier */
  lineHeight?: number;
  /** Text outline width in pixels */
  outlineWidth?: number;
  /** Text outline color [r,g,b,a] (0-255) */
  outlineColor?: Color;
  /** Text wrapping behavior */
  wordBreak?: 'break-word' | 'break-all';
  /** Maximum text width before wrapping */
  maxWidth?: number;
  /** Font settings object */
  fontSettings?: FontSettings;
  
  /** Accessor for text content */
  getText?: AccessorFunction<DataT, string>;
  /** Accessor for text position */
  getPosition?: Accessor<DataT, Position>;
  /** Accessor for text color [r,g,b,a] (0-255) */
  getColor?: Accessor<DataT, Color>;
  /** Accessor for text size */
  getSize?: Accessor<DataT, number>;
  /** Accessor for text rotation in degrees */
  getAngle?: Accessor<DataT, number>;
  /** Accessor for horizontal alignment */
  getTextAnchor?: Accessor<DataT, 'start' | 'middle' | 'end'>;
  /** Accessor for vertical alignment */
  getAlignmentBaseline?: Accessor<DataT, 'top' | 'center' | 'bottom'>;
  /** Accessor for pixel offset [x, y] */
  getPixelOffset?: Accessor<DataT, [number, number]>;
  
  // Background properties
  /** Accessor for background color [r,g,b,a] (0-255) */
  getBackgroundColor?: Accessor<DataT, Color>;
  /** Border radius for background (pixels or [topLeft, topRight, bottomLeft, bottomRight]) */
  backgroundBorderRadius?: number | [number, number, number, number];
  /** Background padding [horizontal, vertical] or [top, right, bottom, left] */
  backgroundPadding?: [number, number] | [number, number, number, number];
  /** Accessor for border color [r,g,b,a] (0-255) */
  getBorderColor?: Accessor<DataT, Color>;
  /** Accessor for border width */
  getBorderWidth?: Accessor<DataT, number>;
}

interface FontSettings {
  fontSize?: number;
  buffer?: number;
  sdf?: boolean;
  radius?: number;
  cutoff?: number;
  characterSet?: string | string[];
}

import { TextLayer } from "@deck.gl/layers";

const layer = new TextLayer({
  id: 'text',
  data: [
    {
      text: 'Hello World', 
      position: [0, 0], 
      color: [255, 255, 255],
      size: 32
    }
  ],
  getText: d => d.text,
  getPosition: d => d.position,
  getColor: d => d.color,
  getSize: d => d.size,
  getTextAnchor: 'middle',
  getAlignmentBaseline: 'center',
  fontFamily: 'Arial',
  fontWeight: 'bold'
});

/**
 * Layer for rendering icons from icon atlases
 */
class IconLayer<DataT = any> extends Layer<IconLayerProps<DataT>> {
  static layerName: string;
  static defaultProps: DefaultProps<IconLayerProps<any>>;
}

interface IconLayerProps<DataT> extends LayerProps {
  data: LayerDataSource<DataT>;
  
  /** Icon atlas texture (URL, Image, or Texture object) */
  iconAtlas?: string | Texture;
  /** Icon definitions mapping icon names to atlas coordinates */
  iconMapping?: string | IconMapping;
  
  /** Icon size scaling multiplier */
  sizeScale?: number;
  /** Units for icon size */
  sizeUnits?: Unit;
  /** Minimum icon size in pixels */
  sizeMinPixels?: number;
  /** Maximum icon size in pixels */
  sizeMaxPixels?: number;
  
  /** Always face camera */
  billboard?: boolean;
  /** Alpha threshold for transparency (0-1) */
  alphaCutoff?: number;
  /** WebGL texture parameters */
  textureParameters?: SamplerProps;
  
  /** Error handler for icon loading failures */
  onIconError?: ((context: LoadIconErrorContext) => void) | null;
  
  /** Accessor for icon position */
  getPosition?: Accessor<DataT, Position>;
  /** Accessor for icon name or definition */
  getIcon?: AccessorFunction<DataT, string | UnpackedIcon>;
  /** Accessor for icon color [r,g,b,a] (0-255) */
  getColor?: Accessor<DataT, Color>;
  /** Accessor for icon size */
  getSize?: Accessor<DataT, number>;
  /** Accessor for icon rotation in degrees */
  getAngle?: Accessor<DataT, number>;
  /** Accessor for pixel offset [x, y] */
  getPixelOffset?: Accessor<DataT, [number, number]>;
}

interface IconMapping {
  [iconName: string]: {
    x: number;
    y: number;
    width: number;
    height: number;
    anchorX?: number;
    anchorY?: number;
    mask?: boolean;
  };
}

interface UnpackedIcon {
  x: number;
  y: number;
  width: number;
  height: number;
  anchorX?: number;
  anchorY?: number;
  mask?: boolean;
}

interface LoadIconErrorContext {
  url: string;
  source: string;
  loadOptions: any;
  error: Error;
}

import { IconLayer } from "@deck.gl/layers";

const iconMapping = {
  marker: {x: 0, y: 0, width: 128, height: 128, mask: true}
};

const layer = new IconLayer({
  id: 'icons',
  data: [
    {position: [0, 0], icon: 'marker', color: [255, 0, 0], size: 64}
  ],
  iconAtlas: 'path/to/icons.png',
  iconMapping,
  getPosition: d => d.position,
  getIcon: d => d.icon,
  getColor: d => d.color,
  getSize: d => d.size,
  sizeUnits: 'pixels',
  pickable: true
});

// Text with line breaks
const multiLineData = [
  {
    text: 'Line 1\nLine 2\nLine 3',
    position: [0, 0]
  }
];

const textLayer = new TextLayer({
  data: multiLineData,
  getText: d => d.text,
  getPosition: d => d.position,
  lineHeight: 1.2,
  getTextAnchor: 'middle',
  getAlignmentBaseline: 'center'
});

const textWithBackground = new TextLayer({
  data: textData,
  getText: d => d.text,
  getPosition: d => d.position,
  getColor: [255, 255, 255],
  background: true,
  getBackgroundColor: [0, 0, 0, 180],
  backgroundBorderRadius: 4,
  backgroundPadding: [8, 4],
  getBorderColor: [255, 255, 255],
  getBorderWidth: 1
});

const customFontLayer = new TextLayer({
  data: textData,
  getText: d => d.text,
  getPosition: d => d.position,
  characterSet: 'auto', // or specific character array
  fontSettings: {
    fontSize: 48,
    buffer: 2,
    sdf: true,
    radius: 8
  }
});

const iconMapping = {
  'pin': {
    x: 0, y: 0, width: 32, height: 32,
    anchorX: 16, anchorY: 32, // Anchor at bottom center
    mask: true // Use as color mask
  },
  'circle': {
    x: 32, y: 0, width: 32, height: 32,
    anchorX: 16, anchorY: 16, // Anchor at center
    mask: false // Use original colors
  }
};

const iconLayer = new IconLayer({
  data: pointsData,
  getIcon: d => d.type === 'important' ? 'pin' : 'circle',
  getColor: d => d.type === 'important' ? [255, 0, 0] : [0, 255, 0],
  getSize: d => d.importance * 20,
  iconAtlas: iconAtlasTexture,
  iconMapping
});

class _MultiIconLayer<DataT = any> extends Layer<MultiIconLayerProps<DataT>>;
class _TextBackgroundLayer<DataT = any> extends Layer<TextBackgroundLayerProps<DataT>>;