TomTom Maps SDK for JavaScript
This is the documentation of version 0.59.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;
        connections?: PlaceConnectionsConfig;
        entryPoints?: PlaceEntryPointsConfig;
        evAvailability?: EVAvailabilityConfig;
        extraFeatureProps?: Record<string, ExtraFeatureProp<P>>;
        icon?: PlaceIconConfig;
        layers?: PlaceLayersConfig;
        text?: PlaceTextConfig;
        theme?: PlacesTheme;
        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 theme clusters places and draws the cluster badge.

    • 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],
        rating: (place) => place.properties.poi?.rating || 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

      Icon appearance configuration.

      Controls marker style and custom icons for different place categories.

    • Optionallayers?: PlaceLayersConfig

      Custom layer styling configuration.

      • Overrides the default layer styling with custom specifications.
      • You must provide complete layer specifications for any layers you wish to customize.
      • You can still reuse the default configurations if you want incremental changes. See: buildPlacesLayerSpecs.
      • Any layer not specified will continue to use its default styling.
      • Use this only if you need fine MapLibre control on how places are displayed.
    • Optionaltext?: PlaceTextConfig

      Text label configuration.

      Controls label content, styling, and positioning.

    • Optionaltheme?: PlacesTheme

      Base style for all places.

      Can be overwritten by more advanced icon configurations.

      '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 theme does not use, and any hidden through layers, stay hidden while the module is shown.

      true

    // Basic configuration
    const config: PlacesModuleConfig = {
      icon: {
        style: 'pin'
      },
      text: {
        field: (place) => place.properties.poi?.name || 'Unknown',
        size: 12
      }
    };

    // Advanced configuration with custom properties
    const config: PlacesModuleConfig = {
      icon: {
        style: 'base-map',
        categoryIcons: [
          { category: 'RESTAURANT', image: '/icons/restaurant.png' }
        ]
      },
      text: {
        field: ['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')
      }
    };

    Settings
    Member Visibility