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

    Type Alias PlacesModuleConfig<P>

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

    Configuration options for the PlacesModule.

    Controls the appearance and behavior of place markers and labels displayed on the map.

    Type Parameters

    Type Declaration

    • 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: the default pin fill, the label of a hovered or clicked place, connection lines and entry points. Connection labels, and entry points on a light map, take a darker shade of it.

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

    • Optionalconnections?: PlaceConnectionsConfig

      Configuration for connection lines drawn between places via PlacesModule.showConnections.

      When omitted, connections rendered via showConnections use default styling (a dashed line) and no label.

    • OptionalentryPoints?: PlaceEntryPointsConfig

      Configuration for drawing the entry points of the shown places.

      When omitted, entry points are not drawn.

    • OptionalevAvailability?: EVAvailabilityConfig

      Configuration for EV charging station availability display.

      Disabled by default - set enabled: true to show availability on EV stations. Requires calling getPlacesWithEVAvailability to fetch availability data.

      undefined (disabled)
    • OptionalextraFeatureProps?: Record<string, ExtraFeatureProp<P>>

      Additional properties to compute for each place feature.

      These properties are added to the feature and can be used in styling expressions or event handlers. Values can be static or computed from place data.

      Useful for:

      • Adding computed flags for conditional styling via 'layers' config.
      • Extracting nested properties for easier access
      • Adding 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.

    Settings
    Member Visibility