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

    Type Alias PlaceLabelConfig<P>

    PlaceLabelConfig: LabelConfig & {
        offset?: number;
        title?:
            | ((place: Place<P>) => string)
            | DataDrivenPropertyValueSpecification<string>;
    }

    The content, look and position of the labels next to place markers.

    Type Parameters

    Type Declaration

    • Optionaloffset?: 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
    • Optionaltitle?: ((place: Place<P>) => 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). The function receives places of the shape the module was created for.

      // 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

    An unset LabelConfig field keeps the marker type's own label: under base-map the map style's POI labels; otherwise #333333 text on a #FFFFFF halo (the reverse on a dark map), 14 to 16 pixels and a 1 to 1.5 pixel halo as the zoom grows, fully opaque. The label of a hovered or clicked place takes PlacesModuleConfig.color instead.

    Set labels here rather than with MapLibre's setPaintProperty / setLayoutProperty on the module's layers: a style change and a marker type change rebuild those layers from this config, dropping anything written on them directly. title as a function of the place has no MapLibre equivalent at all.

    // Simple text from place name
    const label: PlaceLabelConfig = {
      title: (place) => place.properties.poi?.name || place.properties.address.freeformAddress
    };

    // Using MapLibre expression with styling
    const styledLabel: PlaceLabelConfig = {
      title: ['get', 'title'],
      size: 14,
      color: '#333',
      haloColor: '#fff',
      haloWidth: 2
    };

    Settings
    Member Visibility