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

    Type Alias PlaceIconConfig<P>

    Configuration for place marker icons.

    Controls the visual appearance of place markers including custom icons.

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

    Type Parameters

    Index
    categoryIcons? default? mapping?
    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.

    default?: DefaultPlaceIconConfig

    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<P>) => string; to: "imageID" }
        | { fn: (place: Place<P>) => 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.

    fn receives places of the shape the module was created for, so it reads your own properties typed.

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

    // POI category mapping, from a property of your own
    type Venue = CommonPlaceProps & { venueCategory?: MapStylePOICategory };
    await PlacesModule.create<Venue>(map, {
      icon: { mapping: { to: 'poiCategory', fn: (place) => place.properties.venueCategory ?? 'RESTAURANT' } },
    });

    Settings
    Member Visibility

    On This Page
    Properties