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.
Optionalfill?: ReachableRangeFillConfigThe colours of the bands.
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?: ReachableRangeLabelConfigThe labels along each range's border: their text and how they look.
Optionallayers?: GeometryLayersConfigMapLibre overrides for the band, border and label layers.
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 fill.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 StylingFoundationsModule.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',
fill: { palette: ['#e63312', '#f5a000', '#1d3f8a'] },
};
ReachableRangesModuleSerializableConfig for the part that survives JSON.
Configuration of the ReachableRangesModule.