TomTom Maps for JavaScript
    Preparing search index...

    Type Alias PlaceDisplayProps

    PlaceDisplayProps: {
        category?: string;
        iconID: string;
        id: string;
        title?: string;
    } & SupportsEvents & Anything

    Properties to display a place on the map.

    Extends basic place information with display-specific properties needed for rendering markers, icons, and labels on the map.

    Type Declaration

    • Optionalcategory?: string

      Map-style-compatible display category, mostly applicable for base-map places.

      Used to match the place with a POI category in the map style, enabling category-specific styling and filtering.

      Common Categories:

      • RESTAURANT
      • HOTEL_MOTEL
      • GAS_STATION
      • PARKING_GARAGE
      • SHOPPING

      Optional - only needed when using base-map styling or category-based filtering.

      category: 'RESTAURANT'
      category: 'HOTEL_MOTEL'
      category: 'EV_CHARGING_STATION'
      category: undefined  // No category association
    • iconID: string

      Icon ID referencing the map style sprite.

      References an icon image in the map's sprite sheet. The icon must exist in the map style or be added programmatically.

      Icon Types:

      • Built-in POI icons (e.g., 'poi-restaurant', 'poi-hotel')
      • Custom icons added to the sprite
      • Pin/marker icons (e.g., 'pin-red', 'pin-blue')
      iconID: 'poi-restaurant'
      iconID: 'pin-red'
      iconID: 'custom-marker'
    • id: string

      Unique identifier for the place feature.

      MapLibre does not reuse the feature IDs. Either we generate it on the fly or use the one from properties via promotedId value.

      Used for:

      • Feature identification in events
      • State management
      • Data updates
      id: 'place-123'
      id: 'poi-456'
    • Optionaltitle?: string

      Display title for the place on the map.

      Optional text label shown near the place marker. If not provided, no text label will be displayed.

      Common Sources:

      • POI name (e.g., "Starbucks")
      • Address (e.g., "123 Main Street")
      • Custom label (e.g., "Meeting Point")
      title: 'Amsterdam Central Station'
      title: 'Starbucks'
      title: '123 Main Street'
      title: undefined  // No label

    Use Cases:

    • Search result markers
    • POI markers
    • Custom location pins
    • EV charging station markers

    These properties control how the place appears visually on the map, including its icon, label, and interactive states.

    const locationProps: LocationDisplayProps = {
      id: 'place-123',
      title: 'Central Station',
      iconID: 'poi-transit',
      category: 'RAILWAY_STATION',
      eventState: 'hover'
    };

    Settings

    Member Visibility