TomTom Maps for JavaScript
    Preparing search index...

    Type Alias ExtraGeometryDisplayProps

    ExtraGeometryDisplayProps: { color?: string; title?: string } & SupportsEvents & Anything

    Extra properties to display color and title for a geometry on the map.

    Provides customization options for rendering polygon geometries, including visual styling and labeling.

    Type Declaration

    • Optionalcolor?: string

      Fill color for the geometry.

      Overrides the default fill color from the module configuration. Accepts any valid CSS color value.

      Color Formats:

      • Hex: '#FF5733'
      • RGB: 'rgb(255, 87, 51)'
      • RGBA: 'rgba(255, 87, 51, 0.5)'
      • Named: 'red', 'blue', 'green'
      color: '#FF5733'
      color: 'rgb(0, 128, 255)'
      color: 'rgba(255, 0, 0, 0.5)'
      color: 'red'
    • Optionaltitle?: string

      Display title for the geometry.

      Optional text label displayed at the center of the polygon. If not provided, no label will be shown.

      Common Uses:

      • Area names (e.g., "Downtown", "Zone A")
      • Statistics (e.g., "30 min reachable")
      • Custom labels
      title: 'Amsterdam City Center'
      title: 'Zone A'
      title: '30 min driving range'
      title: undefined  // No label

    Use Cases:

    • Search result boundaries (e.g., city limits, postal codes)
    • Reachable range polygons
    • Delivery zones
    • Custom area highlights

    These properties override default styling and allow per-feature customization.

    const geometryProps: ExtraGeometryDisplayProps = {
      title: 'Amsterdam City Center',
      color: '#FF5733',
      eventState: 'click'
    };

    // With custom properties
    const customProps: ExtraGeometryDisplayProps = {
      title: 'Delivery Zone A',
      color: '#00FF00',
      zoneId: 'zone-a',
      capacity: 100
    };

    Settings

    Member Visibility