Back to all examples

Add Stops to Route

This example on GitHub

Find stops along a route within a one-minute detour and insert them all at optimal positions in a single call.

Add Stops to Route
import { bboxFromGeoJSON, TomTomConfig, type Waypoint, withInsertedWaypoints } from '@tomtom-org/maps-sdk/core';
import { PlacesModule, RoutingModule, TomTomMap } from '@tomtom-org/maps-sdk/map';
import { calculateRoute, discoverPlaces, geocodeOne } from '@tomtom-org/maps-sdk/services';
import { API_KEY } from './config';
import './style.css';

TomTomConfig.instance.put({ apiKey: API_KEY });

(async () => {
    const initialWaypoints: Waypoint[] = await Promise.all(['Paris', 'Amsterdam'].map(geocodeOne));

    const map = new TomTomMap({
        mapLibre: {
            container: 'sdk-map',
            bounds: bboxFromGeoJSON(initialWaypoints),
            fitBoundsOptions: { padding: 80 },
        },
    });

    const routingModule = await RoutingModule.create(map);
    routingModule.showWaypoints(initialWaypoints);
    const initialRoutes = await calculateRoute({ locations: initialWaypoints });

    routingModule.showRoutes(initialRoutes);
    const initialRoute = initialRoutes.features[0];

    const stopsAlongRoute = await discoverPlaces({
        filters: { poiCategories: ['CHARGING_LOCATION'], minPowerKW: 150 },
        route: initialRoute,
        maxDetourTimeSeconds: 60,
        limit: 10,
    });
    const placesModule = await PlacesModule.create(map);
    placesModule.show(stopsAlongRoute);

    // Insert all charging stops at their optimal along-route positions in one call.
    // `withInsertedWaypoints` projects every existing and new waypoint once against the
    // route, then sorts the new ones into along-route order — independent of input order.
    const updatedWaypoints = withInsertedWaypoints(initialRoute, initialWaypoints, stopsAlongRoute.features);
    const updatedRoutes = await calculateRoute({ locations: updatedWaypoints });

    placesModule.clear();
    routingModule.showWaypoints(updatedWaypoints);
    routingModule.showRoutes(updatedRoutes);
})();

Two waypoints go in, a route comes back, and the chargers beside it join it as extra stops, in along-route order, on a single recalculation.

  • discoverPlaces takes the route itself as an input, so “along this route, within this detour” is a query rather than a post-filter.
  • withInsertedWaypoints projects old and new stops onto the route and orders them, so the insert positions are not yours to work out.
  • RoutingModule.showRoutes and showWaypoints redraw the updated journey straight from the service response, with no layer bookkeeping.

Related examples