TomTom LogoDocs
Products
Resources
Pricing
Sign in
Maps SDK for JavaScript
Introduction
Guides
Examples
API Reference

Connections and entry points

VERSION 1.0.0-rc.3PUBLIC PREVIEW

Besides markers, the Places module draws labelled connection lines between pairs of shown places, and the entrances in a place’s data. Both take the module’s colour, hide with it and have their own event scope.

Connections

showConnections draws a dashed line between each pair of places you give it, labelled by connections.label.title.

const placesModule = await PlacesModule.create(map, {
    connections: { color: '#1F9D6B', label: { title: (connection) => `${connection.minutes} min` } },
});
await placesModule.show(places);
await placesModule.showConnections([{ from: 'station', to: 'cafe', minutes: 4 }]);


await placesModule.clearConnections(); // the lines go, the places stay
  • An endpoint is a Place or the id of a shown place. The module skips an id that matches no shown place, and resolves it again on every redraw (Identity across show, clear and style changes).
  • Every other property of a connection reaches the label.title function. Without that function, the module draws no label.
  • showConnections replaces the shown connections. show() and clear() remove them.
  • connections.color, connections.label.color and connections.label.haloColor set the line, label and halo colours over the module’s color. By default, the label takes a shade of the line colour that reads on the map’s light or dark theme.
  • connections.layers.line and connections.layers.label take MapLibre overrides.

Entry points

Search, geocoding and reverse geocoding fill a place’s entrances in properties.entryPoints. To draw them, set entryPoints on the module config. Each entrance gets a dot, larger for the main one, with a dotted line back to the place.

const placesModule = await PlacesModule.create(map, {
    entryPoints: {
        showFor: 'clicked', // 'all' | 'selected' (hovered or clicked, the default) | 'clicked'
        minZoom: 16,        // default 15
        layers: { line: { layout: { visibility: 'none' } } }, // MapLibre overrides for `point` and `line`
    },
});


// Only places with an event handler reach the hover and click states
placesModule.events.on('click', (feature) => console.log(feature.properties.title));


placesModule.updateConfig({ entryPoints: { showFor: 'all' } });
placesModule.updateConfig({ entryPoints: undefined }); // stops drawing them
  • selected and clicked follow the module’s event states, so setEventState draws them too.
  • Hovering or clicking an entry point keeps its place’s entry points drawn if a handler on events or events.entryPoints covers them. A handler on events.places alone doesn’t. Under selected, a recently hovered place counts too, so they stay while the pointer moves to an entrance.
  • events.entryPoints passes a point at the entrance, whether the dot or the line was hit. Its properties hold type, functions, placeID, entryPointIndex and the shown place. It is a valid route location, as the events example shows.
  • The dots draw over the pins and the lines under them.
  • With pin-clustered markers, entry points appear from the first zoom without clusters, cluster.source.maxZoom plus one (18 by default).

A reverse geocoding result’s geometry is the queried point. Before you show it, set its coordinates to properties.originalPosition, the matched address. A result with no match has no properties, so check for them first:

const address = await reverseGeocode({ position: clickedPosition });
if (address.properties) {
    await placesModule.show({
        ...address,
        geometry: { ...address.geometry, coordinates: address.properties.originalPosition },
    });
}