Connections and entry points

Besides the markers, the Places module draws two things around the places it shows: labelled connection lines between pairs of them, and the entrances a place's data carries. Both take the module's colour, hide with it, and have an event scope of their own.

Connections

showConnections draws a dashed line between pairs of shown places, labelled by the label function of connections. connections.color, connections.textColor and connections.haloColor set their line, label and halo colours over the module's color; unset, the label takes a shade of the line's colour that reads on the map's light or dark theme.

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

Entry points

Search, geocoding and reverse geocoding fill a place's entrances in properties.entryPoints. Set entryPoints on the module config to draw them: a dot per entrance, 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));

// `entryPoints: undefined` stops drawing them
placesModule.updateConfig({ entryPoints: { showFor: 'all' } });

• selected and clicked follow the module's event states, so putEventState draws them too.
• Hovering or clicking an entry point keeps its place's entry points drawn when a handler covers them: one on events or events.entryPoints, not on events.places alone. Under selected, a recently hovered place counts too, so they stay while the pointer crosses to an entrance.
• The dots draw over the pins and the lines under them.
• Under the pin-clustered marker type they start at the first zoom without clusters: cluster.source.clusterMaxZoom plus one, 18 by default.

A reverse geocoding result's geometry is the queried point; move it to properties.originalPosition, the matched address, before showing it:

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

Related guides and examples

Related guides

• Places module - Showing places, events and the data shown
• Place styling - Marker types, colour, labels and icons
• Core places - The entry points a place carries

Related examples

• Place connection lines - Labelled lines from a charging station to the cafés around it, in a colour of their own
• Place entry points playground - When and how the entrances of places are drawn, and what clicking one returns