TomTom Maps for JavaScript
    Preparing search index...

    Type Alias PlaceIconConfig

    Configuration for place marker icons.

    Controls the visual appearance of place markers including custom icons.

    // Custom icons for specific categories
    const iconConfig: PlaceIconConfig = {
    categoryIcons: [
    { category: 'RESTAURANT', image: '/icons/food.png', pixelRatio: 2 },
    { category: 'HOTEL_MOTEL', image: '/icons/hotel.png', pixelRatio: 2 }
    ]
    };
    type PlaceIconConfig = {
        categoryIcons?: CustomImage<MapStylePOICategory>[];
        default?: DefaultPlaceIconConfig;
        mapping?:
            | { fn: (place: Place) => string; to: "imageID" }
            | { fn: (place: Place) => MapStylePOICategory; to: "poiCategory" };
    }
    Index

    Properties

    categoryIcons?: CustomImage<MapStylePOICategory>[]

    Array of custom icons for specific place categories.

    When provided, places matching these categories will use the custom icons instead of the default style.

    Configuration for the default place icon.

    • The default icon is the one used for clicked locations and addresses without a specific category, or via custom mapping.
    mapping?:
        | { fn: (place: Place) => string; to: "imageID" }
        | { fn: (place: Place) => MapStylePOICategory; to: "poiCategory" }

    Custom mapping to determine the icon for a given place.

    Supports two mapping strategies:

    • imageID: Directly returns the icon image ID to use for the place. This provides full control over icon selection.

    • poiCategory: Returns a POI category, which is then resolved to an icon using the existing category-to-icon logic. This reuses the standard category mapping.

    // Direct image ID mapping
    mapping: {
    to: 'imageID',
    fn: (place) => place.properties.poi?.name?.includes('urgent') ? 'urgent-icon' : 'default-icon'
    }

    // POI category mapping
    mapping: {
    to: 'poiCategory',
    fn: (place) => place.properties.customCategory || 'RESTAURANT'
    }