diff --git a/apps/react-storybook/stories/map/OSMMap.stories.tsx b/apps/react-storybook/stories/map/OSMMap.stories.tsx
index 433c67c296a5..9fc4d2ce3b51 100644
--- a/apps/react-storybook/stories/map/OSMMap.stories.tsx
+++ b/apps/react-storybook/stories/map/OSMMap.stories.tsx
@@ -11,17 +11,18 @@ import React from 'react';
 import Button from 'devextreme-react/button';
 import Map, { type MapRef } from 'devextreme-react/map';
 import type {
+    CalculateOsmRouteInfo,
     MapLocation,
     MapType,
     ReadyEvent,
+    OsmRouteResult,
+    RouteMode,
 } from 'devextreme/ui/map';
 import 'devextreme/ui/map/openlayers';
 
-const CENTER = { lat: 40.7484, lng: -73.9857 };
+import { ROUTE_PATHS } from './routes';
+
 const CENTRAL_PARK_CENTER = { lat: 40.7829, lng: -73.9654 };
-const DEFAULT_MARKER_LOCATION = 'Empire State Building';
-const CUSTOM_MARKER_LOCATION = 'Bryant Park';
-const ADDED_MARKER_LOCATION = 'Times Square';
 const EXTENT: [number, number, number, number] = [-74.08, 40.67, -73.85, 40.88];
 const TILE_SERVER = {
     url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
@@ -29,30 +30,74 @@ const TILE_SERVER = {
     maxZoom: 19,
 };
 const MARKER_LOCATIONS: Record<string, MapLocation> = {
-    [DEFAULT_MARKER_LOCATION]: CENTER,
-    [CUSTOM_MARKER_LOCATION]: { lat: 40.7536, lng: -73.9832 },
-    [ADDED_MARKER_LOCATION]: { lat: 40.758, lng: -73.9855 },
+    'Columbus Circle': { lat: 40.768161, lng: -73.981906 },
+    'Belvedere Castle': { lat: 40.779316, lng: -73.968882 },
+    'Great Hill': { lat: 40.797269, lng: -73.958993 },
+    'Dana Discovery Center': { lat: 40.797064, lng: -73.951349 },
+    'Conservatory Garden': { lat: 40.793621, lng: -73.95261 },
+    'Bethesda Fountain': { lat: 40.774498, lng: -73.970867 },
+};
+const ROUTE_PRESETS = {
+    walking: {
+        title: 'Central Park Run — approx. 10.1 km',
+        markerDescription: 'Blue: Columbus Circle start / finish. Red: Dana Discovery Center.',
+        center: { lat: 40.7827, lng: -73.9666 },
+        zoom: 14,
+        locations: [
+            'Columbus Circle',
+            'Belvedere Castle',
+            'Great Hill',
+            'Dana Discovery Center',
+            'Conservatory Garden',
+            'Bethesda Fountain',
+            'Columbus Circle',
+        ],
+        markers: [{
+            location: 'Columbus Circle',
+        }, {
+            location: 'Dana Discovery Center',
+            iconSrc: 'images/maps/map-marker.png',
+        }],
+        extraMarker: MARKER_LOCATIONS['Belvedere Castle'],
+    },
+    driving: {
+        title: 'Manhattan Drive — official Routes demo waypoints, approx. 11 km',
+        markerDescription: 'Four markers: coordinate string, arrays and an object. Red: custom icon.',
+        center: { lat: 40.75, lng: -73.986 },
+        zoom: 14,
+        locations: [
+            [40.7825, -73.966111],
+            [40.755833, -73.986389],
+            [40.753889, -73.981389],
+            [40.713474, -74.005536],
+        ],
+        markers: [{
+            location: '40.7825, -73.966111',
+        }, {
+            location: [40.755833, -73.986389],
+            iconSrc: 'images/maps/map-marker.png',
+        }, {
+            location: { lat: 40.753889, lng: -73.981389 },
+        }, {
+            location: [40.713474, -74.005536],
+        }],
+        extraMarker: { lat: 40.748441, lng: -73.985664 },
+    },
 };
 const PROVIDER_CONFIG = {
     calculateLocation: (query: string): Promise<MapLocation | undefined> => (
         Promise.resolve(MARKER_LOCATIONS[query])
     ),
+    calculateRoute: ({ mode }: CalculateOsmRouteInfo): Promise<OsmRouteResult> => (
+        Promise.resolve(mode === 'walking'
+            ? ROUTE_PATHS.walking
+            : ROUTE_PATHS.driving.coordinates.map(([lng, lat]) => [lat, lng]))
+    ),
     tileServer: () => TILE_SERVER,
 };
 const handleMarkerClick = fn();
-const DEFAULT_MARKER = {
-    location: DEFAULT_MARKER_LOCATION,
-    onClick: handleMarkerClick,
-};
-const CUSTOM_MARKER = {
-    location: CUSTOM_MARKER_LOCATION,
-    iconSrc: 'images/maps/map-marker.png',
-    onClick: handleMarkerClick,
-};
-const ADDED_MARKER = {
-    location: ADDED_MARKER_LOCATION,
-    onClick: handleMarkerClick,
-};
+const handleRouteAdded = fn();
+const handleRouteRemoved = fn();
 const STORY_STYLE: React.CSSProperties = {
     display: 'flex',
     flexDirection: 'column',
@@ -71,6 +116,11 @@ interface OsmStoryArgs {
     disabled: boolean;
     focusStateEnabled: boolean;
     rtlEnabled: boolean;
+    showRoute: boolean;
+    routeColor: string;
+    routeMode: RouteMode;
+    routeOpacity: number;
+    routeWeight: number;
     type: MapType;
     zoom: number;
 }
@@ -107,14 +157,39 @@ const OsmMapStory = ({
     disabled,
     focusStateEnabled,
     rtlEnabled,
+    showRoute,
+    routeColor,
+    routeMode,
+    routeOpacity,
+    routeWeight,
     type,
     updateArgs,
     zoom,
 }: OsmMapStoryProps): React.ReactElement => {
     const mapRef = React.useRef<MapRef>(null);
     const [markerAdded, setMarkerAdded] = React.useState(false);
-    const markers = React.useMemo(() => [DEFAULT_MARKER, CUSTOM_MARKER], []);
-    const center = centerOnCentralPark ? CENTRAL_PARK_CENTER : CENTER;
+    const preset = ROUTE_PRESETS[routeMode];
+    const markers = React.useMemo(() => preset.markers.map((marker) => ({
+        ...marker,
+        onClick: handleMarkerClick,
+    })), [preset]);
+    const addedMarker = React.useMemo(() => ({
+        location: preset.extraMarker,
+        onClick: handleMarkerClick,
+    }), [preset]);
+    const routes = React.useMemo(() => showRoute ? [{
+        locations: preset.locations,
+        color: routeColor,
+        mode: routeMode,
+        opacity: routeOpacity,
+        weight: routeWeight,
+    }] : [], [preset, showRoute, routeColor, routeMode, routeOpacity, routeWeight]);
+    const center = centerOnCentralPark ? CENTRAL_PARK_CENTER : preset.center;
+
+    React.useEffect(() => {
+        setMarkerAdded(false);
+        mapRef.current?.instance()?.option('zoom', preset.zoom);
+    }, [preset]);
 
     React.useEffect(() => {
         mapRef.current?.instance()?.option('center', center);
@@ -127,7 +202,7 @@ const OsmMapStory = ({
         }
 
         setMarkerAdded(true);
-        void map.addMarker(ADDED_MARKER).then(undefined, () => setMarkerAdded(false));
+        void map.addMarker(addedMarker).then(undefined, () => setMarkerAdded(false));
     };
 
     const removeMarker = (): void => {
@@ -137,11 +212,12 @@ const OsmMapStory = ({
         }
 
         setMarkerAdded(false);
-        void map.removeMarker(ADDED_MARKER).then(undefined, () => setMarkerAdded(true));
+        void map.removeMarker(addedMarker).then(undefined, () => setMarkerAdded(true));
     };
 
     return (
         <div style={STORY_STYLE}>
+            <div>{preset.title}. {preset.markerDescription}</div>
             <div style={TOOLBAR_STYLE}>
                 <Button
                     text="Add Marker"
@@ -160,11 +236,14 @@ const OsmMapStory = ({
                 provider="osm"
                 providerConfig={PROVIDER_CONFIG}
                 autoAdjust={autoAdjust}
-                defaultCenter={CENTER}
+                defaultCenter={preset.center}
                 controls={controls}
                 disabled={disabled}
                 focusStateEnabled={focusStateEnabled}
                 markers={markers}
+                routes={routes}
+                onRouteAdded={handleRouteAdded}
+                onRouteRemoved={handleRouteRemoved}
                 rtlEnabled={rtlEnabled}
                 type={type}
                 zoom={zoom}
@@ -191,11 +270,11 @@ const meta: Meta<OsmStoryArgs> = {
     argTypes: {
         autoAdjust: {
             control: 'boolean',
-            description: 'Automatically adjusts the map viewport when markers change.',
+            description: 'Automatically adjusts the map viewport when markers or routes change.',
         },
         centerOnCentralPark: {
             control: 'boolean',
-            description: 'Switches the map center between the default New York location and Central Park.',
+            description: 'Switches the map center between the selected route and Central Park.',
         },
         controls: {
             control: 'boolean',
@@ -209,6 +288,16 @@ const meta: Meta<OsmStoryArgs> = {
         rtlEnabled: {
             control: 'boolean',
         },
+        showRoute: { control: 'boolean' },
+        routeColor: { control: 'color' },
+        routeMode: {
+            control: 'select',
+            options: ['driving', 'walking'],
+            description: 'Saved OSRM routes: official Routes demo waypoints or an independently calculated Central Park loop. '
+                + 'Driving returns coordinate tuples; walking returns a GeoJSON LineString. No routing service is called.',
+        },
+        routeOpacity: { control: { type: 'range', min: 0, max: 1, step: 0.1 } },
+        routeWeight: { control: { type: 'number', min: 0, max: 20 } },
         type: {
             control: 'select',
             options: ['roadmap', 'satellite', 'hybrid'],
@@ -238,7 +327,12 @@ export const Default: Story = {
         disabled: false,
         focusStateEnabled: true,
         rtlEnabled: false,
+        showRoute: true,
+        routeColor: 'blue',
+        routeMode: 'driving',
+        routeOpacity: 0.5,
+        routeWeight: 6,
         type: 'roadmap',
-        zoom: 15,
+        zoom: 14,
     },
 };
diff --git a/apps/react-storybook/stories/map/routes.ts b/apps/react-storybook/stories/map/routes.ts
new file mode 100644
index 000000000000..05b0f0dd0d40
--- /dev/null
+++ b/apps/react-storybook/stories/map/routes.ts
@@ -0,0 +1,254 @@
+import type { OsmGeoJsonLineString, RouteMode } from 'devextreme/ui/map';
+
+// Map data © OpenStreetMap contributors, ODbL: https://www.openstreetmap.org/copyright
+export const ROUTE_PATHS: Record<RouteMode, OsmGeoJsonLineString> = {
+    walking: {
+        type: 'LineString',
+        coordinates: [
+            [-73.981906, 40.768161],
+            [-73.982066, 40.768505],
+            [-73.98184, 40.768682],
+            [-73.981677, 40.768615],
+            [-73.978822, 40.772524],
+            [-73.978519, 40.772473],
+            [-73.97589, 40.776092],
+            [-73.975594, 40.77598],
+            [-73.975533, 40.776043],
+            [-73.975262, 40.776105],
+            [-73.974836, 40.7765],
+            [-73.974396, 40.777094],
+            [-73.974122, 40.777293],
+            [-73.974092, 40.77739],
+            [-73.973962, 40.777337],
+            [-73.973847, 40.777582],
+            [-73.973618, 40.777862],
+            [-73.972432, 40.778575],
+            [-73.971955, 40.778806],
+            [-73.971833, 40.778893],
+            [-73.971589, 40.778611],
+            [-73.970899, 40.778687],
+            [-73.970623, 40.778813],
+            [-73.970476, 40.778819],
+            [-73.970168, 40.778775],
+            [-73.970029, 40.778963],
+            [-73.969982, 40.778972],
+            [-73.969936, 40.778936],
+            [-73.969668, 40.778982],
+            [-73.969587, 40.778906],
+            [-73.96927, 40.779115],
+            [-73.969208, 40.779119],
+            [-73.969089, 40.779299],
+            [-73.969044, 40.77928],
+            [-73.969013, 40.779322],
+            [-73.968909, 40.779281],
+            [-73.968882, 40.779316],
+            [-73.968896, 40.779298],
+            [-73.969131, 40.779397],
+            [-73.96911, 40.779425],
+            [-73.96919, 40.779459],
+            [-73.969119, 40.779556],
+            [-73.96929, 40.779639],
+            [-73.969529, 40.779822],
+            [-73.969447, 40.780027],
+            [-73.969477, 40.780164],
+            [-73.969203, 40.780582],
+            [-73.968952, 40.780786],
+            [-73.968816, 40.780842],
+            [-73.968178, 40.7818],
+            [-73.967872, 40.782174],
+            [-73.968028, 40.782231],
+            [-73.967687, 40.7827],
+            [-73.967596, 40.783046],
+            [-73.96766, 40.783534],
+            [-73.967719, 40.783637],
+            [-73.967851, 40.783743],
+            [-73.967298, 40.784376],
+            [-73.967173, 40.7846],
+            [-73.967112, 40.784859],
+            [-73.967159, 40.7852],
+            [-73.967522, 40.786121],
+            [-73.967554, 40.786396],
+            [-73.967533, 40.786645],
+            [-73.967382, 40.787076],
+            [-73.967084, 40.787508],
+            [-73.966869, 40.787737],
+            [-73.966879, 40.787844],
+            [-73.96672, 40.787974],
+            [-73.967111, 40.788114],
+            [-73.962644, 40.794231],
+            [-73.962567, 40.794209],
+            [-73.962385, 40.794261],
+            [-73.962193, 40.794368],
+            [-73.962124, 40.794589],
+            [-73.961901, 40.794794],
+            [-73.961794, 40.795029],
+            [-73.961601, 40.795183],
+            [-73.961407, 40.795626],
+            [-73.961211, 40.795814],
+            [-73.961029, 40.795884],
+            [-73.960867, 40.795905],
+            [-73.960748, 40.796247],
+            [-73.960579, 40.796257],
+            [-73.960442, 40.79631],
+            [-73.960352, 40.796456],
+            [-73.960025, 40.796627],
+            [-73.959901, 40.796754],
+            [-73.959653, 40.796814],
+            [-73.959631, 40.797027],
+            [-73.959562, 40.797118],
+            [-73.959481, 40.797158],
+            [-73.958723, 40.797311],
+            [-73.958341, 40.797274],
+            [-73.958229, 40.79719],
+            [-73.957864, 40.797486],
+            [-73.957578, 40.797552],
+            [-73.95738, 40.797516],
+            [-73.957182, 40.797401],
+            [-73.957137, 40.797361],
+            [-73.957103, 40.797235],
+            [-73.956926, 40.797268],
+            [-73.956624, 40.797495],
+            [-73.956247, 40.797628],
+            [-73.956004, 40.797836],
+            [-73.955787, 40.7979],
+            [-73.955611, 40.797886],
+            [-73.955467, 40.797833],
+            [-73.955292, 40.797637],
+            [-73.955195, 40.797603],
+            [-73.95487, 40.797732],
+            [-73.954585, 40.797917],
+            [-73.95459, 40.79773],
+            [-73.954394, 40.797707],
+            [-73.954184, 40.797614],
+            [-73.954028, 40.797748],
+            [-73.953743, 40.797917],
+            [-73.95355, 40.797834],
+            [-73.95327, 40.797807],
+            [-73.953077, 40.797724],
+            [-73.952295, 40.797529],
+            [-73.951738, 40.797258],
+            [-73.951246, 40.797171],
+            [-73.951349, 40.797064],
+            [-73.951283, 40.797153],
+            [-73.951182, 40.797161],
+            [-73.950583, 40.796913],
+            [-73.950265, 40.796915],
+            [-73.949935, 40.796785],
+            [-73.949898, 40.796739],
+            [-73.949906, 40.796668],
+            [-73.950105, 40.796271],
+            [-73.950541, 40.795783],
+            [-73.950822, 40.795253],
+            [-73.951215, 40.794803],
+            [-73.951409, 40.794432],
+            [-73.95215, 40.793429],
+            [-73.95261, 40.793621],
+            [-73.95215, 40.793429],
+            [-73.952208, 40.79334],
+            [-73.95245, 40.792999],
+            [-73.952521, 40.792936],
+            [-73.952656, 40.792882],
+            [-73.952772, 40.792778],
+            [-73.952821, 40.792681],
+            [-73.952961, 40.792627],
+            [-73.953224, 40.792598],
+            [-73.953273, 40.79257],
+            [-73.953375, 40.792481],
+            [-73.953443, 40.792304],
+            [-73.953581, 40.792199],
+            [-73.953455, 40.792047],
+            [-73.953042, 40.791825],
+            [-73.963945, 40.776917],
+            [-73.96428, 40.776997],
+            [-73.964382, 40.77698],
+            [-73.964661, 40.776889],
+            [-73.964927, 40.776752],
+            [-73.965036, 40.776602],
+            [-73.965362, 40.776531],
+            [-73.966131, 40.776484],
+            [-73.966498, 40.776368],
+            [-73.966829, 40.776152],
+            [-73.967053, 40.775771],
+            [-73.967352, 40.775401],
+            [-73.967619, 40.77524],
+            [-73.968228, 40.774961],
+            [-73.968414, 40.775124],
+            [-73.969138, 40.774727],
+            [-73.969693, 40.774665],
+            [-73.970063, 40.774444],
+            [-73.970514, 40.774291],
+            [-73.970584, 40.7743],
+            [-73.970625, 40.774418],
+            [-73.970752, 40.774492],
+            [-73.970913, 40.774493],
+            [-73.970984, 40.774464],
+            [-73.971076, 40.77436],
+            [-73.97107, 40.774253],
+            [-73.971031, 40.774197],
+            [-73.970894, 40.77413],
+            [-73.970946, 40.774049],
+            [-73.971068, 40.774079],
+            [-73.971169, 40.774016],
+            [-73.971402, 40.773435],
+            [-73.971611, 40.773472],
+            [-73.971664, 40.773324],
+            [-73.971797, 40.773213],
+            [-73.97186, 40.773043],
+            [-73.972022, 40.772806],
+            [-73.972172, 40.77275],
+            [-73.972508, 40.772435],
+            [-73.973084, 40.7727],
+            [-73.973616, 40.772757],
+            [-73.973913, 40.772861],
+            [-73.974175, 40.77291],
+            [-73.975086, 40.772919],
+            [-73.975704, 40.772885],
+            [-73.976258, 40.772815],
+            [-73.976569, 40.772871],
+            [-73.976807, 40.772282],
+            [-73.977187, 40.771745],
+            [-73.977547, 40.77143],
+            [-73.978471, 40.770812],
+            [-73.97912, 40.770273],
+            [-73.979519, 40.769875],
+            [-73.979721, 40.769622],
+            [-73.979958, 40.769151],
+            [-73.980064, 40.769142],
+            [-73.980267, 40.769068],
+            [-73.981199, 40.768511],
+            [-73.981396, 40.76846],
+            [-73.981415, 40.768513],
+            [-73.98184, 40.768682],
+            [-73.982066, 40.768505],
+            [-73.981906, 40.768161],
+        ],
+    },
+    driving: {
+        type: 'LineString',
+        coordinates: [
+            [-73.965345, 40.78364],
+            [-73.965267, 40.783767],
+            [-73.96632, 40.784071],
+            [-73.96668, 40.784201],
+            [-73.967778, 40.784793],
+            [-73.968277, 40.784946],
+            [-73.968356, 40.785006],
+            [-73.968809, 40.785133],
+            [-73.96921, 40.78529],
+            [-73.969344, 40.785297],
+            [-73.972181, 40.786497],
+            [-73.992646, 40.758433],
+            [-73.976055, 40.751439],
+            [-73.982913, 40.742036],
+            [-73.984596, 40.742743],
+            [-73.990007, 40.735312],
+            [-73.990179, 40.735136],
+            [-73.990652, 40.734863],
+            [-73.990791, 40.734728],
+            [-73.991424, 40.731859],
+            [-73.991488, 40.731704],
+            [-74.006304, 40.714173],
+            [-74.005334, 40.713723],
+        ],
+    },
+};
diff --git a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.engine.ts b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.engine.ts
index 715f20da84ec..c252fb86c07b 100644
--- a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.engine.ts
+++ b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.engine.ts
@@ -50,6 +50,18 @@ export interface MapEngineMarker {
   dispose: () => void;
 }
 
+export interface MapEngineRouteOptions {
+  locations: MapLocation[];
+  color: string;
+  opacity: number;
+  weight: number;
+}
+
+export interface MapEngineRoute {
+  readonly originalRoute: unknown;
+  dispose: () => void;
+}
+
 export interface MapEngineEventHandlers {
   click: (event: MapEngineClickEvent) => void;
   markerSizeChange: () => void;
@@ -59,6 +71,7 @@ export interface MapEngineEventHandlers {
 export interface MapEngineMap {
   readonly originalMap: unknown;
   addMarker: (options: MapEngineMarkerOptions) => MapEngineMarker;
+  addRoute: (options: MapEngineRouteOptions) => MapEngineRoute;
   attachHandlers: (handlers: MapEngineEventHandlers) => void;
   dispose: () => void;
   fitBounds: (bounds: MapEngineBounds, options?: MapEngineFitBoundsOptions) => void;
diff --git a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.openlayers.ts b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.openlayers.ts
index 3286d2d3539b..371d0868102b 100644
--- a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.openlayers.ts
+++ b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.openlayers.ts
@@ -1,3 +1,4 @@
+import Color from '@js/color';
 import messageLocalization from '@js/common/core/localization/message';
 import resizeObserverSingleton from '@js/core/resize_observer';
 import { ALL_FOCUSABLE_ELEMENTS_SELECTOR } from '@ts/core/utils/m_selectors';
@@ -11,6 +12,8 @@ import type {
   MapEngineMap,
   MapEngineMarker,
   MapEngineMarkerOptions,
+  MapEngineRoute,
+  MapEngineRouteOptions,
   MapEngineSetViewOptions,
   MapEngineTileLayerOptions,
   MapEngineUpdateDimensionsResult,
@@ -34,6 +37,7 @@ import type {
   Options,
   OverlayLike,
   TileLayerLike,
+  VectorSourceLike,
   ViewLike,
 } from './provider.dynamic.osm.openlayers.utils';
 import {
@@ -46,6 +50,7 @@ import {
   toCoordinate,
   toLocation,
 } from './provider.dynamic.osm.openlayers.utils';
+import { toRouteCoordinates } from './provider.dynamic.osm.route';
 
 interface MapBrowserEventLike {
   coordinate?: Coordinate;
@@ -105,6 +110,10 @@ class OpenLayersMap implements MapEngineMap {
 
   private _tileLayer?: TileLayerLike;
 
+  private _routeLayer?: object;
+
+  private _routeSource?: VectorSourceLike;
+
   private _disposed = false;
 
   private _markerFitNeedsLayout = false;
@@ -160,6 +169,16 @@ class OpenLayersMap implements MapEngineMap {
     }
 
     this._subscribedView.un('change:center', this._viewCenterChangeHandler);
+    const previousProjection = getCoordinateProjection(
+      this._api,
+      this._subscribedView.getProjection(),
+    );
+    const projection = getCoordinateProjection(this._api, view.getProjection());
+    if (previousProjection !== projection) {
+      this._routeSource?.getFeatures().forEach((feature) => {
+        feature.getGeometry()?.transform(previousProjection, projection);
+      });
+    }
     this._subscribedView = view;
     this._subscribedView.on('change:center', this._viewCenterChangeHandler);
     this._syncMarkerPositions();
@@ -322,6 +341,35 @@ class OpenLayersMap implements MapEngineMap {
     return handle;
   }
 
+  addRoute(options: MapEngineRouteOptions): MapEngineRoute {
+    const { _api: api } = this;
+    const geometry = new api.geom.LineString(toRouteCoordinates(options.locations));
+    geometry.transform(
+      GEOGRAPHIC_PROJECTION,
+      getCoordinateProjection(api, this.originalMap.getView().getProjection()),
+    );
+    const feature = new api.Feature(geometry);
+    const { r, g, b } = new Color(options.color);
+    feature.setStyle(new api.style.Style({
+      stroke: options.weight === 0
+        ? undefined
+        : new api.style.Stroke({ color: [r, g, b, options.opacity], width: options.weight }),
+    }));
+
+    if (!this._routeSource) {
+      this._routeSource = new api.source.Vector();
+      this._routeLayer = new api.layer.Vector({ source: this._routeSource, zIndex: 1 });
+      this.originalMap.addLayer(this._routeLayer);
+    }
+    const source = this._routeSource;
+    source.addFeature(feature);
+
+    return {
+      originalRoute: feature,
+      dispose: (): void => source.removeFeature(feature),
+    };
+  }
+
   private _getMarkerPosition(location: MapEngineMarkerOptions['location']): Coordinate {
     const view = this.originalMap.getView();
     const projection = view.getProjection();
@@ -540,6 +588,12 @@ class OpenLayersMap implements MapEngineMap {
     this._subscribedView.un('change:center', this._viewCenterChangeHandler);
     this._removeOwnedInert();
     [...this._markers].forEach((marker) => marker.dispose());
+    this._routeSource?.clear();
+    this._routeSource = undefined;
+    if (this._routeLayer) {
+      this.originalMap.removeLayer(this._routeLayer);
+      this._routeLayer = undefined;
+    }
     this.setControls(false);
     if (this._tileLayer) {
       this.originalMap.removeLayer(this._tileLayer);
diff --git a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.openlayers.utils.test.ts b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.openlayers.utils.test.ts
index efbd952ccc0a..775305e209a5 100644
--- a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.openlayers.utils.test.ts
+++ b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.openlayers.utils.test.ts
@@ -12,9 +12,11 @@ import {
 } from './provider.dynamic.osm.openlayers.utils';
 
 const createApi = (): unknown => ({
+  Feature: jest.fn(),
   Map: jest.fn(),
   Overlay: jest.fn(),
   View: jest.fn(),
+  geom: { LineString: jest.fn() },
   control: {
     Zoom: jest.fn(),
     defaults: { defaults: () => [] },
@@ -22,14 +24,15 @@ const createApi = (): unknown => ({
   interaction: {
     defaults: { defaults: () => [] },
   },
-  layer: { Tile: jest.fn() },
+  layer: { Tile: jest.fn(), Vector: jest.fn() },
   proj: {
     getUserProjection: () => null,
     toLonLat: () => [0, 0],
     transform: () => [0, 0],
     transformExtent: () => [0, 0, 0, 0],
   },
-  source: { ImageTile: jest.fn() },
+  source: { ImageTile: jest.fn(), Vector: jest.fn() },
+  style: { Stroke: jest.fn(), Style: jest.fn() },
 });
 
 describe('OpenLayers utils', () => {
diff --git a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.openlayers.utils.ts b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.openlayers.utils.ts
index 12b9fa2ec38d..fe4c7653c8db 100644
--- a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.openlayers.utils.ts
+++ b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.openlayers.utils.ts
@@ -42,6 +42,22 @@ export interface OverlayLike {
   setPosition: (position: Coordinate) => void;
 }
 
+export interface GeometryLike {
+  transform: (source: unknown, destination: unknown) => GeometryLike;
+}
+
+export interface FeatureLike {
+  getGeometry: () => GeometryLike | undefined;
+  setStyle: (style: unknown) => void;
+}
+
+export interface VectorSourceLike {
+  addFeature: (feature: FeatureLike) => void;
+  clear: () => void;
+  getFeatures: () => FeatureLike[];
+  removeFeature: (feature: FeatureLike) => void;
+}
+
 export interface MapLike {
   addControl: (control: ControlLike) => void;
   addLayer: (layer: unknown) => void;
@@ -60,9 +76,13 @@ export interface MapLike {
 }
 
 export interface OpenLayersApi {
+  Feature: new (geometry: GeometryLike) => FeatureLike;
   Map: new (options: Options) => MapLike;
   Overlay: new (options: Options) => OverlayLike;
   View: new (options: Options) => ViewLike;
+  geom: {
+    LineString: new (coordinates: Coordinate[]) => GeometryLike;
+  };
   control: {
     Zoom: new () => ControlLike;
     defaults: {
@@ -76,6 +96,7 @@ export interface OpenLayersApi {
   };
   layer: {
     Tile: new (options: Options) => TileLayerLike;
+    Vector: new (options: Options) => object;
   };
   proj: {
     getUserProjection: () => unknown | null;
@@ -85,6 +106,11 @@ export interface OpenLayersApi {
   };
   source: {
     ImageTile: new (options: Options) => unknown;
+    Vector: new (options?: Options) => VectorSourceLike;
+  };
+  style: {
+    Stroke: new (options: Options) => unknown;
+    Style: new (options: Options) => unknown;
   };
 }
 
@@ -101,9 +127,11 @@ export const isOpenLayersApi = (api: unknown): api is OpenLayersApi => {
     return false;
   }
 
-  return typeof api.Map === 'function'
+  return typeof api.Feature === 'function'
+    && typeof api.Map === 'function'
     && typeof api.Overlay === 'function'
     && typeof api.View === 'function'
+    && hasFunction(api.geom, 'LineString')
     && isRecord(api.control)
     && hasFunction(api.control, 'Zoom')
     && isRecord(api.control.defaults)
@@ -112,11 +140,15 @@ export const isOpenLayersApi = (api: unknown): api is OpenLayersApi => {
     && isRecord(api.interaction.defaults)
     && hasFunction(api.interaction.defaults, 'defaults')
     && hasFunction(api.layer, 'Tile')
+    && hasFunction(api.layer, 'Vector')
     && hasFunction(api.proj, 'getUserProjection')
     && hasFunction(api.proj, 'toLonLat')
     && hasFunction(api.proj, 'transform')
     && hasFunction(api.proj, 'transformExtent')
-    && hasFunction(api.source, 'ImageTile');
+    && hasFunction(api.source, 'ImageTile')
+    && hasFunction(api.source, 'Vector')
+    && hasFunction(api.style, 'Stroke')
+    && hasFunction(api.style, 'Style');
 };
 
 export const getCoordinateProjection = (
diff --git a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.route.test.ts b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.route.test.ts
new file mode 100644
index 000000000000..8aeb3cbc402f
--- /dev/null
+++ b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.route.test.ts
@@ -0,0 +1,75 @@
+import { describe, expect, it } from '@jest/globals';
+
+import { getRouteLocations, getRouteLongitudeRange, toRouteCoordinates } from './provider.dynamic.osm.route';
+
+describe('OSM route results', () => {
+  const locations = [{ lat: 40.7, lng: -74 }, { lat: 40.8, lng: -73.9 }];
+
+  it('reads latitude-longitude tuples without modifying the result', () => {
+    const result = Object.freeze([Object.freeze([40.7, -74]), Object.freeze([40.8, -73.9])]);
+    expect(getRouteLocations(result)).toEqual(locations);
+  });
+
+  it('reads GeoJSON longitude-latitude positions and ignores elevation', () => {
+    expect(getRouteLocations({
+      type: 'LineString',
+      coordinates: [[-74, 40.7, 20], [-73.9, 40.8, 30]],
+    })).toEqual(locations);
+  });
+
+  it.each([false, true])('accepts latitude limits and wrapped longitudes (GeoJSON: %s)', (isGeoJson) => {
+    const coordinates = [[-90, -540], [90, 540]];
+    const result = isGeoJson
+      ? { type: 'LineString', coordinates: coordinates.map(([lat, lng]) => [lng, lat]) }
+      : coordinates;
+
+    expect(getRouteLocations(result)).toEqual([{ lat: -90, lng: -540 }, { lat: 90, lng: 540 }]);
+  });
+
+  it.each([-90.001, 90.001])('rejects latitude %s in either coordinate order', (latitude) => {
+    expect(getRouteLocations([[0, 10], [latitude, 11]])).toBeUndefined();
+    expect(getRouteLocations({
+      type: 'LineString', coordinates: [[10, 0], [11, latitude]],
+    })).toBeUndefined();
+  });
+
+  it.each([
+    undefined, null, '', {}, [], [[40.7, -74]],
+    [[40.7, -74], [NaN, -73]], [[40.7, -74], [40.8, Infinity]],
+    [[40.7, -74], ['40.8', -73]], [[40.7, -74], [40.8]],
+    [[40.7, -74], [40.8, -73, 0]], [[40.7, -74], null],
+    new Array(2), [[40.7, -74], new Array(2)],
+    { type: 'LineString', coordinates: [[-74, 40.7]] },
+    { type: 'LineString', coordinates: [[-74, 40.7], []] },
+    { type: 'MultiLineString', coordinates: [[[-74, 40.7], [-73, 40.8]]] },
+    { type: 'Feature', geometry: { type: 'LineString', coordinates: [[-74, 40.7], [-73, 40.8]] } },
+  ])('rejects an unsupported result: %j', (result) => {
+    expect(getRouteLocations(result)).toBeUndefined();
+  });
+});
+
+describe('toRouteCoordinates', () => {
+  it.each([
+    [[179, -179], [179, 181]],
+    [[-179, 179], [-179, -181]],
+    [[-74, -73], [-74, -73]],
+    [[-120, 0, 120], [-120, 0, 120]],
+  ])('keeps consecutive longitudes %j in the nearest world', (longitudes, expected) => {
+    expect(toRouteCoordinates(longitudes.map((lng) => ({ lat: 10, lng }))))
+      .toEqual(expected.map((lng) => [lng, 10]));
+  });
+});
+
+describe('getRouteLongitudeRange', () => {
+  it.each([
+    [[-74, -73, -75], [-75, -73]],
+    [[179, -179], [179, 181]],
+    [[-179, 179], [-181, -179]],
+    [[-120, 0, 120], [-120, 120]],
+    [[0, 120, -120, 0], [0, 360]],
+    [[10, 10], [10, 10]],
+  ])('finds the continuous range of longitudes %j', (longitudes, expected) => {
+    expect(getRouteLongitudeRange(longitudes.map((lng) => ({ lat: 10, lng }))))
+      .toEqual(expected);
+  });
+});
diff --git a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.route.ts b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.route.ts
new file mode 100644
index 000000000000..97ff243d3b9b
--- /dev/null
+++ b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.route.ts
@@ -0,0 +1,54 @@
+import type { MapLocation } from '@js/ui/map';
+
+export const getRouteLocations = (result: unknown): MapLocation[] | undefined => {
+  const isGeoJson = result !== null && typeof result === 'object'
+    && 'type' in result && result.type === 'LineString';
+  const coordinates = isGeoJson && 'coordinates' in result
+    ? result.coordinates
+    : result;
+
+  if (!Array.isArray(coordinates) || coordinates.length < 2) {
+    return undefined;
+  }
+
+  const locations: MapLocation[] = [];
+  for (const coordinate of coordinates) {
+    if (!Array.isArray(coordinate)
+      || (isGeoJson ? coordinate.length < 2 : coordinate.length !== 2)
+      || !Number.isFinite(coordinate[0]) || !Number.isFinite(coordinate[1])) {
+      return undefined;
+    }
+
+    const [first, second] = coordinate as [number, number];
+    const location = isGeoJson ? { lat: second, lng: first } : { lat: first, lng: second };
+    if (location.lat < -90 || location.lat > 90) {
+      return undefined;
+    }
+    locations.push(location);
+  }
+
+  return locations;
+};
+
+export const toRouteCoordinates = (locations: MapLocation[]): [number, number][] => {
+  let previousLongitude = locations[0].lng;
+
+  return locations.map(({ lat, lng }) => {
+    const longitude = lng + Math.round((previousLongitude - lng) / 360) * 360;
+    previousLongitude = longitude;
+
+    return [longitude, lat];
+  });
+};
+
+export const getRouteLongitudeRange = (locations: MapLocation[]): [number, number] => {
+  let west = locations[0].lng;
+  let east = west;
+
+  for (const [longitude] of toRouteCoordinates(locations)) {
+    west = Math.min(west, longitude);
+    east = Math.max(east, longitude);
+  }
+
+  return [west, east];
+};
diff --git a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.test.ts b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.test.ts
index 9c0bcd76e22e..69502e190b90 100644
--- a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.test.ts
+++ b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.test.ts
@@ -102,5 +102,29 @@ describe('OSM bounds', () => {
         { northEast: { lat: 0, lng: 120 }, southWest: { lat: 0, lng: -120 } },
       ]).toContainEqual(bounds);
     });
+
+    it.each([
+      [[[-120, 0, 120]], [], -120, 120],
+      [[[120, 0, -120]], [], -120, 120],
+      [[[179, -179]], [178], 178, -179],
+      [[[-179, 179]], [-178], 179, -178],
+      [[[170, -175], [-170, 175]], [], 170, -170],
+      [[[-120, 0, 120], [120, -120]], [], -180, 180],
+      [[[0, 120, -120, 0]], [], -180, 180],
+      [[[10, 10]], [], 10, 10],
+      [[[]], [15], 15, 15],
+    ] as [number[][], number[], number, number][])(
+      'does not cut route segments in %j with markers %j',
+      (routeLongitudes, markerLongitudes, west, east) => {
+        const routes = routeLongitudes.map((longitudes) => (
+          longitudes.map((lng) => ({ lat: 10, lng }))
+        ));
+        const markers = markerLongitudes.map((lng) => ({ lat: 10, lng }));
+        expect(createBounds([...routes.flat(), ...markers], routes)).toEqual({
+          northEast: { lat: 10, lng: east },
+          southWest: { lat: 10, lng: west },
+        });
+      },
+    );
   });
 });
diff --git a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts
index a1b5394ce924..c721bd6c49c7 100644
--- a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts
+++ b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts
@@ -11,6 +11,7 @@ import type {
   LocationOption,
   MarkerObject,
   MarkerOptions,
+  RouteObject,
   RouteOptions,
 } from './provider.dynamic';
 import DynamicProvider from './provider.dynamic';
@@ -20,6 +21,7 @@ import type {
   MapEngineClickEvent,
   MapEngineMap,
   MapEngineMarker,
+  MapEngineRoute,
   MapEngineTileLayerOptions,
   MapEngineViewState,
 } from './provider.dynamic.osm.engine';
@@ -28,6 +30,7 @@ import {
   SUBDOMAIN_PLACEHOLDER,
 } from './provider.dynamic.osm.engine';
 import { createOpenLayersEngine } from './provider.dynamic.osm.openlayers';
+import { getRouteLocations, getRouteLongitudeRange } from './provider.dynamic.osm.route';
 
 const DEFAULT_MAX_ZOOM = 19;
 const DEFAULT_SUBDOMAINS = 'abc';
@@ -62,7 +65,10 @@ export const normalizeLongitude = (longitude: number): number => {
   return (positive % FULL_CIRCLE_DEGREES) - HALF_CIRCLE_DEGREES;
 };
 
-export const createBounds = (locations: MapLocation[]): MapEngineBounds | undefined => {
+export const createBounds = (
+  locations: MapLocation[],
+  routes: MapLocation[][] = [],
+): MapEngineBounds | undefined => {
   if (!locations.length) {
     return undefined;
   }
@@ -77,6 +83,7 @@ export const createBounds = (locations: MapLocation[]): MapEngineBounds | undefi
     south = Math.min(south, lat);
   });
   longitudes.sort((first, second) => first - second);
+  const routeRanges = routes.filter((route) => route.length).map(getRouteLongitudeRange);
   let largestGap = -1;
   let westIndex = 0;
 
@@ -85,8 +92,15 @@ export const createBounds = (locations: MapLocation[]): MapEngineBounds | undefi
       ? longitudes[0] + FULL_CIRCLE_DEGREES
       : longitudes[index + 1];
     const gap = nextLongitude - longitude;
+    const midpoint = longitude + gap / 2;
+    const crossesRoute = routeRanges.some(([west, east]) => {
+      const offset = (((midpoint - west) % FULL_CIRCLE_DEGREES) + FULL_CIRCLE_DEGREES)
+        % FULL_CIRCLE_DEGREES;
 
-    if (gap > largestGap) {
+      return offset < east - west;
+    });
+
+    if (gap > largestGap && !crossesRoute) {
       largestGap = gap;
       westIndex = (index + 1) % longitudes.length;
     }
@@ -95,11 +109,13 @@ export const createBounds = (locations: MapLocation[]): MapEngineBounds | undefi
   return {
     northEast: {
       lat: north,
-      lng: longitudes[(westIndex + longitudes.length - 1) % longitudes.length],
+      lng: largestGap < 0
+        ? HALF_CIRCLE_DEGREES
+        : longitudes[(westIndex + longitudes.length - 1) % longitudes.length],
     },
     southWest: {
       lat: south,
-      lng: longitudes[westIndex],
+      lng: largestGap < 0 ? -HALF_CIRCLE_DEGREES : longitudes[westIndex],
     },
   };
 };
@@ -109,6 +125,11 @@ interface EngineMarkerObject extends MarkerObject {
   location: MapLocation;
 }
 
+interface EngineRouteObject extends RouteObject {
+  engineRoute?: MapEngineRoute;
+  locations: MapLocation[];
+}
+
 const areLocationsEqual = (
   first: MapLocation | null,
   second: MapLocation,
@@ -117,6 +138,8 @@ const areLocationsEqual = (
   && Math.abs(first.lng - second.lng) < LOCATION_EPSILON;
 
 class OsmProvider extends DynamicProvider<MapLocation | undefined> {
+  declare _routes: (EngineRouteObject & { options: RouteOptions })[];
+
   _engine?: MapEngine;
 
   _engineMap?: MapEngineMap;
@@ -127,6 +150,8 @@ class OsmProvider extends DynamicProvider<MapLocation | undefined> {
 
   _calculateLocationWarningLogged = false;
 
+  _calculateRouteWarningLogged = false;
+
   _loadImpl(): Promise<void> {
     const window = getWindow() as Window & { ol?: unknown };
     const engine = getRegisteredMapEngine() ?? createOpenLayersEngine(window.ol);
@@ -437,7 +462,8 @@ class OsmProvider extends DynamicProvider<MapLocation | undefined> {
 
   _fitBounds(): Promise<void> {
     this._updateBounds();
-    this._bounds = createBounds(this._boundLocations) ?? null;
+    this._bounds = createBounds(this._boundLocations, this._routes.map((route) => route.locations))
+      ?? null;
 
     const engineMap = this._engineMap;
     if (!engineMap || !this._bounds || !this._option('autoAdjust')) {
@@ -475,13 +501,118 @@ class OsmProvider extends DynamicProvider<MapLocation | undefined> {
     this._boundLocations = [];
   }
 
-  addRoutes(routes: RouteOptions[]): Promise<[boolean, unknown[]]> {
-    return Promise.resolve([false, routes.map(() => undefined)]);
+  _resolveRouteLocation(location: LocationOption): Promise<MapLocation | undefined> {
+    if (typeof location !== 'string') {
+      return this._resolveLocation(location);
+    }
+
+    const coordinates = this._getLatLng(location);
+    if (coordinates && Number.isFinite(coordinates.lat) && Number.isFinite(coordinates.lng)) {
+      return Promise.resolve(coordinates);
+    }
+
+    return this._geocodeLocation(location);
+  }
+
+  _calculateRoute(options: RouteOptions): Promise<MapLocation[] | undefined> {
+    const calculateRoute = this._option('providerConfig')?.calculateRoute;
+    if (!calculateRoute) {
+      if (!this._calculateRouteWarningLogged) {
+        errors.log('W1033');
+        this._calculateRouteWarningLogged = true;
+      }
+
+      return Promise.resolve(undefined);
+    }
+
+    const engineMap = this._engineMap;
+    return Promise.all(
+      (options.locations ?? []).map((location) => this._resolveRouteLocation(location)),
+    )
+      .then((locations) => {
+        if (engineMap !== this._engineMap) {
+          throw new Error('The map was disposed or replaced during route creation.');
+        }
+        if (!locations.every((location): location is MapLocation => location !== undefined)) {
+          return undefined;
+        }
+
+        return Promise.resolve()
+          .then(() => calculateRoute({ locations, mode: options.mode ?? 'driving' }))
+          .then((result) => {
+            const routeLocations = getRouteLocations(result);
+            if (!routeLocations) {
+              errors.log('W1006', 'calculateRoute returned an invalid result.');
+            }
+
+            return routeLocations;
+          }, (error) => {
+            errors.log('W1006', error);
+
+            return undefined;
+          });
+      });
+  }
+
+  _addRoute(options: RouteOptions): Promise<EngineRouteObject> {
+    return this._renderRoute(options).then((routeObject) => {
+      if (routeObject.engineRoute) {
+        this._routes.push({ ...routeObject, options });
+        this._fireRouteAddedAction({ options, originalRoute: routeObject.instance });
+      }
+
+      return routeObject;
+    });
+  }
+
+  _renderRoute(options: RouteOptions): Promise<EngineRouteObject> {
+    const engineMap = this._engineMap;
+    if (!engineMap) {
+      return Promise.reject(errors.Error('E1069'));
+    }
+
+    return this._calculateRoute(options)
+      .then((locations) => {
+        if (engineMap !== this._engineMap) {
+          throw new Error('The map was disposed or replaced during route creation.');
+        }
+        if (!locations) {
+          return { locations: [] };
+        }
+
+        const engineRoute = engineMap.addRoute({
+          locations,
+          color: options.color ?? this._defaultRouteColor(),
+          opacity: options.opacity ?? this._defaultRouteOpacity(),
+          weight: options.weight ?? this._defaultRouteWeight(),
+        });
+
+        return { engineRoute, locations, instance: engineRoute.originalRoute };
+      });
+  }
+
+  _destroyRoute(route: EngineRouteObject): void {
+    route.engineRoute?.dispose();
+  }
+
+  updateRoutes(routesToRemove: RouteOptions[], routesToAdd: RouteOptions[]): Promise<unknown> {
+    return this._applyFunctionIfNeeded('removeRoutes', routesToRemove)
+      .then(() => this._applyFunctionIfNeeded('addRoutes', routesToAdd));
+  }
+
+  _updateBounds(): void {
+    super._updateBounds();
+    if (this._option('autoAdjust')) {
+      this._routes.forEach((route) => {
+        route.locations.forEach((location) => this._extendBounds(location));
+      });
+    }
   }
 
   clean(): Promise<void> {
     if (this._engineMap) {
       this._clearMarkers();
+      this._clearRoutes();
     }
     this._engineMap?.dispose();
     this._engineMap = undefined;
diff --git a/packages/devextreme/js/ui/map/openlayers.register.js b/packages/devextreme/js/ui/map/openlayers.register.js
index 4289f50b51cb..affa22c839a0 100644
--- a/packages/devextreme/js/ui/map/openlayers.register.js
+++ b/packages/devextreme/js/ui/map/openlayers.register.js
@@ -1,7 +1,10 @@
 import { defaults as defaultControls } from 'ol/control/defaults.js';
 import Zoom from 'ol/control/Zoom.js';
+import Feature from 'ol/Feature.js';
+import LineString from 'ol/geom/LineString.js';
 import { defaults as defaultInteractions } from 'ol/interaction/defaults.js';
 import TileLayer from 'ol/layer/Tile.js';
+import VectorLayer from 'ol/layer/Vector.js';
 import Map from 'ol/Map.js';
 import Overlay from 'ol/Overlay.js';
 import {
@@ -11,15 +14,20 @@ import {
     transformExtent,
 } from 'ol/proj.js';
 import ImageTile from 'ol/source/ImageTile.js';
+import VectorSource from 'ol/source/Vector.js';
+import Stroke from 'ol/style/Stroke.js';
+import Style from 'ol/style/Style.js';
 import View from 'ol/View.js';
 
 import { setRegisteredMapEngine } from '../../__internal/ui/map/provider.dynamic.osm.engine';
 import { createOpenLayersEngine } from '../../__internal/ui/map/provider.dynamic.osm.openlayers';
 
 setRegisteredMapEngine(createOpenLayersEngine({
+    Feature,
     Map,
     Overlay,
     View,
+    geom: { LineString },
     control: {
         Zoom,
         defaults: {
@@ -33,6 +41,7 @@ setRegisteredMapEngine(createOpenLayersEngine({
     },
     layer: {
         Tile: TileLayer,
+        Vector: VectorLayer,
     },
     proj: {
         getUserProjection,
@@ -42,5 +51,7 @@ setRegisteredMapEngine(createOpenLayersEngine({
     },
     source: {
         ImageTile,
+        Vector: VectorSource,
     },
+    style: { Stroke, Style },
 }));
diff --git a/packages/devextreme/testing/helpers/forMap/openLayersMock.js b/packages/devextreme/testing/helpers/forMap/openLayersMock.js
index ed9903c3f773..e65588ec4165 100644
--- a/packages/devextreme/testing/helpers/forMap/openLayersMock.js
+++ b/packages/devextreme/testing/helpers/forMap/openLayersMock.js
@@ -149,6 +149,10 @@
         }
 
         addLayer(layer) {
+            if(layer instanceof MockVectorLayer) {
+                api.addedVectorLayers.push(layer);
+                return;
+            }
             api.tileLayer = layer;
             api.addedTileLayers.push(layer);
         }
@@ -233,10 +237,82 @@
             api.tileSourceChanges.push(source);
         }
     }
+    class MockLineString {
+        constructor(coordinates) {
+            this.coordinates = coordinates;
+        }
+        transform(source, destination) {
+            this.coordinates = this.coordinates.map(coordinate => transformCoordinate(coordinate, source, destination));
+            return this;
+        }
+        getCoordinates() {
+            return this.coordinates;
+        }
+    }
+    class MockFeature {
+        constructor(geometry) {
+            this.geometry = geometry;
+        }
+        getGeometry() {
+            return this.geometry;
+        }
+        setStyle(style) {
+            this.style = style;
+        }
+        getStyle() {
+            return this.style;
+        }
+    }
+    class MockVectorSource {
+        constructor() {
+            this.features = [];
+        }
+        addFeature(feature) {
+            this.features.push(feature);
+        }
+        removeFeature(feature) {
+            this.features = this.features.filter(item => item !== feature);
+        }
+        getFeatures() {
+            return this.features.slice();
+        }
+        clear() {
+            this.features = [];
+        }
+    }
+    class MockVectorLayer {
+        constructor(options) {
+            this.options = options;
+        }
+        getSource() {
+            return this.options.source;
+        }
+    }
+    class MockStroke {
+        constructor(options) {
+            this.options = options;
+        }
+        getColor() {
+            return this.options.color;
+        }
+        getWidth() {
+            return this.options.width;
+        }
+    }
+    class MockStyle {
+        constructor(options) {
+            this.options = options;
+        }
+        getStroke() {
+            return this.options.stroke;
+        }
+    }
     Object.assign(api, {
+        Feature: MockFeature,
         Map: MockMap,
         Overlay: MockOverlay,
         View: MockView,
+        geom: { LineString: MockLineString },
         control: {
             Zoom: MockZoom,
             defaults: {
@@ -256,7 +332,8 @@
             }
         },
         layer: {
-            Tile: MockTileLayer
+            Tile: MockTileLayer,
+            Vector: MockVectorLayer
         },
         proj: {
             getUserProjection() {
@@ -295,8 +372,10 @@
             }
         },
         source: {
-            ImageTile: MockImageTile
-        }
+            ImageTile: MockImageTile,
+            Vector: MockVectorSource
+        },
+        style: { Stroke: MockStroke, Style: MockStyle }
     });
     window.ol = api;
 })();
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js
index dc151a3b2295..975adf887dee 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js
@@ -23,6 +23,7 @@ const resetOpenLayersMock = () => {
         addedControls: [],
         addedOverlays: [],
         addedTileLayers: [],
+        addedVectorLayers: [],
         controlOptions: null,
         fitCallCount: 0,
         fitZoom: undefined,
@@ -1032,6 +1033,7 @@ QUnit.module('OSM: location calculation', moduleConfig, () => {
             setView
         };
         provider._markers = [];
+        provider._routes = [];
         const update = provider.updateCenter();
         provider.clean();
         resolveLocation({
@@ -1166,6 +1168,7 @@ QUnit.module('OSM: location calculation', moduleConfig, () => {
             dispose: sinon.spy()
         };
         provider._markers = [];
+        provider._routes = [];
         const add = provider.addMarkers([{
             location: 'New York'
         }]);
@@ -1873,6 +1876,520 @@ QUnit.module('OSM: markers', moduleConfig, () => {
         });
     });
 });
+QUnit.module('OSM: routes', moduleConfig, () => {
+    const tileServer = {
+        url: 'https://tiles.example.com/{z}/{x}/{y}.png',
+        attribution: 'Example attribution'
+    };
+    const path = [[40.7, -74], [40.9, -73.8], [40.8, -73.9]];
+    const route = { locations: [[40.7, -74], [40.8, -73.9]] };
+    const createMap = (options = {}) => new Promise(resolve => {
+        $('#map').dxMap({
+            provider: 'osm',
+            autoAdjust: false,
+            providerConfig: { tileServer, calculateRoute: () => Promise.resolve(path) },
+            ...options,
+            onReady: ({ component }) => resolve(component)
+        });
+    });
+    const getRouteSource = () => openLayersMock.addedVectorLayers[0].getSource();
+
+    [false, true].forEach(geoJson => {
+        QUnit.test(`initial route renders ${geoJson ? 'GeoJSON' : 'tuples'} with default styles`, async function(assert) {
+            const result = geoJson ? {
+                type: 'LineString',
+                coordinates: path.map(([lat, lng]) => [lng, lat, 10])
+            } : path;
+            const calculateRoute = sinon.stub().returns(Promise.resolve(result));
+            const onRouteAdded = sinon.spy();
+            await createMap({
+                routes: [route],
+                providerConfig: { tileServer, calculateRoute },
+                onRouteAdded
+            });
+            const feature = getRouteSource().getFeatures()[0];
+            assert.deepEqual(feature.getGeometry().getCoordinates(), [[-74000, 40700], [-73800, 40900], [-73900, 40800]], 'geometry is in the view projection');
+            assert.deepEqual(calculateRoute.firstCall.args[0], {
+                locations: [{ lat: 40.7, lng: -74 }, { lat: 40.8, lng: -73.9 }],
+                mode: 'driving'
+            }, 'callback receives resolved locations and default mode');
+            assert.strictEqual(onRouteAdded.firstCall.args[0].originalRoute, feature, 'event exposes the OpenLayers feature');
+            assert.deepEqual(feature.getStyle().getStroke().getColor(), [0, 0, 255, 0.5], 'shared route color and opacity defaults');
+            assert.strictEqual(feature.getStyle().getStroke().getWidth(), 5, 'shared route weight default');
+            assert.strictEqual(openLayersMock.fitCallCount, 0, 'autoAdjust false preserves the viewport');
+        });
+    });
+
+    QUnit.test('addRoute and removeRoute manage features, return values and events', async function(assert) {
+        const onRouteAdded = sinon.spy();
+        const onRouteRemoved = sinon.spy();
+        const map = await createMap({ onRouteAdded, onRouteRemoved });
+        const originalRoute = await map.addRoute(route);
+        assert.strictEqual(originalRoute, getRouteSource().getFeatures()[0], 'addRoute returns the feature');
+        assert.strictEqual(onRouteAdded.firstCall.args[0].options, route, 'original route options are reported');
+        await map.removeRoute(route);
+        assert.strictEqual(getRouteSource().getFeatures().length, 0, 'feature is removed');
+        assert.strictEqual(onRouteRemoved.firstCall.args[0].options, route, 'removal event has the route options');
+    });
+
+    QUnit.test('multiple routes keep separate geometry and styles when one is removed', async function(assert) {
+        const drivingRoute = { ...route, mode: 'driving', color: '#ff0000', opacity: 0.7, weight: 3 };
+        const walkingRoute = {
+            locations: [[40.6, -73.7], [40.65, -73.6]],
+            mode: 'walking', color: '#008000', opacity: 0.4, weight: 8
+        };
+        const walkingPath = {
+            type: 'LineString',
+            coordinates: [[-73.7, 40.6], [-73.65, 40.62], [-73.6, 40.65]]
+        };
+        const calculateRoute = sinon.stub().callsFake(({ mode }) => Promise.resolve(mode === 'driving' ? path : walkingPath));
+        const onRouteAdded = sinon.spy();
+        const onRouteRemoved = sinon.spy();
+        const map = await createMap({
+            routes: [drivingRoute, walkingRoute],
+            providerConfig: { tileServer, calculateRoute },
+            onRouteAdded,
+            onRouteRemoved
+        });
+        const source = getRouteSource();
+        const drivingFeature = onRouteAdded.getCalls().find(call => call.args[0].options === drivingRoute).args[0].originalRoute;
+        const walkingFeature = onRouteAdded.getCalls().find(call => call.args[0].options === walkingRoute).args[0].originalRoute;
+
+        assert.strictEqual(calculateRoute.callCount, 2, 'each route is calculated once');
+        assert.ok(calculateRoute.calledWithExactly({
+            locations: [{ lat: 40.7, lng: -74 }, { lat: 40.8, lng: -73.9 }], mode: 'driving'
+        }), 'driving callback receives its own waypoints and mode');
+        assert.ok(calculateRoute.calledWithExactly({
+            locations: [{ lat: 40.6, lng: -73.7 }, { lat: 40.65, lng: -73.6 }], mode: 'walking'
+        }), 'walking callback receives its own waypoints and mode');
+        assert.strictEqual(source.getFeatures().length, 2, 'both routes are rendered');
+        assert.ok(source.getFeatures().includes(drivingFeature), 'driving event exposes its rendered feature');
+        assert.ok(source.getFeatures().includes(walkingFeature), 'walking event exposes its rendered feature');
+        assert.deepEqual(drivingFeature.getGeometry().getCoordinates(), [[-74000, 40700], [-73800, 40900], [-73900, 40800]], 'driving route uses the tuple result');
+        assert.deepEqual(walkingFeature.getGeometry().getCoordinates(), [[-73700, 40600], [-73650, 40620], [-73600, 40650]], 'walking route uses the GeoJSON result');
+        assert.deepEqual(drivingFeature.getStyle().getStroke().getColor(), [255, 0, 0, 0.7], 'driving color and opacity');
+        assert.strictEqual(drivingFeature.getStyle().getStroke().getWidth(), 3, 'driving weight');
+        assert.deepEqual(walkingFeature.getStyle().getStroke().getColor(), [0, 128, 0, 0.4], 'walking color and opacity');
+        assert.strictEqual(walkingFeature.getStyle().getStroke().getWidth(), 8, 'walking weight');
+
+        await map.removeRoute(drivingRoute);
+
+        assert.deepEqual(map.option('routes'), [walkingRoute], 'only the requested route is removed from options');
+        assert.strictEqual(source.getFeatures().length, 1, 'one route remains');
+        assert.strictEqual(source.getFeatures()[0], walkingFeature, 'the remaining feature is not recreated');
+        assert.deepEqual(walkingFeature.getGeometry().getCoordinates(), [[-73700, 40600], [-73650, 40620], [-73600, 40650]], 'remaining geometry is unchanged');
+        assert.deepEqual(walkingFeature.getStyle().getStroke().getColor(), [0, 128, 0, 0.4], 'remaining color and opacity are unchanged');
+        assert.strictEqual(walkingFeature.getStyle().getStroke().getWidth(), 8, 'remaining weight is unchanged');
+        assert.strictEqual(calculateRoute.callCount, 2, 'removal does not recalculate the remaining route');
+        assert.strictEqual(onRouteAdded.callCount, 2, 'removal does not add the remaining route again');
+        assert.strictEqual(onRouteRemoved.callCount, 1, 'one removal event is raised');
+        assert.strictEqual(onRouteRemoved.firstCall.args[0].options, drivingRoute, 'removal event identifies the removed route');
+    });
+
+    QUnit.test('route updates reuse one layer and honor zero opacity', async function(assert) {
+        const map = await createMap({ routes: [route] });
+        const source = getRouteSource();
+        const oldFeature = source.getFeatures()[0];
+        map.option('routes', [{ ...route, color: '#ff0000', opacity: 0, weight: 8 }]);
+        await map._lastAsyncAction;
+        const features = source.getFeatures();
+        assert.strictEqual(features.length, 1, 'old route is replaced');
+        assert.notStrictEqual(features[0], oldFeature, 'updated route has a new feature');
+        assert.strictEqual(openLayersMock.addedVectorLayers.length, 1, 'vector layer is reused');
+        assert.deepEqual(features[0].getStyle().getStroke().getColor(), [255, 0, 0, 0], 'zero opacity is preserved');
+        assert.strictEqual(features[0].getStyle().getStroke().getWidth(), 8, 'weight is updated');
+    });
+
+    QUnit.test('zero weight omits the stroke but keeps a removable route instance', async function(assert) {
+        const onRouteAdded = sinon.spy();
+        const onRouteRemoved = sinon.spy();
+        const map = await createMap({ routes: [{ ...route, weight: 8 }], onRouteAdded, onRouteRemoved });
+        const zeroWeightRoute = { ...route, weight: 0 };
+        const feature = await map.addRoute(zeroWeightRoute);
+        assert.ok(feature, 'valid geometry still creates a route instance');
+        assert.notOk(feature.getStyle().getStroke(), 'no stroke is sent to the renderer for zero weight');
+        assert.strictEqual(getRouteSource().getFeatures().length, 2, 'both valid routes remain in the source');
+        assert.strictEqual(onRouteAdded.secondCall.args[0].originalRoute, feature, 'added event exposes the instance');
+        await map.removeRoute(zeroWeightRoute);
+        assert.strictEqual(onRouteRemoved.firstCall.args[0].options, zeroWeightRoute, 'removed event identifies the route');
+        assert.strictEqual(getRouteSource().getFeatures().length, 1, 'the other route remains');
+    });
+
+    ['walking', 'cycling'].forEach(mode => {
+        QUnit.test(`route callback resolves addresses and passes ${mode} unchanged with a PromiseLike result`, async function(assert) {
+            const calculateLocation = sinon.stub().callsFake(query => Promise.resolve(query === 'Start'
+                ? { lat: 40.7, lng: -74 } : { lat: 40.8, lng: -73.9 }));
+            const calculateRoute = sinon.stub().callsFake(() => $.Deferred().resolve(path).promise());
+            await createMap({
+                routes: [{ locations: ['Start', 'Finish'], mode }],
+                providerConfig: { tileServer, calculateLocation, calculateRoute }
+            });
+            assert.deepEqual(calculateRoute.firstCall.args[0], {
+                locations: [{ lat: 40.7, lng: -74 }, { lat: 40.8, lng: -73.9 }], mode
+            }, 'locations and mode are passed to the callback');
+            assert.strictEqual(calculateLocation.callCount, 2, 'addresses are resolved once');
+            assert.strictEqual(getRouteSource().getFeatures().length, 1, 'thenable result is rendered');
+        });
+    });
+
+    ['missing', 'undefined', 'throw', 'reject'].forEach(failure => {
+        QUnit.test(`unresolved route address skips routing without a zero-coordinate fallback (${failure})`, async function(assert) {
+            const reason = new Error('Location service unavailable');
+            const calculateLocation = sinon.stub().callsFake(() => {
+                if(failure === 'throw') {
+                    throw reason;
+                }
+                return failure === 'reject' ? Promise.reject(reason) : Promise.resolve(undefined);
+            });
+            const calculateRoute = sinon.stub().returns(Promise.resolve(path));
+            const onRouteAdded = sinon.spy();
+            const onRouteRemoved = sinon.spy();
+            const providerConfig = { tileServer, calculateRoute };
+            if(failure !== 'missing') {
+                providerConfig.calculateLocation = calculateLocation;
+            }
+            const log = sinon.stub(errors, 'log');
+            try {
+                const map = await createMap({ providerConfig, onRouteAdded, onRouteRemoved });
+                const failedRoute = { locations: ['Unknown address', [40.8, -73.9]] };
+                assert.strictEqual(await map.addRoute(failedRoute), undefined, 'the operation completes without an instance');
+                assert.ok(calculateRoute.notCalled, 'unresolved waypoints are not passed to the route service');
+                assert.strictEqual(openLayersMock.addedVectorLayers.length, 0, 'no route is drawn');
+                assert.ok(onRouteAdded.notCalled, 'no added event is fired');
+                assert.ok(log.calledOnceWithExactly(...(failure === 'missing'
+                    ? ['W1031']
+                    : ['W1006', failure === 'undefined' ? 'calculateLocation returned an invalid result.' : reason])), 'existing location diagnostics report the failure');
+                await map.removeRoute(failedRoute);
+                assert.ok(onRouteRemoved.notCalled, 'no removed event is fired');
+                if(failure !== 'missing') {
+                    calculateLocation.callsFake(() => Promise.resolve({ lat: 40.7, lng: -74 }));
+                    const result = await map.addRoute(failedRoute);
+                    assert.ok(result, 'an explicit later attempt can succeed');
+                    assert.ok(calculateLocation.calledTwice, 'failed geocoding was not cached');
+                    assert.ok(calculateRoute.calledOnce, 'only the successful attempt requests a route');
+                }
+            } finally {
+                log.restore();
+            }
+        });
+    });
+
+    QUnit.test('explicit zero coordinates and a successfully calculated zero location are valid route waypoints', async function(assert) {
+        const calculateLocation = sinon.stub().returns(Promise.resolve({ lat: 0, lng: 0 }));
+        const calculateRoute = sinon.stub().returns(Promise.resolve(path));
+        await createMap({
+            routes: [{ locations: [[0, 0], { lat: 0, lng: 0 }, '0, 0', 'Known location'] }],
+            providerConfig: { tileServer, calculateLocation, calculateRoute }
+        });
+        assert.ok(calculateLocation.calledOnceWithExactly('Known location'), 'coordinate strings bypass geocoding');
+        assert.deepEqual(calculateRoute.firstCall.args[0].locations, Array(4).fill({ lat: 0, lng: 0 }), 'valid zero coordinates are passed unchanged');
+        assert.strictEqual(getRouteSource().getFeatures().length, 1, 'the route is rendered');
+    });
+
+    QUnit.test('missing callback warns without drawing a straight line', async function(assert) {
+        const log = sinon.stub(errors, 'log');
+        const onRouteAdded = sinon.spy();
+        const onRouteRemoved = sinon.spy();
+        try {
+            const map = await createMap({ providerConfig: { tileServer }, onRouteAdded, onRouteRemoved });
+            const result = await map.addRoute(route);
+            assert.ok(log.calledOnceWithExactly('W1033'), 'missing callback is reported');
+            assert.strictEqual(result, undefined, 'skipped route has no instance');
+            assert.ok(onRouteAdded.notCalled, 'skipped route fires no added event');
+            assert.strictEqual(map._provider._routes.length, 0, 'skipped route is not stored in the provider');
+            assert.strictEqual(openLayersMock.addedVectorLayers.length, 0, 'no fallback line is drawn');
+            await map.addMarker({ location: [40.7, -74] });
+            await map.removeRoute(route);
+            assert.ok(onRouteRemoved.notCalled, 'removing skipped route options fires no removed event');
+            assert.deepEqual(map.option('routes'), [], 'skipped route options can still be removed');
+            assert.strictEqual(openLayersMock.addedOverlays.length, 1, 'map continues to accept operations');
+        } finally {
+            log.restore();
+        }
+    });
+
+    QUnit.test('missing route callback warns once for initial and subsequently added routes', async function(assert) {
+        const log = sinon.stub(errors, 'log');
+        try {
+            const map = await createMap({
+                routes: [route, { ...route, mode: 'walking' }],
+                providerConfig: { tileServer }
+            });
+            assert.ok(log.calledOnceWithExactly('W1033'), 'initial routes share one configuration warning');
+
+            await map.addRoute({ ...route });
+            await map.addRoute({ ...route, mode: 'walking' });
+            assert.ok(log.calledOnceWithExactly('W1033'), 'later attempts do not repeat the warning');
+        } finally {
+            log.restore();
+        }
+    });
+
+    QUnit.test('a route callback configured after a warning is still called', async function(assert) {
+        const log = sinon.stub(errors, 'log');
+        const providerConfig = {};
+        const provider = new OsmProvider({ option: () => ({ providerConfig }) }, null);
+        const calculateRoute = sinon.stub().returns(Promise.resolve(path));
+        try {
+            assert.strictEqual(await provider._calculateRoute(route), undefined, 'unconfigured route is skipped');
+            providerConfig.calculateRoute = calculateRoute;
+
+            const locations = await provider._calculateRoute(route);
+            assert.ok(calculateRoute.calledOnceWithExactly({
+                locations: [{ lat: 40.7, lng: -74 }, { lat: 40.8, lng: -73.9 }],
+                mode: 'driving'
+            }), 'warning suppression does not skip a configured callback');
+            assert.deepEqual(locations, path.map(([lat, lng]) => ({ lat, lng })), 'route geometry is returned');
+            assert.ok(log.calledOnceWithExactly('W1033'), 'only the missing configuration was reported');
+        } finally {
+            log.restore();
+        }
+    });
+
+    QUnit.test('missing route callback skips address lookup and does not block map initialization', async function(assert) {
+        const calculateLocation = sinon.stub().returns(new Promise(() => {}));
+        const log = sinon.stub(errors, 'log');
+        try {
+            const map = await createMap({
+                routes: [{ locations: ['Start', 'Finish'] }],
+                providerConfig: { tileServer, calculateLocation }
+            });
+            assert.ok(calculateLocation.notCalled, 'no geocoding is needed when routing is unavailable');
+            assert.ok(log.calledOnceWithExactly('W1033'), 'missing callback is reported once');
+            assert.strictEqual(openLayersMock.addedVectorLayers.length, 0, 'no fallback line is drawn');
+            await map.addMarker({ location: [40.7, -74] });
+            assert.strictEqual(openLayersMock.addedOverlays.length, 1, 'the action queue remains usable');
+        } finally {
+            log.restore();
+        }
+    });
+
+    [false, true].forEach(geoJson => {
+        QUnit.test(`invalid route latitude warns and skips rendering (${geoJson ? 'GeoJSON' : 'tuples'})`, async function(assert) {
+            const result = geoJson
+                ? { type: 'LineString', coordinates: [[10, 95], [11, 96]] }
+                : [[95, 10], [96, 11]];
+            const log = sinon.stub(errors, 'log');
+            try {
+                await createMap({
+                    routes: [route],
+                    providerConfig: { tileServer, calculateRoute: () => Promise.resolve(result) }
+                });
+                assert.ok(log.calledOnceWithExactly('W1006', 'calculateRoute returned an invalid result.'), 'invalid coordinates are reported');
+                assert.strictEqual(openLayersMock.addedVectorLayers.length, 0, 'invalid geometry is not rendered');
+            } finally {
+                log.restore();
+            }
+        });
+    });
+
+    ['invalid', 'throw', 'reject'].forEach(failure => {
+        QUnit.test(`${failure} result skips the route, reports the reason and does not retry`, async function(assert) {
+            const reason = new Error('Routing service unavailable');
+            const calculateRoute = sinon.stub().callsFake(() => {
+                if(failure === 'throw') {
+                    throw reason;
+                }
+                return failure === 'reject' ? Promise.reject(reason) : Promise.resolve({ type: 'Point', coordinates: [-74, 40.7] });
+            });
+            const log = sinon.stub(errors, 'log');
+            const onRouteAdded = sinon.spy();
+            const onRouteRemoved = sinon.spy();
+            try {
+                const map = await createMap({ routes: [route], providerConfig: { tileServer, calculateRoute }, onRouteAdded, onRouteRemoved });
+                assert.ok(calculateRoute.calledOnce, 'callback is not retried');
+                assert.ok(log.calledOnceWithExactly('W1006', failure === 'invalid' ? 'calculateRoute returned an invalid result.' : reason), 'warning preserves the service reason');
+                assert.strictEqual(openLayersMock.addedVectorLayers.length, 0, 'failed route is not rendered');
+                assert.ok(onRouteAdded.notCalled, 'failed route fires no added event');
+                assert.strictEqual(map._provider._routes.length, 0, 'failed route is not stored in the provider');
+                await map.removeRoute(route);
+                assert.ok(onRouteRemoved.notCalled, 'failed route fires no removed event');
+                calculateRoute.callsFake(() => Promise.resolve(path));
+                const originalRoute = await map.addRoute({ ...route });
+                assert.strictEqual(originalRoute, getRouteSource().getFeatures()[0], 'later explicit request succeeds without a cached failure');
+                assert.ok(onRouteAdded.calledOnce, 'only the successful route fires an added event');
+            } finally {
+                log.restore();
+            }
+        });
+    });
+
+    QUnit.test('mixed route results preserve result positions and only register successful routes', async function(assert) {
+        const firstRoute = { ...route, color: 'red' };
+        const skippedRoute = { ...route, mode: 'walking' };
+        const lastRoute = { ...route, color: 'green' };
+        const calculateRoute = sinon.stub().callsFake(({ mode }) => Promise.resolve(mode === 'walking' ? undefined : path));
+        const onRouteAdded = sinon.spy();
+        const onRouteRemoved = sinon.spy();
+        const log = sinon.stub(errors, 'log');
+        try {
+            const map = await createMap({ providerConfig: { tileServer, calculateRoute }, onRouteAdded, onRouteRemoved });
+            const results = await map.addRoute([firstRoute, skippedRoute, lastRoute]);
+            assert.strictEqual(results.length, 3, 'result positions match the requested routes');
+            assert.strictEqual(results[1], undefined, 'skipped result retains its position');
+            assert.deepEqual(getRouteSource().getFeatures(), [results[0], results[2]], 'only successful routes have features');
+            assert.deepEqual(map._provider._routes.map(item => item.options), [firstRoute, lastRoute], 'only successful routes are registered');
+            assert.strictEqual(onRouteAdded.callCount, 2, 'only successful routes fire added events');
+            assert.ok(onRouteAdded.alwaysCalledWithMatch({ originalRoute: sinon.match.truthy }), 'added events always expose a route instance');
+            await map.removeRoute(skippedRoute);
+            assert.ok(onRouteRemoved.notCalled, 'removing skipped route options fires no event');
+            assert.deepEqual(map.option('routes'), [firstRoute, lastRoute], 'successful route options remain');
+            map.option('routes', []);
+            await map._lastAsyncAction;
+            assert.strictEqual(onRouteRemoved.callCount, 2, 'both created routes fire removed events');
+            assert.strictEqual(getRouteSource().getFeatures().length, 0, 'all route features are removed');
+        } finally {
+            log.restore();
+        }
+    });
+
+    QUnit.test('autoAdjust includes the full route geometry and markers', async function(assert) {
+        await createMap({
+            autoAdjust: true,
+            routes: [route],
+            markers: [{ location: [40.6, -74.1] }]
+        });
+        assert.deepEqual(openLayersMock.fittedExtent, [-74100, 40600, -73800, 40900], 'fit includes intermediate route points and the marker');
+    });
+
+    QUnit.test('antimeridian route uses adjacent world coordinates and narrow bounds', async function(assert) {
+        await createMap({
+            autoAdjust: true,
+            routes: [{ locations: [[10, 179], [20, -179]] }],
+            providerConfig: { tileServer, calculateRoute: () => Promise.resolve([[10, 179], [20, -179]]) }
+        });
+        assert.deepEqual(getRouteSource().getFeatures()[0].getGeometry().getCoordinates(), [[179000, 10000], [181000, 20000]], 'line does not cross the whole world');
+        assert.deepEqual(openLayersMock.fittedExtent, [179000, 10000, 181000, 20000], 'bounds include the short crossing');
+    });
+
+    QUnit.test('autoAdjust includes continuous route segments, not just their endpoints', async function(assert) {
+        const locations = [[0, -120], [0, 0], [0, 120]];
+        await createMap({
+            autoAdjust: true,
+            routes: [{ locations }],
+            providerConfig: { tileServer, calculateRoute: () => Promise.resolve(locations) }
+        });
+        assert.deepEqual(getRouteSource().getFeatures()[0].getGeometry().getCoordinates(), [[-120000, 0], [0, 0], [120000, 0]], 'line spans both hemispheres through zero');
+        assert.deepEqual(openLayersMock.fittedExtent, [-120000, 0, 120000, 0], 'fit preserves the full line instead of cutting one segment');
+    });
+
+    QUnit.test('autoAdjust combines antimeridian routes and markers in a narrow extent', async function(assert) {
+        await createMap({
+            autoAdjust: true,
+            routes: [{ locations: [[10, 170], [20, -175]] }, { locations: [[15, -170], [25, 175]] }],
+            markers: [{ location: [5, 168] }],
+            providerConfig: { tileServer, calculateRoute: ({ locations }) => Promise.resolve(locations.map(({ lat, lng }) => [lat, lng])) }
+        });
+        assert.deepEqual(openLayersMock.fittedExtent, [168000, 5000, 190000, 25000], 'fit includes both continuous routes and the marker');
+    });
+
+    QUnit.test('feature geometry honors the user projection', async function(assert) {
+        openLayersMock.userProjection = 'EPSG:4326';
+        await createMap({ routes: [route] });
+        const geometry = getRouteSource().getFeatures()[0].getGeometry();
+        assert.deepEqual(geometry.getCoordinates()[0], [-74, 40.7], 'geometry uses the user projection expected by the renderer');
+        openLayersMock.mapInstance.setView(new openLayersMock.View({ projection: 'EPSG:4326', center: [-74, 40.7], zoom: 10 }));
+        assert.deepEqual(geometry.getCoordinates()[0], [-74, 40.7], 'view replacement preserves the user-projected route');
+    });
+
+    QUnit.test('view projection replacement reprojects existing routes', async function(assert) {
+        await createMap({ routes: [route] });
+        const geometry = getRouteSource().getFeatures()[0].getGeometry();
+        openLayersMock.mapInstance.setView(new openLayersMock.View({ projection: 'EPSG:4326', center: [-74, 40.7], zoom: 10 }));
+        assert.deepEqual(geometry.getCoordinates()[0], [-74, 40.7], 'route is transformed to the replacement view projection');
+    });
+
+    [
+        ['red', [255, 0, 0, 0.7]],
+        ['#f00', [255, 0, 0, 0.7]],
+        ['rgba(10, 20, 30, 0.2)', [10, 20, 30, 0.7]],
+    ].forEach(([color, expected]) => {
+        QUnit.test(`route color ${color} uses shared color parsing and separate opacity`, async function(assert) {
+            await createMap({ routes: [{ ...route, color, opacity: 0.7 }] });
+            const feature = getRouteSource().getFeatures()[0];
+            assert.deepEqual(feature.getStyle().getStroke().getColor(), expected);
+        });
+    });
+
+    QUnit.test('invalid route color does not block subsequent map operations', async function(assert) {
+        const map = await createMap();
+        const firstRoute = await map.addRoute({ ...route, color: '#oops' });
+        assert.deepEqual(firstRoute.getStyle().getStroke().getColor(), [0, 0, 0, 0.5], 'shared Color fallback is applied');
+        const secondRoute = await map.addRoute({ ...route, color: '#ff0000' });
+        assert.deepEqual(secondRoute.getStyle().getStroke().getColor(), [255, 0, 0, 0.5], 'the next route renders normally');
+        await map.addMarker({ location: [40.7, -74] });
+        assert.strictEqual(openLayersMock.addedOverlays.length, 1, 'the action queue also accepts marker updates');
+    });
+
+    QUnit.test('disposal removes route features and the vector layer', async function(assert) {
+        const map = await createMap({ routes: [route] });
+        const layer = openLayersMock.addedVectorLayers[0];
+        const source = layer.getSource();
+        map.dispose();
+        assert.strictEqual(source.getFeatures().length, 0, 'route source is cleared');
+        assert.ok(openLayersMock.removedLayers.includes(layer), 'vector layer is detached');
+    });
+
+    QUnit.test('pending route result is ignored after map disposal', async function(assert) {
+        let completeRoute;
+        let callbackStarted;
+        const started = new Promise(resolve => { callbackStarted = resolve; });
+        const calculateRoute = () => new Promise(resolve => {
+            completeRoute = resolve;
+            callbackStarted();
+        });
+        const onRouteAdded = sinon.spy();
+        const map = await createMap({ providerConfig: { tileServer, calculateRoute }, onRouteAdded });
+        map.addRoute(route);
+        const pending = map._lastAsyncAction;
+        await started;
+        map.dispose();
+        completeRoute(path);
+        await pending;
+        assert.strictEqual(openLayersMock.addedVectorLayers.length, 0, 'stale result creates no layer');
+        assert.ok(onRouteAdded.notCalled, 'stale result fires no route event');
+    });
+
+    QUnit.test('pending route result does not duplicate a route after repaint', async function(assert) {
+        let completeRoute;
+        let callbackStarted;
+        const started = new Promise(resolve => { callbackStarted = resolve; });
+        const calculateRoute = sinon.stub();
+        calculateRoute.onFirstCall().callsFake(() => new Promise(resolve => {
+            completeRoute = resolve;
+            callbackStarted();
+        }));
+        calculateRoute.onSecondCall().returns(Promise.resolve(path));
+        const onRouteAdded = sinon.spy();
+        const map = await createMap({ providerConfig: { tileServer, calculateRoute }, onRouteAdded });
+        const pending = map.addRoute(route);
+        await started;
+        map.repaint();
+        await map._lastAsyncAction;
+        completeRoute(path);
+        await pending;
+        assert.strictEqual(getRouteSource().getFeatures().length, 1, 'only the replacement map route exists');
+        assert.ok(onRouteAdded.calledOnce, 'stale route does not fire a second event');
+    });
+
+    QUnit.test('disposal while resolving waypoints does not request a route', async function(assert) {
+        let completeLocation;
+        let locationStarted;
+        const started = new Promise(resolve => { locationStarted = resolve; });
+        const calculateLocation = () => new Promise(resolve => {
+            completeLocation = resolve;
+            locationStarted();
+        });
+        const calculateRoute = sinon.spy();
+        const map = await createMap({ providerConfig: { tileServer, calculateLocation, calculateRoute } });
+        const pending = map.addRoute({ locations: ['Start', [40.8, -73.9]] });
+        await started;
+        map.dispose();
+        completeLocation({ lat: 40.7, lng: -74 });
+        await pending;
+        assert.ok(calculateRoute.notCalled, 'stale geocoding does not start a routing request');
+    });
+});
 QUnit.module('OSM: viewport and interactions', moduleConfig, () => {
     const tileServer = {
         url: 'https://tiles.example.com/{z}/{x}/{y}.png',