The MapLibre source and layer IDs of all sources this module creates and manages.
A record mapping each source name to its MapLibre source ID and an array of the IDs of that source's layers.
Use these IDs 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, replacing the current one.
The place shape the label.title, icon.mapping and extraFeatureProps
callbacks expect, as with PlacesModule.create.
Takes the event state off one of the shown features.
Takes the given event states, or all of them, off the shown features.
Optionaloptions: ClearEventStatesOptionsReturns a shallow copy of the current module configuration, or undefined if none is applied.
A shallow copy of the current configuration, or undefined. It is a copy so that you
can't modify the internal state by accident.
Only the top-level properties are copied. Nested objects and arrays still reference the original configuration. This is enough for most use cases, but keep it in mind with complex configurations.
// Apply a configuration
myModule.applyConfig({ visible: true, color: '#E63312' });
// Later, retrieve the current configuration
const currentConfig = myModule.getConfig();
console.log(currentConfig); // { visible: true, color: '#E63312' }
// When no config is applied
myModule.resetConfig();
console.log(myModule.getConfig()); // undefined
Returns the ids of the shown features that have an event state, by state.
The read side of setEventState and clearEventStates, reflecting those and
the states user interactions put. The ids are those getShown() and the event handlers hand
back, so each can go straight back into setEventState.
Returns the currently shown places.
The places currently displayed on the map.
places are the places given to show(), as drawn. Each carries the PlaceDisplayProps
and its current eventState. connections are the ones given to showConnections(), including
any skipped because no shown place has their id.
Whether the module is set to be shown: its visible setting, true unless set. A shown
module with nothing shown draws nothing. getShown() returns what is shown.
Resets this module's configuration to its default values.
It clears any applied configuration and restores the module to its initial state, the same
as calling applyConfig(undefined).
The module then behaves as if no configuration was ever applied. Any custom settings, styling or behaviour changes are replaced with default values.
// Apply some configuration
myModule.applyConfig({ visible: true, color: '#E63312' });
// Later, reset to defaults
myModule.resetConfig();
Puts an event state on one of the shown features, as a user interaction would.
The state is what the module's own layers draw (place pins and entry points, route outlines,
geometries, details-module incidents, area-analytics cells), what layers of yours read with
['get', 'eventState'], and what getEventStates returns. It lasts as long as the shown
feature does, through setVisible, style and configuration changes, but not a new
show, a clear or a setStyle with resetState.
Shows or hides everything the module draws.
Stored as visible in the configuration. Showing and clearing data never change it. A hidden
module keeps its data, through style changes too, and draws it again on setVisible(true).
Showing leaves hidden what the configuration turns off: a route section type that is off, the layers a place marker type does not use.
Displays the given places on the map.
The places to display, as a single Place, an array of Places or a Places FeatureCollection.
Behaviour:
properties.eventState, such as getShown().places, keep theirs.Data sources:
ShownPlaces names the places services whose results are not places, and what shows them.
Display search results:
import { discoverPlaces } from '@tomtom-org/maps-sdk/services';
const results = await discoverPlaces({ query: 'coffee' });
await placesModule.show(results);
Displays connection lines between pairs of places on the map.
The connections to render. Each has a from and to
endpoint, as a Place or as the id of a place this module currently shows.
connections.label.title, the string it returns
is rendered as a label along each line, slightly offset to the side.
Otherwise, no label is shown.show() and clear() clear the connections first, since their endpoints
may no longer be on the map.const places = await PlacesModule.create(map, {
connections: {
label: { title: (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.distance ?? 0),
})),
);
Changes part of the configuration and keeps the rest, redrawing the places already shown.
The place shape the label.title, icon.mapping and extraFeatureProps
callbacks expect, as with PlacesModule.create.
ProtectedwaitStaticcreateCreates a new module instance on the given map, once the map is ready.
PlacesModule owns the sources, layers and images it adds, all suffixed per instance. So every
call returns a new, independent instance, and you can stack several of them on one map.
Optionalconfig: PlacesModuleConfig<P>
A map module that displays and manages place markers.
It displays location markers (pins) on the map for points of interest, search results or custom locations, with various marker styles, custom icons, text labels and interactive events.
Remarks
Features:
Common use cases:
Example
See
Places Guide