Reachable Ranges

Request Access

Important note Calculate Reachable Range is unavailable on a Freemium or Pay As You Grow (PAYG) basis. Click the Request Access button above to contact our Sales team.

calculateReachableRanges computes the geographic area reachable from a given origin within a specified budget — such as travel time, distance, or EV charge — and returns GeoJSON polygon features representing the reachable area for each budget value. Multiple budgets in a single call produce concentric rings.

Budget types

Each call requires a budget that defines what constrains the reachable area:

timeMinutes – Area reachable within a given travel time (minutes)
distanceKM – Area reachable within a given distance (kilometres)
remainingChargeCPT – Area reachable with at least X% charge remaining
spentChargePCT – Area reachable spending at most X% of charge
spentFuelLiters – Area reachable spending at most X litres of fuel

EV budget types (remainingChargeCPT, spentChargePCT) require a full electric vehicle configuration. See Vehicle Configuration.

Example

import { GeometriesModule, TomTomMap, reachableRangeGeometryConfig } from '@tomtom-org/maps-sdk/map';
import { calculateReachableRanges } from '@tomtom-org/maps-sdk/services';

const origin: [number, number] = [4.9, 52.37];

// Calculate three concentric time-budget rings
const result = await calculateReachableRanges([
    { origin, budget: { type: 'timeMinutes', value: 10 } },
    { origin, budget: { type: 'timeMinutes', value: 20 } },
    { origin, budget: { type: 'timeMinutes', value: 30 } },
]);

// result.features — one PolygonFeature per budget, ordered largest first
// result.bbox     — bounding box covering all features

// Display on map — labels ('30 min', '20 min', '10 min') applied automatically
const map = new TomTomMap({ mapLibre: { container: 'map', center: origin, zoom: 9 } });
const rangesModule = await GeometriesModule.get(map, reachableRangeGeometryConfig());
rangesModule.show(result);

reachableRangeGeometryConfig derives labels from each feature's budget property automatically and applies themed styling. Pass a palette and theme to customise:

reachableRangeGeometryConfig('teal', 'outline')

Available themes: 'filled' (default), 'outline', 'inverted'. See Geometry Module for more on display configuration.

Manual control

For full control, bypass reachableRangeGeometryConfig and set properties directly on each feature:

import { GeometriesModule } from '@tomtom-org/maps-sdk/map';

const features = result.features.map((f, i) => ({
    ...f,
    properties: {
        ...f.properties,
        title: `Zone ${i + 1}`,  // custom label
        theme: 'inverted',       // 'filled' | 'outline' | 'inverted'
    },
}));

const module = await GeometriesModule.get(map, { colorConfig: { fillColor: 'blues' } });
module.show({ type: 'FeatureCollection', features });

Unsupported options

All budgets in a single calculateReachableRanges call must share the same origin and budget type.

Reachable Ranges

Budget types

Example

Manual control

Unsupported options

API Reference

Related Guides and Examples

Related Guides