Along route search

Search for EV charging stations along a route using the along-route search API

import { bboxFromGeoJSON, TomTomConfig, type Waypoint } 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 './style.css';
import { API_KEY } from './config';

// (Set your own API key when working in your own environment)
TomTomConfig.instance.put({ apiKey: API_KEY, language: 'en-US' });

(async () => {
    const waypoints: Waypoint[] = await Promise.all(['Positano', 'Cetara'].map(geocodeOne));

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

    const routingModule = await RoutingModule.create(map);
    routingModule.showWaypoints(waypoints);
    const routes = await calculateRoute({ locations: waypoints });
    routingModule.showRoutes(routes);

    const placesModule = await PlacesModule.create(map);
    const results = await discoverPlaces({
        filters: { poiCategories: ['BEACH', 'VIEWPOINT'] },
        route: routes.features[0],
        maxDetourTimeSeconds: 60,
        limit: 20,
    });
    placesModule.show(results);
})();

Open Sandbox

A coastal drive is drawn, then the beaches and viewpoints within a one-minute detour of it appear as pins, each category with its own icon.

calculateRoute and RoutingModule.showRoutes draw the drive the search then runs along.
discoverPlaces takes that route as its search area instead of a position, so the detour limit is part of the query, and filters.poiCategories says what to look for as ids rather than free text.
PlacesModule.show takes the search response as it stands: it is already GeoJSON, so there are no layers or icons to wire.