TomTom Maps SDK for JavaScript
This is the documentation of version 1.0.0-rc.4. Go to the latest version, 1.0.0-rc.5.
TomTom Maps for JavaScript
    Preparing search index...

    Type Alias ExtraGeometryDisplayProps

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

    Extra properties that set a geometry's colour and title on the map.

    They customize how polygon geometries render, including visual styling and labelling.

    Type Declaration

    • Optionalcolor?: string

      The geometry's fill colour.

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

      Colour 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'
    • OptionalfillStyle?: GeometryFillStyle

      How this feature is filled, overriding the module's fill.style.

    • Optionaltitle?: string

      The geometry's display title.

      The text of the polygon's center and border labels, unless the module's label.title or lineLabel.title sets theirs. If not provided, a text label.title fills it in, then the feature's address.freeformAddress. With neither, no label is 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'

    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