OptionalbeforeLayerConfig?: GeometryBeforeLayerConfigWhere the bands sit in the map's layer stack: a single target, or { all, fill, line } to
place the fill and the borders apart.
OptionalfillStyle?: GeometryFillStyleHow the bands are filled.
'filled' — each band coloured, the innermost on top.'outline' — only each range's border, thick and coloured.'inverted' — the area outside each range coloured: the world beyond the largest range,
then a ring between each range and the next smaller one.Optionalhighlight?: GeometryHighlightConfigHow a hovered or clicked band is drawn.
Optionallabel?: LabelConfigHow the labels along each range's border look. Their text is the range's title.
Optionallayers?: GeometryLayersConfigMapLibre overrides for the band, border and label layers.
Optionalpalette?: string[]CSS colours of the bands, the innermost band first, starting over after the last. An empty list
counts as unset: the bands then ramp from the map's accent toward its land colour, the other way
round for 'inverted', which deepens away from the origin.
Optionaltitle?: ReachableRangeTitleFnEach range's title, the text of its labels. Unset, it is the range's budget, e.g. '30 min'
or '10 km', else its position in what show was given, from 1.
Optionalvisible?: booleanWhether the module draws anything: bands, borders and their labels.
show() and clear() never change it — a hidden module keeps its ranges until
ReachableRangesModule.setVisible shows it again.
The bands take their colours from the map unless palette
sets them: a ramp from the map's accent (innermost band) toward its land colour (outermost), reversed
for the 'inverted' fill style, both read from TomTomMap.mapColors. A theme set through StylingModule.setMapColors — e.g. from
the map-theme plugin's deriveMapColors — recolours the bands with the rest of the map. Without one,
the ramp runs between the map style's own light or dark defaults: '#0A3653' toward white on light
styles, '#5FA8D8' toward '#333333' on dark ones (custom styles count as light), and follows a
switch between them.
// The area outside the 30-minute range dimmed, in your own colours
const config: ReachableRangesModuleConfig = {
fillStyle: 'inverted',
palette: ['#e63312', '#f5a000', '#1d3f8a'],
};
ReachableRangesModuleSerializableConfig for the part that survives JSON.
Configuration of the ReachableRangesModule.