TomTom Maps SDK for JavaScript
This is the documentation of version 0.63.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?: IconMapping<Place<P>>;
    }

    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.

    A place takes the entry for its own category, else the first entry for the map category its category falls in, as the map's own POIs do: RESTAURANT reaches an ITALIAN_RESTAURANT, and CAFE a CAFE_PUB. That second match takes only entries with an image and no availabilityLevel, so the same list given to POIsModuleConfig.icon restyles both alike.

    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?: IconMapping<Place<P>>

    Custom mapping to determine the icon for a given place.

    fn receives places of the shape the module was created for, so it reads your own properties typed. A poiCategory resolves through the marker type, as a place's own category does.

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