Gets the source and layer identifiers for all sources managed by this module.
This property provides access to the MapLibre source and layer IDs that were created and are managed by this module. These IDs can be used to interact directly with MapLibre's API or to identify which layers belong to this module.
A record mapping each source name to its corresponding source ID and layer IDs. Each entry contains the MapLibre source identifier and an array of layer identifiers associated with that source.
The returned IDs are useful when you need to:
const ids = myModule.sourceAndLayerIDs;
console.log(ids);
// {
// mySource: {
// sourceID: 'my-source-id',
// layerIDs: ['layer-1', 'layer-2']
// }
// }
// Use with MapLibre API
const map = myModule.mapLibreMap;
ids.mySource.layerIDs.forEach(layerId => {
map.setLayoutProperty(layerId, 'visibility', 'visible');
});
Applies a configuration to this module.
This method updates the module's behavior and appearance based on the provided configuration. The configuration is stored internally and will be automatically reapplied if the map style changes.
The configuration object to apply to the module. Pass undefined to reset
the configuration to default values.
When a configuration is applied, the module updates its visual representation and behavior accordingly. The configuration persists across map style changes, ensuring consistent module behavior even when the map's base style is modified.
// Apply a new configuration
myModule.applyConfig({ visible: true, opacity: 0.8 });
// Reset to default configuration
myModule.applyConfig(undefined);
Applies additional feature properties to displayed places.
Object mapping property names to values or functions.
Updates the icon configuration for displayed places.
New icon configuration settings.
Updates the text/label configuration for displayed places.
New text configuration settings.
Updates the visual theme for displayed places.
The theme style to apply to place markers.
Available Themes:
pin: Traditional teardrop-shaped map pinscircle-icon: Simple circular markers (previously named circle)base-map: Mimics the map's built-in POI layer style with category icons (combines main, selected, and micro). For micro-only rendering, hide the main layer via layers.main.layout.visibility = 'none'.Changes apply immediately to all currently shown places. Other configuration properties (icon config, text config) remain unchanged.
Removes an event state from a specific place.
Configuration for which event state to remove.
Removes event states from multiple places.
Optionaloptions: CleanEventStatesOptionsOptional filter for which states to remove.
Retrieves a copy of the current module configuration.
This method returns a shallow copy of the configuration object that is currently
applied to the module. If no configuration has been applied, it returns undefined.
A shallow copy of the current configuration object, or undefined if no
configuration is currently applied. The returned object is a copy to prevent
unintended modifications to the internal state.
The returned configuration object is a shallow copy, which means that while the top-level properties are copied, any nested objects or arrays are still referenced from the original configuration. This is sufficient for most use cases but should be kept in mind when dealing with complex configurations.
// Apply a configuration
myModule.applyConfig({ visible: true, opacity: 0.8 });
// Later, retrieve the current configuration
const currentConfig = myModule.getConfig();
console.log(currentConfig); // { visible: true, opacity: 0.8 }
// When no config is applied
myModule.resetConfig();
console.log(myModule.getConfig()); // undefined
Returns the currently shown places.
The places currently displayed on the map.
Programmatically sets an event state on a specific place.
Configuration for the event state to apply.
Resets the configuration of this module to its default values.
This is a convenience method that clears any previously applied configuration
and restores the module to its initial state. This is equivalent to calling
applyConfig(undefined).
After calling this method, the module will behave as if no configuration was ever applied. Any custom settings, styling, or behavior modifications will be removed and replaced with default values.
// Apply some configuration
myModule.applyConfig({ visible: true, opacity: 0.5 });
// Later, reset to defaults
myModule.resetConfig();
Displays the given places on the map.
Behavior:
Data Sources:
Display search results:
import { search } from '@tomtom-international/maps-sdk-js/services';
const results = await search({ query: 'coffee' });
await placesModule.show(results);
Displays connection lines between pairs of places on the map.
List of connections to render. Each connection has a from
and to endpoint, expressed either as a Place or as the id of a place
currently shown by this module.
Behavior:
show() or clear() pre-clears connections, since their endpoints
may no longer be on the map.const places = await PlacesModule.get(map, {
connections: {
label: (c) => `${c.distanceMeters} m`
}
});
await places.show([station, ...cafes]);
await places.showConnections(
cafes.features.map((cafe) => ({
from: station.id,
to: cafe.id,
distanceMeters: Math.round(cafe.properties.dist ?? 0),
})),
);
ProtectedwaitStaticgetMake sure the map is ready before create an instance of the module and any other interaction with the map
The TomTomMap instance.
Optionalconfig: PlacesModuleConfigThe module optional configuration
Returns a promise with a new instance of this module
Base class for all Maps SDK map modules.
This abstract class provides the foundation for creating map modules that can display and manage various types of data on a TomTom map. It handles module lifecycle management, including initialization, configuration updates, and automatic restoration after map style changes.
Remarks
All map modules extend this class to ensure consistent behavior across the SDK. The class manages the module's sources, layers, and configuration, automatically handling map style changes by restoring the module's state when needed.
Example