TomTom Maps for JavaScript
    Preparing search index...

    Type Alias PlaceTextConfig

    Configuration for place text labels.

    Controls how text labels are displayed next to place markers, including content, styling, and positioning.

    All text properties support both functions (for dynamic values) and MapLibre expressions (for data-driven styling).

    // Simple text from place name
    const textConfig: PlaceTextConfig = {
      field: (place) => place.properties.poi?.name || place.properties.address.freeformAddress
    };

    // Using MapLibre expression with styling
    const textConfig: PlaceTextConfig = {
      field: ['get', 'title'],
      size: 14,
      color: '#333',
      haloColor: '#fff',
      haloWidth: 2
    };
    type PlaceTextConfig = {
        color?: DataDrivenPropertyValueSpecification<string>;
        font?: DataDrivenPropertyValueSpecification<MapFont[]>;
        haloColor?: DataDrivenPropertyValueSpecification<string>;
        haloWidth?: DataDrivenPropertyValueSpecification<number>;
        offset?: number;
        size?: DataDrivenPropertyValueSpecification<number>;
        title?:
            | ((place: Place) => string)
            | DataDrivenPropertyValueSpecification<string>;
    }
    Index

    Properties

    color? font? haloColor? haloWidth? offset? size? title?

    Properties

    color?: DataDrivenPropertyValueSpecification<string>

    Text color.

    '#000000'

    color: '#333333'

    // Category-based colors
    color: ['match', ['get', 'category'], 'RESTAURANT', '#D32F2F', '#1976D2']
    font?: DataDrivenPropertyValueSpecification<MapFont[]>

    Font face(s) to use for the text.

    font: ['Open Sans Bold', 'Arial Unicode MS Bold']
    haloColor?: DataDrivenPropertyValueSpecification<string>

    Text halo (outline) color for better readability.

    '#FFFFFF'

    haloColor: '#fff'
    haloWidth?: DataDrivenPropertyValueSpecification<number>

    Text halo (outline) width in pixels.

    1

    haloWidth: 2  // Thicker outline for better contrast
    offset?: number

    Text offset from the icon in ems.

    Applies uniformly to all anchor positions (top, left, right). Positive values increase distance from icon.

    undefined (uses automatic offset calculation based on icon size)

    offset: 1.5  // Position text 1.5em away from icon in whichever direction the renderer chooses
    size?: DataDrivenPropertyValueSpecification<number>

    Font size in pixels.

    12

    size: 14

    // Data-driven size based on importance
    size: ['interpolate', ['linear'], ['get', 'priority'], 1, 16, 10, 10]
    title?:
        | ((place: Place) => string)
        | DataDrivenPropertyValueSpecification<string>

    Text content for the label.

    Can be a function that extracts text from the place properties (data-based), or a MapLibre expression for data-driven content (data-driven layer-based).

    // Function
    title: (place) => place.properties.poi?.name || 'Unknown'

    // MapLibre expression
    title: ['get', 'title']

    // Conditional expression
    title: ['case', ['has', 'name'], ['get', 'name'], ['get', 'address']]

    https://maplibre.org/maplibre-style-spec/types/#formatted

    Settings

    Member Visibility

    On This Page

    Properties