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

    Type Alias PlacesModuleConfig<P>

    PlacesModuleConfig: MapModuleCommonConfig & {
        beforeLayerConfig?: PlacesBeforeLayerConfig;
        cluster?: PlacesClusterConfig;
        color?: string;
        connections?: PlaceConnectionsConfig;
        entryPoints?: PlaceEntryPointsConfig;
        extraFeatureProps?: Record<string, ExtraFeatureProp<P>>;
        icon?: PlaceIconConfig<P>;
        label?: PlaceLabelConfig<P>;
        layers?: PlaceLayersConfig;
        markerType?: PlacesMarkerType;
        visible?: boolean;
    }

    The options of the PlacesModule, which control the look and behaviour of place markers and labels on the map.

    Type Parameters

    Type Declaration

    • OptionalbeforeLayerConfig?: PlacesBeforeLayerConfig

      Where the module's layers sit in the map's layer stack, for everything it draws or per part.

      By default, every layer sits where PlacesBeforeLayerConfig describes.

    • Optionalcluster?: PlacesClusterConfig

      How the pin-clustered marker type clusters places and draws the cluster badge.

    • Optionalcolor?: string

      The colour of this module's own drawing, which covers the default pin fill, the label of a hovered or clicked place, connection lines and entry points. Connection labels take a darker shade of it on a light map and a lighter one on a dark map. Entry points take the darker one on a light map.

      A more specific setting wins for its element. That is icon.default.style.fillColor for the pin, and label.color or a layers.* paint override for a label or layer. By default, it is the map's accent colour (TomTomMap.mapColors), or the SDK's own colours without one. Cluster badges don't take it, as PlaceClusterBadgeConfig.color sets them.

    • Optionalconnections?: PlaceConnectionsConfig

      The connection lines drawn between places with PlacesModule.showConnections.

      If omitted, connections drawn with showConnections use default styling (a dashed line) and no label.

    • OptionalentryPoints?: PlaceEntryPointsConfig

      How to draw the entry points of the shown places.

      If omitted, entry points are not drawn.

    • OptionalextraFeatureProps?: Record<string, ExtraFeatureProp<P>>

      Extra properties to compute for each place feature.

      They are added to the feature, where styling expressions and event handlers can use them. Each value is static or computed from the place data.

      Use them to:

      • Add computed flags for conditional styling with the 'layers' config.
      • Extract nested properties for easier access.
      • Add business logic properties.
      extraFeatureProps: {
      // Static property
      source: 'search-results',

      // Computed property
      category: (place) => place.properties.poi?.categories?.[0],
      brand: (place) => place.properties.poi?.brands?.[0] ?? '',
      hasOpeningHours: (place) => !!place.properties.poi?.openingHours,

      // Complex computation
      distanceFromCenter: (place) => {
      const coords = place.geometry.coordinates;
      return Math.sqrt(Math.pow(coords[0] - 4.9, 2) + Math.pow(coords[1] - 52.3, 2));
      }
      }
    • Optionalicon?: PlaceIconConfig<P>

      The default pin, and custom icons per place category.

    • Optionallabel?: PlaceLabelConfig<P>

      The labels next to place markers: their content, styling and position.

    • Optionallayers?: PlaceLayersConfig

      MapLibre overrides for the places layers, for control the other settings do not offer.

      Each override lays its layout and paint properties over the layer's own, one by one, and wins over label and color for the properties it names.

    • OptionalmarkerType?: PlacesMarkerType

      The kind of marker all places are drawn with.

      PlaceIconConfig.categoryIcons replace its icon for the categories they name, under every marker type.

      'pin'
      
    • Optionalvisible?: boolean

      Whether the module draws anything: places, connections and entry points.

      show() and clear() never change it. A hidden module keeps its data until PlacesModule.setVisible shows it again. Layers the marker type does not use, and any hidden through layers, stay hidden while the module is shown.

      true
      
    // Basic configuration
    const config: PlacesModuleConfig = {
    markerType: 'pin',
    color: '#E4572E',
    label: {
    title: (place) => place.properties.poi?.name || 'Unknown',
    size: 12
    }
    };

    // Advanced configuration with custom properties
    const config: PlacesModuleConfig = {
    markerType: 'base-map',
    icon: {
    categoryIcons: [
    { id: 'RESTAURANT', image: '/icons/restaurant.png' }
    ]
    },
    label: {
    title: ['get', 'title'],
    size: 14,
    color: '#333',
    haloColor: '#fff',
    haloWidth: 2
    },
    extraFeatureProps: {
    category: (place) => place.properties.poi?.localizedCategories?.[0],
    hasParking: (place) => place.properties.poi?.name?.includes('parking')
    }
    };

    PlacesModuleSerializableConfig for the part that survives JSON.