diff --git a/apps/react-storybook/stories/map/OSMMap.stories.tsx b/apps/react-storybook/stories/map/OSMMap.stories.tsx
new file mode 100644
index 000000000000..3d21286ffdd4
--- /dev/null
+++ b/apps/react-storybook/stories/map/OSMMap.stories.tsx
@@ -0,0 +1,250 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import React, { useMemo } from 'react';
+import Map from 'devextreme-react/map';
+
+// OpenStreetMap (OSM) provider for the DevExtreme Map — powered by Leaflet.
+// The provider needs no API key of its own, but it does not bundle a tile/geocoding/routing
+// service: you supply them via `providerConfig` (tileServer / geocodeLocation / getRoute).
+//
+// This story lets you switch between several commercial OSM-based tile providers and paste your
+// own key for each (the "Tile provider" controls). The public OpenStreetMap tile server
+// (tile.openstreetmap.org) MUST NOT be used in production per the OSM Tile Usage Policy, so it is
+// intentionally not offered here. Routing uses the public OSRM demo server (evaluation only).
+//
+// NOTE: there is deliberately no "self-hosted" option in this published Storybook — a localhost
+// URL would point at the viewer's own machine, not a shared server. For the fully free, no-key,
+// self-hosted setup (tiles + routing + geocoding), run the OSM_SelfHosted_Server Docker stack
+// locally (see the devextreme-how-to-use-openstreetmap example repo).
+const OSM_ATTR = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
+const markerUrl = 'https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/maps/map-marker.png';
+
+type TileProvider = 'MapTiler' | 'Thunderforest' | 'Stadia Maps';
+type MapType = 'roadmap' | 'satellite' | 'hybrid';
+
+interface ProviderKeys {
+  maptiler: string;
+  thunderforest: string;
+  stadia: string;
+}
+
+// Resolve a Leaflet tile-layer config for the selected provider and map type. Each provider is a
+// function of the type so switching the "Map type" control re-resolves the tiles.
+const buildTileServer = (provider: TileProvider, type: string, keys: ProviderKeys) => {
+  switch (provider) {
+    case 'Thunderforest': {
+      // Thunderforest has no satellite/aerial imagery, so the type slots map to distinct
+      // cartographic styles to demonstrate type switching.
+      const style = { roadmap: 'atlas', satellite: 'landscape', hybrid: 'outdoors' }[type] ?? 'atlas';
+      return {
+        url: `https://{s}.tile.thunderforest.com/${style}/{z}/{x}/{y}.png?apikey=${keys.thunderforest}`,
+        attribution: `Maps © <a href="https://www.thunderforest.com/">Thunderforest</a>, ${OSM_ATTR}`,
+        subdomains: 'abc',
+        maxZoom: 22,
+      };
+    }
+    case 'Stadia Maps': {
+      const style = { roadmap: 'alidade_smooth', satellite: 'alidade_satellite', hybrid: 'alidade_satellite' }[type] ?? 'alidade_smooth';
+      return {
+        url: `https://tiles.stadiamaps.com/tiles/${style}/{z}/{x}/{y}.png?api_key=${keys.stadia}`,
+        attribution: `© <a href="https://stadiamaps.com/">Stadia Maps</a> ${OSM_ATTR}`,
+        maxZoom: 20,
+      };
+    }
+    case 'MapTiler':
+    default: {
+      const style = { roadmap: 'streets-v2', satellite: 'satellite', hybrid: 'hybrid' }[type] ?? 'streets-v2';
+      return {
+        url: `https://api.maptiler.com/maps/${style}/{z}/{x}/{y}.png?key=${keys.maptiler}`,
+        attribution: `© <a href="https://www.maptiler.com/copyright/">MapTiler</a> ${OSM_ATTR}`,
+        maxZoom: 20,
+      };
+    }
+  }
+};
+
+// Real road routing via the public OSRM demo server (evaluation only; host your own in production).
+const getRoute = ({ locations }: { locations: { lat: number; lng: number }[] }): Promise<[number, number][]> => {
+  const coords = locations.map((l) => `${l.lng},${l.lat}`).join(';');
+  return fetch(`https://router.project-osrm.org/route/v1/driving/${coords}?overview=full&geometries=geojson`)
+    .then((r) => r.json())
+    .then((res) => (res.routes[0].geometry.coordinates as [number, number][])
+      .map(([lng, lat]) => [lat, lng] as [number, number]));
+};
+
+const markersData = [
+  { location: { lat: 40.755833, lng: -73.986389 }, tooltip: { text: 'Times Square' } },
+  { location: { lat: 40.7825, lng: -73.966111 }, tooltip: { text: 'Central Park' } },
+  { location: { lat: 40.753889, lng: -73.981389 }, tooltip: { text: 'Fifth Avenue' } },
+  { location: { lat: 40.705748, lng: -73.996299 }, tooltip: { text: 'Brooklyn Bridge' } },
+];
+
+const routeWaypoints: [number, number][] = [
+  [40.7825, -73.966111],
+  [40.755833, -73.986389],
+  [40.753889, -73.981389],
+  [40.705748, -73.996299],
+];
+
+const centers: Record<string, { lat: number; lng: number }> = {
+  'New York': { lat: 40.74, lng: -73.985 },
+  London: { lat: 51.5074, lng: -0.1278 },
+  Tokyo: { lat: 35.6762, lng: 139.7649 },
+};
+
+// Custom args (not native Map props) used to drive the story controls.
+interface OsmStoryArgs {
+  tileProvider: TileProvider;
+  maptilerKey: string;
+  thunderforestKey: string;
+  stadiaKey: string;
+  type: MapType;
+  center: keyof typeof centers;
+  zoom: number;
+  controls: boolean;
+  disabled: boolean;
+  autoAdjust: boolean;
+  customMarkerIcons: boolean;
+  showMarkers: boolean;
+  showRoutes: boolean;
+  routeColor: string;
+  height: number;
+  width: string;
+}
+
+const meta: Meta<OsmStoryArgs> = {
+  title: 'Map/OSM Provider',
+  component: Map,
+  parameters: { layout: 'fullscreen' },
+  argTypes: {
+    // --- Tile provider ---
+    tileProvider: {
+      control: 'select',
+      options: ['MapTiler', 'Thunderforest', 'Stadia Maps'],
+      table: { category: 'Tile provider' },
+      description: 'Which commercial OSM tile provider to render.',
+    },
+    maptilerKey: {
+      control: 'text',
+      table: { category: 'Tile provider' },
+      description: 'Your MapTiler API key (https://cloud.maptiler.com). Required to see MapTiler tiles.',
+    },
+    thunderforestKey: {
+      control: 'text',
+      table: { category: 'Tile provider' },
+      description: 'Your Thunderforest API key (https://www.thunderforest.com).',
+    },
+    stadiaKey: {
+      control: 'text',
+      table: { category: 'Tile provider' },
+      description: 'Your Stadia Maps API key (https://stadiamaps.com).',
+    },
+    // --- Map ---
+    type: { control: 'select', options: ['roadmap', 'satellite', 'hybrid'], table: { category: 'Map' } },
+    center: {
+      control: 'select', options: Object.keys(centers), table: { category: 'Map' },
+      description: 'Initial center — the map can be freely panned afterwards.',
+    },
+    zoom: {
+      control: { type: 'number', min: 1, max: 19 }, table: { category: 'Map' },
+      description: 'Initial zoom — the map can be freely zoomed afterwards.',
+    },
+    controls: { control: 'boolean', table: { category: 'Map' } },
+    disabled: { control: 'boolean', table: { category: 'Map' } },
+    autoAdjust: {
+      control: 'boolean',
+      table: { category: 'Map' },
+      description: 'Auto-fit the viewport to the markers/routes.',
+    },
+    // --- Markers ---
+    showMarkers: { control: 'boolean', table: { category: 'Markers' } },
+    customMarkerIcons: {
+      control: 'boolean',
+      table: { category: 'Markers' },
+      description: 'Use a custom pushpin image instead of the default Leaflet marker.',
+    },
+    // --- Routes ---
+    showRoutes: { control: 'boolean', table: { category: 'Routes' } },
+    routeColor: {
+      control: 'select',
+      options: ['blue', 'green', 'red', 'purple', 'orange'],
+      table: { category: 'Routes' },
+    },
+    // --- Layout ---
+    height: { control: 'number', table: { category: 'Layout' } },
+    width: { control: 'text', table: { category: 'Layout' } },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<OsmStoryArgs>;
+
+const render: Story['render'] = (args) => {
+  const {
+    tileProvider, maptilerKey, thunderforestKey, stadiaKey,
+    type, center, zoom, controls, disabled, autoAdjust,
+    customMarkerIcons, showMarkers, showRoutes, routeColor, height, width,
+  } = args;
+
+  // providerConfig identity changes only when the provider or a key changes, so the map rebuilds
+  // its tile layer then — not on every unrelated control change.
+  const providerConfig = useMemo(() => ({
+    tileServer: (t: string) => buildTileServer(tileProvider, t, {
+      maptiler: maptilerKey, thunderforest: thunderforestKey, stadia: stadiaKey,
+    }),
+    getRoute,
+  }), [tileProvider, maptilerKey, thunderforestKey, stadiaKey]);
+
+  const markers = useMemo(() => (showMarkers ? markersData : []), [showMarkers]);
+  const routes = useMemo(() => (showRoutes
+    ? [{ weight: 6, opacity: 0.6, color: routeColor, locations: routeWaypoints }]
+    : []), [showRoutes, routeColor]);
+
+  return (
+    <Map
+      // center/zoom are UNCONTROLLED (defaultCenter/defaultZoom) so the user can freely pan & zoom.
+      // A *controlled* center/zoom without an on*Change handler locks the map (it snaps back to the
+      // prop on every render), so the uncontrolled defaults keep this story simple. The `key`
+      // re-mounts the map when the Center/Zoom controls change so those controls re-seed the
+      // initial view.
+      key={`${center}|${zoom}`}
+      provider="osm"
+      providerConfig={providerConfig}
+      defaultCenter={centers[center]}
+      defaultZoom={zoom}
+      type={type}
+      height={height}
+      width={width}
+      controls={controls}
+      disabled={disabled}
+      autoAdjust={autoAdjust}
+      markerIconSrc={customMarkerIcons ? markerUrl : undefined}
+      markers={markers}
+      routes={routes}
+    />
+  );
+};
+
+export const Default: Story = {
+  args: {
+    tileProvider: 'MapTiler',
+    // Paste your own keys here in the controls panel to see tiles render.
+    maptilerKey: 'YOUR_MAPTILER_KEY',
+    thunderforestKey: 'YOUR_THUNDERFOREST_KEY',
+    stadiaKey: 'YOUR_STADIA_KEY',
+    type: 'roadmap',
+    center: 'New York',
+    zoom: 12,
+    controls: true,
+    disabled: false,
+    autoAdjust: false,
+    showMarkers: true,
+    customMarkerIcons: true,
+    showRoutes: true,
+    routeColor: 'blue',
+    height: 520,
+    width: '100%',
+  },
+  render,
+};
diff --git a/packages/devextreme-angular/src/ui/map/index.ts b/packages/devextreme-angular/src/ui/map/index.ts
index b27d9beaf4b7..456ad37ef587 100644
--- a/packages/devextreme-angular/src/ui/map/index.ts
+++ b/packages/devextreme-angular/src/ui/map/index.ts
@@ -22,7 +22,7 @@ import {
 } from '@angular/core';
 
 
-import type { ClickEvent, DisposingEvent, InitializedEvent, MarkerAddedEvent, MarkerRemovedEvent, OptionChangedEvent, ReadyEvent, RouteAddedEvent, RouteRemovedEvent, MapProvider, RouteMode, MapType } from 'devextreme/ui/map';
+import type { ClickEvent, DisposingEvent, InitializedEvent, MarkerAddedEvent, MarkerRemovedEvent, OptionChangedEvent, ReadyEvent, RouteAddedEvent, RouteRemovedEvent, MapProvider, OsmGeocodeFunction, OsmGetRouteFunction, OsmTileServer, RouteMode, MapType } from 'devextreme/ui/map';
 
 import DxMap from 'devextreme/ui/map';
 
@@ -302,10 +302,10 @@ export class DxMapComponent extends DxComponent implements OnDestroy, OnChanges,
     
      */
     @Input()
-    get providerConfig(): { mapId?: string, useAdvancedMarkers?: boolean } {
+    get providerConfig(): { geocodeLocation?: OsmGeocodeFunction, getRoute?: OsmGetRouteFunction, mapId?: string, tileServer?: OsmTileServer, useAdvancedMarkers?: boolean } {
         return this._getOption('providerConfig');
     }
-    set providerConfig(value: { mapId?: string, useAdvancedMarkers?: boolean }) {
+    set providerConfig(value: { geocodeLocation?: OsmGeocodeFunction, getRoute?: OsmGetRouteFunction, mapId?: string, tileServer?: OsmTileServer, useAdvancedMarkers?: boolean }) {
         this._setOption('providerConfig', value);
     }
 
@@ -582,7 +582,7 @@ export class DxMapComponent extends DxComponent implements OnDestroy, OnChanges,
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() providerConfigChange: EventEmitter<{ mapId?: string, useAdvancedMarkers?: boolean }>;
+    @Output() providerConfigChange: EventEmitter<{ geocodeLocation?: OsmGeocodeFunction, getRoute?: OsmGetRouteFunction, mapId?: string, tileServer?: OsmTileServer, useAdvancedMarkers?: boolean }>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/map/nested/provider-config.ts b/packages/devextreme-angular/src/ui/map/nested/provider-config.ts
index 0b75435ab9a5..6d0ad0edae10 100644
--- a/packages/devextreme-angular/src/ui/map/nested/provider-config.ts
+++ b/packages/devextreme-angular/src/ui/map/nested/provider-config.ts
@@ -14,6 +14,7 @@ import {
 
 
 
+import type { OsmGeocodeFunction, OsmGetRouteFunction, OsmTileServer } from 'devextreme/ui/map';
 
 import {
     DxIntegrationModule,
@@ -30,6 +31,22 @@ import { NestedOption } from 'devextreme-angular/core';
     providers: [NestedOptionHost]
 })
 export class DxoMapProviderConfigComponent extends NestedOption implements OnDestroy, OnInit  {
+    @Input()
+    get geocodeLocation(): OsmGeocodeFunction {
+        return this._getOption('geocodeLocation');
+    }
+    set geocodeLocation(value: OsmGeocodeFunction) {
+        this._setOption('geocodeLocation', value);
+    }
+
+    @Input()
+    get getRoute(): OsmGetRouteFunction {
+        return this._getOption('getRoute');
+    }
+    set getRoute(value: OsmGetRouteFunction) {
+        this._setOption('getRoute', value);
+    }
+
     @Input()
     get mapId(): string {
         return this._getOption('mapId');
@@ -38,6 +55,14 @@ export class DxoMapProviderConfigComponent extends NestedOption implements OnDes
         this._setOption('mapId', value);
     }
 
+    @Input()
+    get tileServer(): OsmTileServer {
+        return this._getOption('tileServer');
+    }
+    set tileServer(value: OsmTileServer) {
+        this._setOption('tileServer', value);
+    }
+
     @Input()
     get useAdvancedMarkers(): boolean {
         return this._getOption('useAdvancedMarkers');
diff --git a/packages/devextreme-angular/src/ui/nested/provider-config.ts b/packages/devextreme-angular/src/ui/nested/provider-config.ts
index c4ef29aa4db1..38792fdc46a5 100644
--- a/packages/devextreme-angular/src/ui/nested/provider-config.ts
+++ b/packages/devextreme-angular/src/ui/nested/provider-config.ts
@@ -14,6 +14,7 @@ import {
 
 
 
+import type { OsmGeocodeFunction, OsmGetRouteFunction, OsmTileServer } from 'devextreme/ui/map';
 
 import {
     DxIntegrationModule,
@@ -30,6 +31,22 @@ import { NestedOption } from 'devextreme-angular/core';
     providers: [NestedOptionHost]
 })
 export class DxoProviderConfigComponent extends NestedOption implements OnDestroy, OnInit  {
+    @Input()
+    get geocodeLocation(): OsmGeocodeFunction {
+        return this._getOption('geocodeLocation');
+    }
+    set geocodeLocation(value: OsmGeocodeFunction) {
+        this._setOption('geocodeLocation', value);
+    }
+
+    @Input()
+    get getRoute(): OsmGetRouteFunction {
+        return this._getOption('getRoute');
+    }
+    set getRoute(value: OsmGetRouteFunction) {
+        this._setOption('getRoute', value);
+    }
+
     @Input()
     get mapId(): string {
         return this._getOption('mapId');
@@ -38,6 +55,14 @@ export class DxoProviderConfigComponent extends NestedOption implements OnDestro
         this._setOption('mapId', value);
     }
 
+    @Input()
+    get tileServer(): OsmTileServer {
+        return this._getOption('tileServer');
+    }
+    set tileServer(value: OsmTileServer) {
+        this._setOption('tileServer', value);
+    }
+
     @Input()
     get useAdvancedMarkers(): boolean {
         return this._getOption('useAdvancedMarkers');
diff --git a/packages/devextreme-metadata/aspnet/enums.ts b/packages/devextreme-metadata/aspnet/enums.ts
index 06c672dca88b..54680970fd01 100644
--- a/packages/devextreme-metadata/aspnet/enums.ts
+++ b/packages/devextreme-metadata/aspnet/enums.ts
@@ -44,7 +44,7 @@ export const enums = {
     Options: ['GaugeIndicator.type'],
   },
   GeoMapProvider: {
-    Items: ['bing', 'google', 'googleStatic', 'azure'],
+    Items: ['bing', 'google', 'googleStatic', 'azure', 'osm'],
   },
   SchedulerViewType: {
     Items: [
diff --git a/packages/devextreme-react/src/map.ts b/packages/devextreme-react/src/map.ts
index dfaee1be9225..62b7059bb811 100644
--- a/packages/devextreme-react/src/map.ts
+++ b/packages/devextreme-react/src/map.ts
@@ -8,7 +8,7 @@ import dxMap, {
 import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
-import type { ClickEvent, DisposingEvent, InitializedEvent, MarkerAddedEvent, MarkerRemovedEvent, ReadyEvent, RouteAddedEvent, RouteRemovedEvent, RouteMode } from "devextreme/ui/map";
+import type { ClickEvent, DisposingEvent, InitializedEvent, MarkerAddedEvent, MarkerRemovedEvent, ReadyEvent, RouteAddedEvent, RouteRemovedEvent, OsmGeocodeFunction, OsmGetRouteFunction, OsmTileServer, RouteMode } from "devextreme/ui/map";
 
 type ReplaceFieldTypes<TSource, TReplacement> = {
   [P in keyof TSource]: P extends keyof TReplacement ? TReplacement[P] : TSource[P];
@@ -182,7 +182,10 @@ const Marker = Object.assign<typeof _componentMarker, NestedComponentMeta>(_comp
 // owners:
 // Map
 type IProviderConfigProps = React.PropsWithChildren<{
+  geocodeLocation?: OsmGeocodeFunction;
+  getRoute?: OsmGetRouteFunction;
   mapId?: string;
+  tileServer?: OsmTileServer;
   useAdvancedMarkers?: boolean;
 }>
 const _componentProviderConfig = (props: IProviderConfigProps) => {
diff --git a/packages/devextreme-vue/src/map.ts b/packages/devextreme-vue/src/map.ts
index 7e1c8fecdc49..2c1159e67499 100644
--- a/packages/devextreme-vue/src/map.ts
+++ b/packages/devextreme-vue/src/map.ts
@@ -14,6 +14,11 @@ import {
  RouteRemovedEvent,
  MapProvider,
  MapType,
+ OsmGeocodeFunction,
+ OsmGetRouteFunction,
+ OsmGetRouteParams,
+ OsmTileServer,
+ OsmTileServerConfig,
  RouteMode,
 } from "devextreme/ui/map";
 import { prepareConfigurationComponentConfig } from "./core/index";
@@ -244,11 +249,17 @@ const DxProviderConfigConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
+    "update:geocodeLocation": null,
+    "update:getRoute": null,
     "update:mapId": null,
+    "update:tileServer": null,
     "update:useAdvancedMarkers": null,
   },
   props: {
+    geocodeLocation: [Object, Function] as PropType<OsmGeocodeFunction | (((query: string) => any))>,
+    getRoute: [Object, Function] as PropType<OsmGetRouteFunction | (((params: OsmGetRouteParams) => any))>,
     mapId: String,
+    tileServer: [Object, Function, String] as PropType<OsmTileServer | (((type: MapType | string) => string | OsmTileServerConfig | null | undefined)) | OsmTileServerConfig | string>,
     useAdvancedMarkers: Boolean
   }
 };
diff --git a/packages/devextreme/eslint.config.mjs b/packages/devextreme/eslint.config.mjs
index 9338d6973791..f3fb5da344dc 100644
--- a/packages/devextreme/eslint.config.mjs
+++ b/packages/devextreme/eslint.config.mjs
@@ -27,6 +27,16 @@ const compat = new FlatCompat({
     allConfig: js.configs.all
 });
 
+// Allow OSM/Leaflet domain identifiers used by the Map's OpenStreetMap provider
+// (feature/library names that cannot be renamed: the `osm` provider, Leaflet's `latlng`
+// event field, and the `subdomains` tile-layer option).
+const spellCheckerRule = spellCheckConfig
+    .map((config) => config?.rules?.['spellcheck/spell-checker'])
+    .find((rule) => Array.isArray(rule) && Array.isArray(rule[1]?.skipWords));
+if (spellCheckerRule) {
+    spellCheckerRule[1].skipWords.push('osm', 'latlng', 'subdomains');
+}
+
 export default [
     {
         ignores: [
diff --git a/packages/devextreme/js/__internal/ui/map/map.ts b/packages/devextreme/js/__internal/ui/map/map.ts
index 8b987349f994..613b8a214490 100644
--- a/packages/devextreme/js/__internal/ui/map/map.ts
+++ b/packages/devextreme/js/__internal/ui/map/map.ts
@@ -21,6 +21,7 @@ import type { LocationOption } from './provider.dynamic';
 import azure from './provider.dynamic.azure';
 import bing from './provider.dynamic.bing';
 import google from './provider.dynamic.google';
+import osm from './provider.dynamic.osm';
 // NOTE external urls must have protocol explicitly specified
 // (because inside Cordova package the protocol is "file:")
 import googleStatic from './provider.google_static';
@@ -30,6 +31,7 @@ const PROVIDERS = {
   googleStatic,
   google,
   bing,
+  osm,
 };
 
 const MAP_CLASS = 'dx-map';
@@ -54,7 +56,7 @@ class Map extends Widget<MapProperties> {
 
   _lastAsyncAction!: Promise<void>;
 
-  _provider!: azure | googleStatic | google | bing;
+  _provider!: azure | googleStatic | google | bing | osm;
 
   _asyncActionSuppressed?: boolean;
 
@@ -262,7 +264,7 @@ class Map extends Widget<MapProperties> {
   }
 
   _optionChanged(args: OptionChanged<MapProperties>): void {
-    const { name, value } = args;
+    const { name, fullName, value } = args;
 
     const changeBag = this._optionChangeBag;
     this._optionChangeBag = null;
@@ -336,8 +338,15 @@ class Map extends Widget<MapProperties> {
         this._queueAsyncAction('updateMarkers', this._rendered.markers, this._rendered.markers);
         break;
       case 'providerConfig':
-        this._suppressAsyncAction = true;
-        this._invalidate();
+        // The OSM tile server can be swapped at runtime without recreating the map.
+        // Any other providerConfig change requires a full provider re-initialization.
+        if (fullName === 'providerConfig.tileServer') {
+          // eslint-disable-next-line @typescript-eslint/no-floating-promises
+          this._queueAsyncAction('updateTileServer');
+        } else {
+          this._suppressAsyncAction = true;
+          this._invalidate();
+        }
         break;
       case 'onReady':
       case 'onUpdated':
diff --git a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts
new file mode 100644
index 000000000000..f5348714dcc9
--- /dev/null
+++ b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts
@@ -0,0 +1,621 @@
+/* eslint-disable @typescript-eslint/no-misused-promises */
+import Color from '@js/color';
+import $ from '@js/core/renderer';
+import ajax from '@js/core/utils/ajax';
+import { noop } from '@js/core/utils/common';
+import { isDefined } from '@js/core/utils/type';
+import { getWindow } from '@js/core/utils/window';
+import type { RouteMode } from '@js/ui/map';
+import errors from '@js/ui/widget/ui.errors';
+
+import type {
+  LocationOption,
+  MarkerObject, MarkerOptions, PlainLocation, RouteObject, RouteOptions,
+} from './provider.dynamic';
+import DynamicProvider from './provider.dynamic';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare let L: any;
+
+const window = getWindow();
+
+let LEAFLET_JS_URL = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
+let LEAFLET_CSS_URL = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
+
+const DEFAULT_MAX_ZOOM = 19;
+const DEFAULT_SUBDOMAINS = 'abc';
+
+interface OsmTileServerConfig {
+  url: string;
+  attribution?: string;
+  subdomains?: string | string[];
+  maxZoom?: number;
+}
+
+type OsmTileServerObject = OsmTileServerConfig
+  | ((type: string) => string | OsmTileServerConfig | null | undefined);
+type OsmTileServerOption = string | OsmTileServerObject;
+
+export type OsmLocation = PlainLocation;
+
+// @ts-expect-error ts-error
+const osmMapsLoaded = (): boolean => Boolean(window.L?.map);
+
+// eslint-disable-next-line @typescript-eslint/init-declarations
+let osmMapsLoader: Promise<void> | undefined;
+
+class OsmProvider extends DynamicProvider {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  _tileLayer?: any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  _zoomControl?: any;
+
+  _currentTileType?: string;
+
+  _clickHandler?: (e: { latlng: OsmLocation; originalEvent: Event }) => void;
+
+  _viewChangeHandler?: () => void;
+
+  _preventZoomChangeEvent?: boolean;
+
+  _movementMode(type: RouteMode | string = ''): string {
+    const modes: Record<string, string> = {
+      driving: 'driving',
+      walking: 'walking',
+    };
+
+    return modes[type] ?? 'driving';
+  }
+
+  _resolveLocation(location?: LocationOption | null): Promise<OsmLocation> {
+    return new Promise((resolve) => {
+      const latLng = this._getLatLng(location);
+      if (latLng) {
+        resolve(L.latLng(latLng.lat, latLng.lng));
+      } else {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        this._geocodeLocation(location as string).then((geocodedLocation) => {
+          resolve(geocodedLocation as unknown as OsmLocation);
+        });
+      }
+    });
+  }
+
+  _geocodeLocationImpl(location: string): Promise<OsmLocation> {
+    return new Promise((resolve) => {
+      if (!isDefined(location)) {
+        resolve(L.latLng(0, 0));
+        return;
+      }
+
+      const geocodeFn = this._option('providerConfig')?.geocodeLocation as ((query: string) => Promise<{ lat: number; lng: number } | null | undefined>) | undefined;
+
+      if (!geocodeFn) {
+        errors.log('W1031', location);
+        resolve(L.latLng(0, 0));
+        return;
+      }
+
+      geocodeFn(location).then((result) => {
+        if (result?.lat != null && result?.lng != null) {
+          resolve(L.latLng(result.lat, result.lng));
+        } else {
+          resolve(L.latLng(0, 0));
+        }
+      }).catch(() => {
+        resolve(L.latLng(0, 0));
+      });
+    });
+  }
+
+  _normalizeLocation(location: OsmLocation): { lat: number; lng: number } {
+    return {
+      lat: location.lat,
+      lng: location.lng,
+    };
+  }
+
+  _loadImpl(): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+      if (osmMapsLoaded()) {
+        resolve();
+        return;
+      }
+
+      osmMapsLoader ??= this._loadMapResources();
+
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      osmMapsLoader.then(() => {
+        if (osmMapsLoaded()) {
+          resolve();
+          return;
+        }
+
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        this._loadMapResources().then(() => {
+          if (osmMapsLoaded()) {
+            resolve();
+          } else {
+            reject(new Error('Leaflet (window.L) is not available after loading its resources.'));
+          }
+        }, reject);
+      }, reject);
+    });
+  }
+
+  _loadMapResources(): Promise<void> {
+    return Promise.all([
+      this._loadMapScript(),
+      this._loadMapStyles(),
+    ]).then(() => {});
+  }
+
+  _loadMapScript(): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+      ajax.sendRequest({
+        url: LEAFLET_JS_URL,
+        dataType: 'script',
+      }).then(() => {
+        resolve();
+      }, reject);
+    });
+  }
+
+  _loadMapStyles(): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+      ajax.sendRequest({
+        url: LEAFLET_CSS_URL,
+        dataType: 'text',
+      }).then((css) => {
+        $('<style>').html(css).appendTo($('head'));
+        resolve();
+      }, reject);
+    });
+  }
+
+  _init(): Promise<void> {
+    return this._resolveLocation(this._option('center')).then((center) => {
+      const type = this._option('type') ?? 'roadmap';
+
+      // Leaflet cannot auto-detect its image path when the script was loaded via ajax
+      // rather than a <script> tag, so we derive it from the known JS URL.
+      L.Icon.Default.imagePath = LEAFLET_JS_URL.replace(/leaflet\.js$/, 'images/');
+
+      this._map = L.map(this._$container[0], {
+        center,
+        zoom: this._option('zoom'),
+        zoomControl: false,
+        attributionControl: true,
+      });
+
+      // Create the zoom control once; updateControls adds/removes it as needed.
+      this._zoomControl = L.control.zoom();
+      // Honor the initial "controls" option (the base render pipeline doesn't call updateControls).
+      if (this._option('controls')) {
+        this._zoomControl.addTo(this._map);
+      }
+
+      this._currentTileType = type;
+      this._tileLayer = this._buildTileLayer(type);
+      this._tileLayer?.addTo(this._map);
+
+      this._option('center', this._normalizeLocation(center));
+    });
+  }
+
+  _resolveTileConfig(type: string): OsmTileServerConfig | undefined {
+    const option = this._option('providerConfig')?.tileServer as OsmTileServerOption | null | undefined;
+
+    const resolved = typeof option === 'function' ? option(type) : option;
+
+    if (!resolved) {
+      return undefined;
+    }
+
+    return typeof resolved === 'string' ? { url: resolved } : resolved;
+  }
+
+  _buildTileLayer(type: string): unknown {
+    const config = this._resolveTileConfig(type);
+
+    // No tile server is provided. We intentionally do not fall back to the public
+    // OpenStreetMap tile server because its Tile Usage Policy forbids production and
+    // commercial use. The customer must supply their own tile source.
+    if (!config?.url) {
+      errors.log('W1030');
+      return undefined;
+    }
+
+    if (!config.attribution) {
+      errors.log('W1032');
+    }
+
+    const options: Record<string, unknown> = {
+      attribution: config.attribution ?? '',
+      maxZoom: config.maxZoom ?? DEFAULT_MAX_ZOOM,
+    };
+
+    if (config.url.includes('{s}')) {
+      options.subdomains = config.subdomains ?? DEFAULT_SUBDOMAINS;
+    }
+
+    return L.tileLayer(config.url, options);
+  }
+
+  _attachHandlers(): void {
+    this._viewChangeHandler = this._onViewChange.bind(this);
+    this._clickHandler = this._onMapClick.bind(this);
+
+    this._map.on('moveend', this._viewChangeHandler);
+    this._map.on('zoomend', this._viewChangeHandler);
+    this._map.on('click', this._clickHandler);
+  }
+
+  _onViewChange(): void {
+    const bounds = this._map.getBounds();
+    this._option('bounds', {
+      northEast: { lat: bounds.getNorthEast().lat, lng: bounds.getNorthEast().lng },
+      southWest: { lat: bounds.getSouthWest().lat, lng: bounds.getSouthWest().lng },
+    });
+
+    // Only report the center back to the widget when it actually changed. Emitting a fresh
+    // location object on every view change feeds an infinite update loop under two-way center
+    // bindings (e.g. Angular [(center)]): each new object identity re-triggers the bound value,
+    // which re-applies the view, which fires another view change.
+    const center = this._normalizeLocation(this._map.getCenter());
+    const currentCenter = this._getLatLng(this._option('center'));
+    if (!currentCenter || currentCenter.lat !== center.lat || currentCenter.lng !== center.lng) {
+      this._option('center', center);
+    }
+
+    if (!this._preventZoomChangeEvent) {
+      this._option('zoom', this._map.getZoom());
+    }
+  }
+
+  _onMapClick(e: { latlng: OsmLocation; originalEvent: Event }): void {
+    this._fireClickAction({
+      location: this._normalizeLocation(e.latlng),
+      event: e.originalEvent,
+    });
+  }
+
+  updateDimensions(): Promise<void> {
+    this._map.invalidateSize();
+
+    return Promise.resolve();
+  }
+
+  updateMapType(): Promise<void> {
+    const type = this._option('type') ?? 'roadmap';
+
+    if (type !== this._currentTileType) {
+      this._currentTileType = type;
+      this._rebuildTileLayer(type);
+    }
+
+    return Promise.resolve();
+  }
+
+  updateTileServer(): Promise<void> {
+    this._rebuildTileLayer(this._currentTileType ?? 'roadmap');
+
+    return Promise.resolve();
+  }
+
+  _rebuildTileLayer(type: string): void {
+    if (this._tileLayer) {
+      this._map.removeLayer(this._tileLayer);
+    }
+    this._tileLayer = this._buildTileLayer(type);
+    this._tileLayer?.addTo(this._map);
+  }
+
+  updateDisabled(): Promise<void> {
+    const disabled = this._option('disabled');
+    const handlers = [
+      this._map.dragging,
+      this._map.touchZoom,
+      this._map.doubleClickZoom,
+      this._map.scrollWheelZoom,
+      this._map.boxZoom,
+      this._map.keyboard,
+    ];
+
+    handlers.forEach((handler) => {
+      if (handler) {
+        if (disabled) {
+          handler.disable();
+        } else {
+          handler.enable();
+        }
+      }
+    });
+
+    return Promise.resolve();
+  }
+
+  updateBounds(): Promise<void> {
+    const bounds = this._option('bounds');
+
+    return Promise.all([
+      this._resolveLocation(bounds?.northEast),
+      this._resolveLocation(bounds?.southWest),
+    ]).then((result) => {
+      this._map.fitBounds(L.latLngBounds(result[1], result[0]));
+    });
+  }
+
+  updateCenter(): Promise<void> {
+    return this._resolveLocation(this._option('center')).then((center) => {
+      this._map.setView(center, this._option('zoom'));
+      this._option('center', this._normalizeLocation(center));
+    });
+  }
+
+  updateZoom(): Promise<void> {
+    this._map.setZoom(this._option('zoom'));
+
+    return Promise.resolve();
+  }
+
+  updateControls(): Promise<void> {
+    const controls = this._option('controls');
+
+    if (controls) {
+      this._zoomControl.addTo(this._map);
+    } else {
+      this._zoomControl.remove();
+    }
+
+    return Promise.resolve();
+  }
+
+  _anchorIconBottomCenter(marker: unknown): void {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const m = marker as any;
+    const img = m.getElement?.() ?? m._icon;
+    if (!img || typeof img.addEventListener !== 'function') {
+      return;
+    }
+    const apply = (): void => {
+      const w = img.naturalWidth;
+      const h = img.naturalHeight;
+      if (!w || !h) {
+        return;
+      }
+      img.style.marginLeft = `${-w / 2}px`;
+      img.style.marginTop = `${-h}px`;
+
+      // Lift the bound tooltip above the pin (the custom icon has no popupAnchor, so by default
+      // Leaflet would open the popup at the location and overlap the pin).
+      const popup = m.getPopup?.();
+      if (popup) {
+        popup.options.offset = L.point(0, -h);
+        if (m.isPopupOpen()) {
+          m.openPopup();
+        }
+      }
+    };
+    if (img.complete && img.naturalWidth) {
+      apply();
+    } else {
+      img.addEventListener('load', apply, { once: true });
+    }
+  }
+
+  _renderMarker(options: MarkerOptions): Promise<MarkerObject> {
+    return this._resolveLocation(options.location).then((location) => {
+      // eslint-disable-next-line @typescript-eslint/init-declarations
+      let marker;
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+      const icon = options.iconSrc || this._option('markerIconSrc');
+
+      if (options.html) {
+        const divIcon = L.divIcon({
+          html: options.html,
+          className: '',
+          iconAnchor: options.htmlOffset
+            ? [-options.htmlOffset.left, -options.htmlOffset.top]
+            : [0, 0],
+        });
+        marker = L.marker(location, { icon: divIcon });
+      } else if (icon) {
+        const customIcon = L.icon({
+          iconUrl: icon,
+          className: 'dx-map-marker',
+        });
+        marker = L.marker(location, { icon: customIcon });
+      } else {
+        marker = L.marker(location);
+      }
+
+      marker.addTo(this._map);
+
+      const popup = this._renderTooltip(marker, options.tooltip);
+
+      // A custom icon URL has no intrinsic iconSize/iconAnchor, so Leaflet pins the image's
+      // top-left corner to the location. That makes the visible tip drift across zoom levels
+      // and lets the tooltip overlap the pin. Anchor the image by its bottom-center (the
+      // conventional pushpin tip) and lift the popup above the pin, using the real rendered size.
+      if (icon && !options.html) {
+        this._anchorIconBottomCenter(marker);
+      }
+
+      // eslint-disable-next-line @typescript-eslint/init-declarations
+      let clickHandler: (() => void) | undefined;
+      if (options.onClick || options.tooltip) {
+        const markerClickAction = this._mapWidget._createAction(options.onClick ?? noop);
+        const normalizedLocation = this._normalizeLocation(location);
+
+        clickHandler = (): void => {
+          markerClickAction({ location: normalizedLocation });
+
+          if (popup) {
+            if (marker.isPopupOpen()) {
+              marker.closePopup();
+            } else {
+              marker.openPopup();
+            }
+          }
+        };
+
+        marker.on('click', clickHandler);
+      }
+
+      return {
+        location,
+        marker,
+        popup,
+        handler: clickHandler,
+      };
+    });
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  _renderTooltip(marker: unknown, options: MarkerOptions['tooltip']): any {
+    if (!options) {
+      return undefined;
+    }
+
+    const parsedOptions = this._parseTooltipOptions(options);
+    // autoClose/closeOnClick are disabled so multiple marker tooltips can be shown at once
+    // (Leaflet closes other popups by default) — matches the dxMap "show all tooltips" case.
+    const popup = L.popup({ autoClose: false, closeOnClick: false }).setContent(parsedOptions.text);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const leafletMarker = marker as any;
+    leafletMarker.bindPopup(popup);
+
+    if (parsedOptions.visible) {
+      // eslint-disable-next-line no-restricted-globals
+      setTimeout(() => { leafletMarker.openPopup(); }, 0);
+    }
+
+    return popup;
+  }
+
+  _destroyMarker(markerObj: {
+    marker: { off: (event: string, fn: unknown) => void; remove: () => void };
+    handler?: () => void;
+  }): void {
+    if (markerObj.handler) {
+      markerObj.marker.off('click', markerObj.handler);
+    }
+    markerObj.marker.remove();
+  }
+
+  _renderRoute(options: RouteOptions): Promise<RouteObject> {
+    const locations = options.locations ?? [];
+
+    return Promise.all(locations.map((point) => this._resolveLocation(point)))
+      .then((resolvedLocations) => new Promise((resolve) => {
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        const color = new Color(options.color || this._defaultRouteColor()).toHex();
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        const opacity = options.opacity || this._defaultRouteOpacity();
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        const weight = options.weight || this._defaultRouteWeight();
+        const mode = this._movementMode(options.mode);
+
+        const polylineOptions = { color, opacity, weight };
+        const normalizedLocations = resolvedLocations.map((loc) => this._normalizeLocation(loc));
+
+        const getRouteFn = this._option('providerConfig')?.getRoute as ((params: { locations: { lat: number; lng: number }[]; mode: string }) => Promise<[number, number][]>) | undefined;
+
+        const drawPolyline = (coords: [number, number][]): void => {
+          const polyline = L.polyline(coords, polylineOptions).addTo(this._map);
+          const routeBounds = polyline.getBounds();
+
+          resolve({
+            instance: polyline,
+            northEast: [routeBounds.getNorthEast().lat, routeBounds.getNorthEast().lng],
+            southWest: [routeBounds.getSouthWest().lat, routeBounds.getSouthWest().lng],
+          });
+        };
+
+        if (!getRouteFn) {
+          drawPolyline(resolvedLocations.map((loc) => [loc.lat, loc.lng] as [number, number]));
+          return;
+        }
+
+        getRouteFn({ locations: normalizedLocations, mode }).then((coords) => {
+          drawPolyline(coords);
+        }).catch((e: unknown) => {
+          errors.log('W1006', e);
+
+          // Draw a straight-line fallback through drawPolyline so the route still reports its
+          // bounds (northEast/southWest) and participates in autoAdjust fitting.
+          drawPolyline(resolvedLocations.map((loc) => [loc.lat, loc.lng] as [number, number]));
+        });
+      }));
+  }
+
+  _destroyRoute(routeObj: { instance: { remove: () => void } }): void {
+    routeObj.instance.remove();
+  }
+
+  _fitBounds(): Promise<void> {
+    this._updateBounds();
+
+    if (this._bounds && this._option('autoAdjust')) {
+      const zoomBeforeFitting = this._map.getZoom();
+      this._preventZoomChangeEvent = true;
+
+      this._map.fitBounds(this._bounds);
+
+      const zoomAfterFitting = this._map.getZoom();
+      if (zoomBeforeFitting < zoomAfterFitting) {
+        this._map.setZoom(zoomBeforeFitting);
+      } else {
+        this._option('zoom', zoomAfterFitting);
+      }
+
+      delete this._preventZoomChangeEvent;
+    }
+
+    return Promise.resolve();
+  }
+
+  _extendBounds(location: unknown): void {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const loc = location as any;
+    const latLng = Array.isArray(loc)
+      ? L.latLng(loc[0], loc[1])
+      : L.latLng(loc.lat, loc.lng);
+
+    if (this._bounds) {
+      this._bounds.extend(latLng);
+    } else {
+      this._bounds = L.latLngBounds(latLng, latLng);
+    }
+  }
+
+  clean(): Promise<void> {
+    if (this._map) {
+      this._map.off('moveend', this._viewChangeHandler);
+      this._map.off('zoomend', this._viewChangeHandler);
+      this._map.off('click', this._clickHandler);
+
+      this._clearMarkers();
+      this._clearRoutes();
+
+      this._map.remove();
+      this._map = undefined;
+      this._zoomControl = undefined;
+    }
+
+    return Promise.resolve();
+  }
+}
+
+/// #DEBUG
+// @ts-expect-error ts-error
+OsmProvider.remapConstant = (newValue: string): void => {
+  LEAFLET_JS_URL = newValue;
+  LEAFLET_CSS_URL = newValue;
+};
+
+/// #ENDDEBUG
+
+export default OsmProvider;
diff --git a/packages/devextreme/js/__internal/ui/map/provider.dynamic.ts b/packages/devextreme/js/__internal/ui/map/provider.dynamic.ts
index f873b4043a2f..bfb0b76998de 100644
--- a/packages/devextreme/js/__internal/ui/map/provider.dynamic.ts
+++ b/packages/devextreme/js/__internal/ui/map/provider.dynamic.ts
@@ -20,6 +20,11 @@ export interface LocationCoords {
   lng: number;
 }
 
+export interface PlainLocation {
+  lat: number;
+  lng: number;
+}
+
 export interface MarkerOptions {
   iconSrc?: string;
   location?: LocationCoords;
@@ -64,7 +69,7 @@ class DynamicProvider extends Provider {
 
   _routes!: (RouteObject & { options: RouteOptions })[];
 
-  _geocodedLocations: Record<string, GoogleLocation | BingLocation | AzureLocation>;
+  _geocodedLocations: Record<string, GoogleLocation | BingLocation | AzureLocation | PlainLocation>;
 
   _mapsLoader?: Promise<void>;
 
@@ -76,7 +81,7 @@ class DynamicProvider extends Provider {
 
   _geocodeLocation(
     location: string,
-  ): Promise<GoogleLocation | BingLocation | AzureLocation> {
+  ): Promise<GoogleLocation | BingLocation | AzureLocation | PlainLocation> {
     return new Promise((resolve) => {
       const cache = this._geocodedLocations;
       const cachedLocation = cache[location];
@@ -282,7 +287,7 @@ class DynamicProvider extends Provider {
   _geocodeLocationImpl(
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     location: string,
-  ): Promise<GoogleLocation | BingLocation | AzureLocation> {
+  ): Promise<GoogleLocation | BingLocation | AzureLocation | PlainLocation> {
     return Promise.resolve([0, 0]);
   }
 
diff --git a/packages/devextreme/js/__internal/ui/map/provider.ts b/packages/devextreme/js/__internal/ui/map/provider.ts
index 7a34a8329f18..c5b11850b4ba 100644
--- a/packages/devextreme/js/__internal/ui/map/provider.ts
+++ b/packages/devextreme/js/__internal/ui/map/provider.ts
@@ -57,6 +57,10 @@ class Provider {
     Class.abstract();
   }
 
+  updateTileServer(): Promise<unknown> {
+    return Promise.resolve();
+  }
+
   updateDisabled(): void {
     Class.abstract();
   }
@@ -173,7 +177,9 @@ class Provider {
       return key;
     }
     if (isPlainObject(key)) {
-      return key[providerName] ?? '';
+      // apiKey only carries keyed providers (azure/bing/google/googleStatic); other providers
+      // such as 'osm' simply have no entry, so index through a string-keyed view.
+      return (key as Record<string, string | undefined>)[providerName] ?? '';
     }
     return '';
   }
diff --git a/packages/devextreme/js/ui/map.d.ts b/packages/devextreme/js/ui/map.d.ts
index 547e62a96f0f..fe986c98b7c3 100644
--- a/packages/devextreme/js/ui/map.d.ts
+++ b/packages/devextreme/js/ui/map.d.ts
@@ -14,9 +14,64 @@ import Widget, {
 } from './widget/ui.widget';
 
 /** @public */
-export type MapProvider = 'azure' | 'bing' | 'google' | 'googleStatic';
+export type MapProvider = 'azure' | 'bing' | 'google' | 'googleStatic' | 'osm';
 /** @public */
 export type RouteMode = 'driving' | 'walking';
+
+/**
+ * @docid
+ * @public
+ */
+export type OsmGeocodeFunction = (query: string) => Promise<MapLocation | null | undefined>;
+
+/**
+ * @docid
+ * @public
+ */
+export interface OsmGetRouteParams {
+  locations: Array<MapLocation>;
+  mode: RouteMode | string;
+}
+
+/**
+ * @docid
+ * @public
+ */
+export type OsmGetRouteFunction = (params: OsmGetRouteParams) => Promise<Array<[number, number]>>;
+
+/**
+ * @docid
+ * @public
+ */
+export interface OsmTileServerConfig {
+  /**
+   * @docid
+   */
+  url: string;
+  /**
+   * @docid
+   * @default ''
+   */
+  attribution?: string;
+  /**
+   * @docid
+   * @default 'abc'
+   */
+  subdomains?: string | Array<string>;
+  /**
+   * @docid
+   * @default 19
+   */
+  maxZoom?: number;
+}
+
+/**
+ * @docid
+ * @public
+ */
+export type OsmTileServer = string | OsmTileServerConfig
+| ((type: MapType | string) => string | OsmTileServerConfig | null | undefined);
+
 /** @public */
 export type MapType = 'hybrid' | 'roadmap' | 'satellite';
 
@@ -336,6 +391,24 @@ export interface dxMapOptions extends WidgetOptions<dxMap> {
        * @deprecated
        */
       useAdvancedMarkers?: boolean;
+      /**
+       * @docid
+       * @public
+       * @default undefined
+       */
+      tileServer?: OsmTileServer;
+      /**
+       * @docid
+       * @public
+       * @default undefined
+       */
+      geocodeLocation?: OsmGeocodeFunction;
+      /**
+       * @docid
+       * @public
+       * @default undefined
+       */
+      getRoute?: OsmGetRouteFunction;
     };
     /**
      * @docid
diff --git a/packages/devextreme/js/ui/map_types.d.ts b/packages/devextreme/js/ui/map_types.d.ts
index 2c1637b47f4d..a4a397278a97 100644
--- a/packages/devextreme/js/ui/map_types.d.ts
+++ b/packages/devextreme/js/ui/map_types.d.ts
@@ -1,6 +1,11 @@
 export {
   MapProvider,
   RouteMode,
+  OsmGeocodeFunction,
+  OsmGetRouteParams,
+  OsmGetRouteFunction,
+  OsmTileServerConfig,
+  OsmTileServer,
   MapType,
   ClickEvent,
   DisposingEvent,
diff --git a/packages/devextreme/js/ui/widget/ui.errors.js b/packages/devextreme/js/ui/widget/ui.errors.js
index 29438d4d7e31..68e71661dfe6 100644
--- a/packages/devextreme/js/ui/widget/ui.errors.js
+++ b/packages/devextreme/js/ui/widget/ui.errors.js
@@ -406,4 +406,16 @@ export default errorUtils(errors.ERROR_MESSAGES, {
      * @name ErrorsUIWidgets.W1029
      */
     W1029: '\'hiddenWeekDays\' must leave at least one weekday visible.',
+    /**
+     * @name ErrorsUIWidgets.W1030
+     */
+    W1030: 'No tile server is configured for the OSM map provider. Specify the "providerConfig.tileServer" option. Note that the public OpenStreetMap tile server (tile.openstreetmap.org) must not be used in production or commercial applications per its Tile Usage Policy (https://operations.osmfoundation.org/policies/tiles/); use a self-hosted or commercial tile provider instead.',
+    /**
+     * @name ErrorsUIWidgets.W1031
+     */
+    W1031: 'A string location ("{0}") was used with the OSM map provider but no "providerConfig.geocodeLocation" callback is configured, so the location resolved to (0, 0). Specify the "providerConfig.geocodeLocation" option to geocode string addresses (for example, via your own Nominatim instance).',
+    /**
+     * @name ErrorsUIWidgets.W1032
+     */
+    W1032: 'The OSM map provider tile server is configured without an "attribution". When you display OpenStreetMap data, attribution is obligatory (for example, "© OpenStreetMap contributors"); your tile provider may require its own attribution as well. Set the "attribution" field of the "providerConfig.tileServer" option.',
 });
diff --git a/packages/devextreme/testing/helpers/forMap/leafletMock.js b/packages/devextreme/testing/helpers/forMap/leafletMock.js
new file mode 100644
index 000000000000..2c6665e5b072
--- /dev/null
+++ b/packages/devextreme/testing/helpers/forMap/leafletMock.js
@@ -0,0 +1,258 @@
+/* eslint-disable spellcheck/spell-checker -- Leaflet/geo domain terms in the test mock (e.g. Polylines, lngs) */
+(() => {
+    const makeLatLng = (lat, lng) => ({
+        lat: typeof lat === 'object' ? lat.lat : lat,
+        lng: typeof lat === 'object' ? lat.lng : lng,
+    });
+
+    const makeBounds = (sw, ne) => {
+        const _sw = makeLatLng(sw.lat ?? sw[0], sw.lng ?? sw[1]);
+        const _ne = makeLatLng(ne.lat ?? ne[0], ne.lng ?? ne[1]);
+
+        const bounds = {
+            _sw,
+            _ne,
+            extend(latLng) {
+                const loc = makeLatLng(latLng.lat, latLng.lng);
+                this._sw = { lat: Math.min(this._sw.lat, loc.lat), lng: Math.min(this._sw.lng, loc.lng) };
+                this._ne = { lat: Math.max(this._ne.lat, loc.lat), lng: Math.max(this._ne.lng, loc.lng) };
+                return this;
+            },
+            getNorthEast() { return this._ne; },
+            getSouthWest() { return this._sw; },
+        };
+        return bounds;
+    };
+
+    window.L = {
+        // --- Map ---
+        map: function(container, options) {
+            L.mapOptions = options;
+            L.mapCreated = true;
+
+            const map = {
+                _center: options?.center ?? { lat: 0, lng: 0 },
+                _zoom: options?.zoom ?? 1,
+                _eventHandlers: {},
+
+                on(event, handler) {
+                    L.addedEvents = L.addedEvents || [];
+                    L.addedEvents.push(event);
+                    this._eventHandlers[event] = this._eventHandlers[event] || [];
+                    this._eventHandlers[event].push(handler);
+
+                    if(event === 'click') { L.mapClickCallback = handler; }
+                    if(event === 'moveend') { L.mapMoveEndCallback = handler; }
+                    if(event === 'zoomend') { L.mapZoomEndCallback = handler; }
+                },
+                off(event, handler) {
+                    L.removedEvents = L.removedEvents || [];
+                    L.removedEvents.push(event);
+                    if(this._eventHandlers[event]) {
+                        this._eventHandlers[event] = this._eventHandlers[event].filter(h => h !== handler);
+                    }
+                },
+                setView(center, zoom) {
+                    L.setViewArgs = { center, zoom };
+                    this._center = center;
+                    this._zoom = zoom ?? this._zoom;
+                },
+                setZoom(zoom) {
+                    L.setZoomArg = zoom;
+                    this._zoom = zoom;
+                },
+                getZoom() { return L.mockZoom ?? this._zoom; },
+                getCenter() { return L.mockCenter ?? this._center; },
+                getBounds() {
+                    return L.mockBounds ?? makeBounds(
+                        { lat: (this._center.lat ?? 0) - 1, lng: (this._center.lng ?? 0) - 1 },
+                        { lat: (this._center.lat ?? 0) + 1, lng: (this._center.lng ?? 0) + 1 }
+                    );
+                },
+                fitBounds(bounds) {
+                    L.fitBoundsArg = bounds;
+                    if(bounds && bounds.getNorthEast) {
+                        this._center = {
+                            lat: (bounds.getNorthEast().lat + bounds.getSouthWest().lat) / 2,
+                            lng: (bounds.getNorthEast().lng + bounds.getSouthWest().lng) / 2,
+                        };
+                    }
+                },
+                invalidateSize() { L.mapResized = true; },
+                removeLayer(layer) {
+                    L.removedLayers = L.removedLayers || [];
+                    L.removedLayers.push(layer);
+                },
+                remove() { L.mapDisposed = true; },
+                zoomControl: {
+                    addTo() { L.zoomControlAdded = true; },
+                    remove() { L.zoomControlAdded = false; },
+                },
+                dragging: { enable() {}, disable() {} },
+                touchZoom: { enable() {}, disable() {} },
+                doubleClickZoom: { enable() {}, disable() {} },
+                scrollWheelZoom: { enable() {}, disable() {} },
+                boxZoom: { enable() {}, disable() {} },
+                keyboard: { enable() {}, disable() {} },
+                attributionControl: {},
+            };
+
+            L.mapInstance = map;
+            return map;
+        },
+
+        // --- Tile Layer ---
+        tileLayer: function(url, options) {
+            L.tileLayerUrl = url;
+            L.tileLayerOptions = options;
+            const layer = {
+                addTo(map) {
+                    L.addedTileLayers = L.addedTileLayers || [];
+                    L.addedTileLayers.push({ url, options });
+                    return layer;
+                },
+            };
+            return layer;
+        },
+
+        // --- LatLng ---
+        latLng: function(lat, lng) {
+            if(typeof lat === 'object' && lat !== null && !Array.isArray(lat)) {
+                return makeLatLng(lat.lat, lat.lng);
+            }
+            return makeLatLng(lat, lng);
+        },
+
+        // --- LatLngBounds ---
+        latLngBounds: function(sw, ne) {
+            return makeBounds(sw, ne ?? sw);
+        },
+
+        // --- Marker ---
+        marker: function(latLng, options) {
+            L.markerOptions = options;
+            L.lastMarkerLatLng = latLng;
+
+            const marker = {
+                _latLng: latLng,
+                _popup: null,
+                _popupOpen: false,
+                _handlers: {},
+
+                addTo(map) {
+                    L.addedMarkers = L.addedMarkers || [];
+                    L.addedMarkers.push(marker);
+                    return marker;
+                },
+                remove() {
+                    L.removedMarkers = L.removedMarkers || [];
+                    L.removedMarkers.push(marker);
+                },
+                on(event, handler) {
+                    this._handlers[event] = handler;
+                    if(event === 'click') {
+                        L.markerClickCallback = handler;
+                    }
+                },
+                off(event) {
+                    delete this._handlers[event];
+                },
+                bindPopup(popup) {
+                    this._popup = popup;
+                    L.boundPopup = popup;
+                    return marker;
+                },
+                openPopup() {
+                    this._popupOpen = true;
+                    L.popupOpened = true;
+                    return marker;
+                },
+                closePopup() {
+                    this._popupOpen = false;
+                    L.popupOpened = false;
+                    return marker;
+                },
+                isPopupOpen() {
+                    return this._popupOpen;
+                },
+            };
+
+            return marker;
+        },
+
+        // --- DivIcon ---
+        divIcon: function(options) {
+            L.divIconOptions = options;
+            return { isDivIcon: true, options };
+        },
+
+        // --- Icon ---
+        icon: function(options) {
+            L.iconOptions = options;
+            return { isIcon: true, options };
+        },
+
+        // --- Popup ---
+        popup: function(options) {
+            L.popupOptions = options;
+            const popup = {
+                _content: '',
+                setContent(text) {
+                    this._content = text;
+                    L.popupContent = text;
+                    return popup;
+                },
+            };
+            return popup;
+        },
+
+        // --- Polyline ---
+        polyline: function(coords, options) {
+            L.polylineCoords = coords;
+            L.polylineOptions = options;
+
+            const polyline = {
+                _coords: coords,
+                addTo(map) {
+                    L.addedPolylines = L.addedPolylines || [];
+                    L.addedPolylines.push(polyline);
+                    return polyline;
+                },
+                remove() {
+                    L.removedPolylines = L.removedPolylines || [];
+                    L.removedPolylines.push(polyline);
+                },
+                getBounds() {
+                    if(!coords || coords.length === 0) {
+                        return makeBounds({ lat: 0, lng: 0 }, { lat: 0, lng: 0 });
+                    }
+                    const lats = coords.map(c => c[0]);
+                    const lngs = coords.map(c => c[1]);
+                    return makeBounds(
+                        { lat: Math.min(...lats), lng: Math.min(...lngs) },
+                        { lat: Math.max(...lats), lng: Math.max(...lngs) }
+                    );
+                },
+            };
+            return polyline;
+        },
+
+        // --- Control ---
+        control: {
+            zoom: function() {
+                const ctrl = {
+                    addTo(map) { L.zoomControlAdded = true; return ctrl; },
+                    remove() { L.zoomControlAdded = false; return ctrl; },
+                };
+                return ctrl;
+            },
+        },
+
+        // --- Icon.Default ---
+        Icon: {
+            Default: {
+                imagePath: null,
+            }
+        },
+    };
+})();
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/map.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/map.tests.js
index 6f93519a013d..949d5f68c868 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/map.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/map.tests.js
@@ -14,3 +14,4 @@ import './mapParts/googleStaticTests.js';
 import './mapParts/googleTests.js';
 import './mapParts/bingTests.js';
 import './mapParts/azureTests.js';
+import './mapParts/osmTests.js';
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js
new file mode 100644
index 000000000000..72a2b826d6a2
--- /dev/null
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js
@@ -0,0 +1,1059 @@
+/* global L */
+/* eslint-disable spellcheck/spell-checker -- Leaflet/geo domain terms in tests (e.g. Polylines) */
+
+import $ from 'jquery';
+import { MARKERS, ROUTES } from './utils.js';
+import OsmProvider from '__internal/ui/map/provider.dynamic.osm';
+import ajaxMock from '../../../helpers/ajaxMock.js';
+import errors from 'ui/widget/ui.errors';
+
+import 'ui/map';
+
+const prepareTestingOsmProvider = () => {
+    L.mapCreated = false;
+    L.mapDisposed = false;
+    L.mapResized = false;
+    L.mapOptions = null;
+    L.setViewArgs = null;
+    L.setZoomArg = null;
+    L.fitBoundsArg = null;
+    L.addedMarkers = [];
+    L.removedMarkers = [];
+    L.addedPolylines = [];
+    L.removedPolylines = [];
+    L.addedTileLayers = [];
+    L.removedLayers = [];
+    L.addedEvents = [];
+    L.removedEvents = [];
+    L.tileLayerUrl = null;
+    L.tileLayerOptions = null;
+    L.zoomControlAdded = false;
+    L.popupOpened = false;
+    L.markerClickCallback = null;
+    L.mapClickCallback = null;
+    L.mapMoveEndCallback = null;
+    L.mapZoomEndCallback = null;
+    L.mockZoom = null;
+    L.mockCenter = null;
+    L.mockBounds = null;
+    L.mapInstance = null;
+    L.boundPopup = null;
+    L.popupContent = null;
+};
+
+const moduleConfig = {
+    beforeEach: function() {
+        const fakeURL = '/fakeLeafletUrl';
+        let leafletMockCreated = false;
+
+        OsmProvider.remapConstant(fakeURL);
+
+        ajaxMock.setup({
+            url: fakeURL,
+            callback: () => {
+                if(!leafletMockCreated) {
+                    leafletMockCreated = true;
+
+                    $.getScript({
+                        url: '../../packages/devextreme/testing/helpers/forMap/leafletMock.js',
+                        scriptAttrs: { nonce: 'qunit-test' },
+                    }).done(() => {
+                        prepareTestingOsmProvider();
+                    });
+                }
+            },
+        });
+
+        if(window.L) {
+            prepareTestingOsmProvider();
+        }
+
+        this.geocodedLatLng = { lat: 10, lng: 20 };
+        this.routePolylineCoords = [[20, 10], [30, 20], [40, 30]];
+
+        // User-supplied callbacks (replicate what end users must provide)
+        this.osmGeocodeLocation = () => Promise.resolve(this.geocodedLatLng);
+        this.osmGetRoute = () => Promise.resolve(this.routePolylineCoords);
+    },
+    afterEach: function() {
+        ajaxMock.clear();
+    }
+};
+
+
+QUnit.module('OSM: map loading', moduleConfig, () => {
+    QUnit.test('map initializes with pre-loaded Leaflet', function(assert) {
+        const done = assert.async();
+
+        $.getScript({
+            url: '../../packages/devextreme/testing/helpers/forMap/leafletMock.js',
+            scriptAttrs: { nonce: 'qunit-test' }
+        }).done(function() {
+            window.L.map.customFlag = true;
+
+            setTimeout(function() {
+                $('#map').dxMap({ provider: 'osm' });
+
+                setTimeout(() => {
+                    assert.ok(window.L, 'Leaflet was not re-loaded');
+                    done();
+                }, 50);
+            });
+        });
+    });
+
+    QUnit.test('map initializes when Leaflet is not yet loaded', function(assert) {
+        const done = assert.async();
+
+        if(window.L) {
+            delete window.L;
+        }
+
+        const d1 = $.Deferred();
+        const d2 = $.Deferred();
+
+        $('<div>').appendTo($('#map')).dxMap({
+            provider: 'osm',
+            onReady: () => { d1.resolve(); }
+        });
+
+        $('<div>').appendTo($('#map')).dxMap({
+            provider: 'osm',
+            onReady: () => { d2.resolve(); }
+        });
+
+        $.when(d1, d2).done(() => {
+            assert.ok(window.L, 'Leaflet loaded for both maps');
+            done();
+        });
+    });
+
+    QUnit.test('onReady fires with originalMap being L.map instance', function(assert) {
+        const done = assert.async();
+
+        $('#map').dxMap({
+            provider: 'osm',
+            onReady: (e) => {
+                assert.ok(L.mapCreated, 'L.map was called');
+                assert.ok(e.originalMap, 'originalMap is provided');
+                done();
+            }
+        });
+    });
+});
+
+
+QUnit.module('OSM: basic options', moduleConfig, () => {
+    QUnit.test('zoom option is passed on init', function(assert) {
+        const done = assert.async();
+
+        $('#map').dxMap({
+            provider: 'osm',
+            zoom: 10,
+            onReady: () => {
+                assert.strictEqual(L.mapOptions.zoom, 10, 'zoom passed to L.map');
+                done();
+            }
+        });
+    });
+
+    QUnit.test('zoom option is updated at runtime', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'osm',
+            zoom: 5,
+            onReady: () => { d.resolve(); }
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.option('onUpdated', () => {
+                assert.strictEqual(L.setZoomArg, 8, 'setZoom called with new zoom');
+                done();
+            });
+            map.option('zoom', 8);
+        });
+    });
+
+    QUnit.test('center option is passed as lat/lng on init', function(assert) {
+        const done = assert.async();
+
+        $('#map').dxMap({
+            provider: 'osm',
+            center: { lat: 10, lng: 20 },
+            onReady: () => {
+                assert.deepEqual(L.mapOptions.center, { lat: 10, lng: 20 }, 'center passed to L.map');
+                done();
+            }
+        });
+    });
+
+    QUnit.test('center option is updated at runtime', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'osm',
+            center: { lat: 0, lng: 0 },
+            onReady: () => { d.resolve(); }
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.option('onUpdated', () => {
+                assert.deepEqual(L.setViewArgs.center, { lat: 5, lng: 5 }, 'setView called with new center');
+                done();
+            });
+            map.option('center', { lat: 5, lng: 5 });
+        });
+    });
+
+    QUnit.test('string center is geocoded via osmGeocodeLocation callback', function(assert) {
+        const done = assert.async();
+
+        $('#map').dxMap({
+            provider: 'osm',
+            providerConfig: { geocodeLocation: this.osmGeocodeLocation },
+            center: 'Austin, TX',
+            onReady: () => {
+                assert.deepEqual(
+                    L.mapOptions.center,
+                    this.geocodedLatLng,
+                    'center is geocoded via user-supplied callback'
+                );
+                done();
+            }
+        });
+    });
+
+    QUnit.test('osmGeocodeLocation callback receives the raw query string', function(assert) {
+        const done = assert.async();
+        let capturedQuery;
+
+        $('#map').dxMap({
+            provider: 'osm',
+            providerConfig: { geocodeLocation: (query) => {
+                capturedQuery = query;
+                return Promise.resolve({ lat: 10, lng: 20 });
+            } },
+            center: 'Austin, TX',
+            onReady: () => {
+                assert.strictEqual(capturedQuery, 'Austin, TX', 'raw query string passed to callback');
+                done();
+            }
+        });
+    });
+
+    QUnit.test('geocoded locations are cached', function(assert) {
+        const done = assert.async();
+        const d1 = $.Deferred();
+        const d2 = $.Deferred();
+        const center = 'Austin, TX';
+
+        const map = $('#map').dxMap({
+            provider: 'osm',
+            providerConfig: { geocodeLocation: this.osmGeocodeLocation },
+            onReady: () => { d1.resolve(); }
+        }).dxMap('instance');
+
+        const spy = sinon.spy(map._provider, '_geocodeLocationImpl');
+
+        d1.done(() => {
+            map.option('onUpdated', () => {
+                assert.strictEqual(spy.callCount, 1, 'geocoded once');
+                d2.resolve();
+            });
+            map.option('center', center);
+        });
+
+        d2.done(() => {
+            map.option('onUpdated', () => {
+                assert.strictEqual(spy.callCount, 1, 'not geocoded again for same string');
+                spy.restore();
+                done();
+            });
+            map.option('center', center);
+        });
+    });
+
+    QUnit.test('string center resolves to (0,0) and logs W1031 when osmGeocodeLocation is not provided', function(assert) {
+        const done = assert.async();
+        const errorStub = sinon.stub(errors, 'log');
+
+        $('#map').dxMap({
+            provider: 'osm',
+            center: 'Austin, TX',
+            onReady: () => {
+                assert.deepEqual(
+                    L.mapOptions.center,
+                    { lat: 0, lng: 0 },
+                    'falls back to (0,0) with no geocoding callback'
+                );
+                assert.ok(errorStub.withArgs('W1031').called, 'W1031 warning logged');
+                assert.strictEqual(errorStub.withArgs('W1031').firstCall.args[1], 'Austin, TX', 'the unresolved string is passed to the warning');
+                errorStub.restore();
+                done();
+            }
+        });
+    });
+
+    QUnit.test('bounds option takes priority over center', function(assert) {
+        const done = assert.async();
+
+        $('#map').dxMap({
+            provider: 'osm',
+            bounds: {
+                northEast: { lat: 10, lng: 10 },
+                southWest: { lat: -10, lng: -10 },
+            },
+            center: { lat: 50, lng: 50 },
+            onReady: () => {
+                assert.ok(L.fitBoundsArg, 'fitBounds was called instead of setView');
+                assert.notOk(L.setViewArgs, 'setView was not called');
+                done();
+            }
+        });
+    });
+
+    QUnit.test('width/height change triggers invalidateSize', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'osm',
+            onReady: () => { d.resolve(); }
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.option('onUpdated', () => {
+                assert.strictEqual(L.mapResized, true, 'invalidateSize was called');
+                done();
+            });
+            map.option('width', 400);
+        });
+    });
+
+    QUnit.test('controls: true adds zoom control', function(assert) {
+        const done = assert.async();
+
+        $('#map').dxMap({
+            provider: 'osm',
+            controls: true,
+            onReady: () => {
+                assert.strictEqual(L.zoomControlAdded, true, 'zoom control added');
+                done();
+            }
+        });
+    });
+
+    QUnit.test('controls can be toggled at runtime', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'osm',
+            controls: true,
+            onReady: () => { d.resolve(); }
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.option('onUpdated', () => {
+                assert.strictEqual(L.zoomControlAdded, false, 'zoom control removed');
+                done();
+            });
+            map.option('controls', false);
+        });
+    });
+
+    QUnit.test('onClick fires with location and event', function(assert) {
+        const done = assert.async();
+        let clickFired = 0;
+        const fakeEvent = new PointerEvent('click');
+
+        $('#map').dxMap({
+            provider: 'osm',
+            onClick: (e) => {
+                assert.deepEqual(e.location, { lat: 5, lng: 10 }, 'click location is correct');
+                assert.strictEqual(e.event, fakeEvent, 'original event is passed');
+                clickFired++;
+            },
+            onReady: () => {
+                L.mapClickCallback({ latlng: { lat: 5, lng: 10 }, originalEvent: fakeEvent });
+                assert.strictEqual(clickFired, 1, 'onClick fired once');
+                done();
+            }
+        });
+    });
+
+    QUnit.test('moveend event updates center, bounds and zoom options', function(assert) {
+        const done = assert.async();
+
+        L.mockCenter = { lat: 3, lng: 7 };
+        L.mockZoom = 9;
+        L.mockBounds = {
+            getNorthEast: () => ({ lat: 4, lng: 8 }),
+            getSouthWest: () => ({ lat: 2, lng: 6 }),
+        };
+
+        const map = $('#map').dxMap({
+            provider: 'osm',
+            onReady: () => {
+                L.mapMoveEndCallback();
+
+                assert.deepEqual(map.option('center'), { lat: 3, lng: 7 }, 'center updated');
+                assert.deepEqual(map.option('zoom'), 9, 'zoom updated');
+                assert.deepEqual(map.option('bounds'), {
+                    northEast: { lat: 4, lng: 8 },
+                    southWest: { lat: 2, lng: 6 },
+                }, 'bounds updated');
+
+                done();
+            }
+        }).dxMap('instance');
+    });
+
+    QUnit.test('click and moveend/zoomend handlers are attached', function(assert) {
+        const done = assert.async();
+
+        $('#map').dxMap({
+            provider: 'osm',
+            onReady: () => {
+                assert.ok(L.addedEvents.includes('click'), 'click event added');
+                assert.ok(L.addedEvents.includes('moveend'), 'moveend event added');
+                assert.ok(L.addedEvents.includes('zoomend'), 'zoomend event added');
+                done();
+            }
+        });
+    });
+});
+
+
+QUnit.module('OSM: tile server', moduleConfig, () => {
+    QUnit.test('osmTileServer as a string is used as the tile URL', function(assert) {
+        const done = assert.async();
+        const url = 'https://tiles.example.com/{z}/{x}/{y}.png';
+
+        $('#map').dxMap({
+            provider: 'osm',
+            providerConfig: { tileServer: url },
+            onReady: () => {
+                assert.strictEqual(L.tileLayerUrl, url, 'string tile URL is used');
+                done();
+            }
+        });
+    });
+
+    QUnit.test('osmTileServer as an object passes url, attribution and maxZoom', function(assert) {
+        const done = assert.async();
+
+        $('#map').dxMap({
+            provider: 'osm',
+            providerConfig: { tileServer: {
+                url: 'https://tiles.example.com/{z}/{x}/{y}.png',
+                attribution: 'My attribution',
+                maxZoom: 17,
+            } },
+            onReady: () => {
+                assert.strictEqual(L.tileLayerUrl, 'https://tiles.example.com/{z}/{x}/{y}.png', 'url used');
+                assert.strictEqual(L.tileLayerOptions.attribution, 'My attribution', 'attribution passed');
+                assert.strictEqual(L.tileLayerOptions.maxZoom, 17, 'maxZoom passed');
+                done();
+            }
+        });
+    });
+
+    QUnit.test('W1032 is logged when the tile server has no attribution, and not when it does', function(assert) {
+        const done = assert.async();
+        const errorStub = sinon.stub(errors, 'log');
+
+        $('#map').dxMap({
+            provider: 'osm',
+            providerConfig: { tileServer: 'https://tiles.example.com/{z}/{x}/{y}.png' },
+            onReady: () => {
+                assert.ok(errorStub.withArgs('W1032').called, 'W1032 logged when attribution is missing');
+                errorStub.restore();
+                done();
+            }
+        });
+    });
+
+    QUnit.test('W1032 is not logged when the tile server provides attribution', function(assert) {
+        const done = assert.async();
+        const errorStub = sinon.stub(errors, 'log');
+
+        $('#map').dxMap({
+            provider: 'osm',
+            providerConfig: { tileServer: {
+                url: 'https://tiles.example.com/{z}/{x}/{y}.png',
+                attribution: '© OpenStreetMap contributors',
+            } },
+            onReady: () => {
+                assert.notOk(errorStub.withArgs('W1032').called, 'W1032 not logged when attribution is present');
+                errorStub.restore();
+                done();
+            }
+        });
+    });
+
+    QUnit.test('subdomains are passed only when the URL contains the {s} placeholder', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'osm',
+            providerConfig: { tileServer: { url: 'https://{s}.tiles.example.com/{z}/{x}/{y}.png', subdomains: '1234' } },
+            onReady: () => { d.resolve(); }
+        }).dxMap('instance');
+
+        d.done(() => {
+            assert.strictEqual(L.tileLayerOptions.subdomains, '1234', 'subdomains passed when {s} present');
+
+            map.option('onUpdated', () => {
+                assert.notOk('subdomains' in L.tileLayerOptions, 'subdomains omitted when {s} absent');
+                done();
+            });
+            map.option('providerConfig.tileServer', { url: 'https://tiles.example.com/{z}/{x}/{y}.png' });
+        });
+    });
+
+    QUnit.test('osmTileServer as a function resolves per map type', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'osm',
+            type: 'roadmap',
+            providerConfig: { tileServer: (type) => `https://tiles.example.com/${type}/{z}/{x}/{y}.png` },
+            onReady: () => { d.resolve(); }
+        }).dxMap('instance');
+
+        d.done(() => {
+            assert.strictEqual(L.tileLayerUrl, 'https://tiles.example.com/roadmap/{z}/{x}/{y}.png', 'roadmap url resolved');
+
+            map.option('onUpdated', () => {
+                assert.ok(L.removedLayers.length > 0, 'old tile layer removed');
+                assert.strictEqual(L.tileLayerUrl, 'https://tiles.example.com/satellite/{z}/{x}/{y}.png', 'satellite url resolved on type change');
+                done();
+            });
+            map.option('type', 'satellite');
+        });
+    });
+
+    QUnit.test('no tile layer is created and W1030 is logged when osmTileServer is not provided', function(assert) {
+        const done = assert.async();
+        const errorStub = sinon.stub(errors, 'log');
+
+        $('#map').dxMap({
+            provider: 'osm',
+            onReady: () => {
+                assert.strictEqual(L.addedTileLayers.length, 0, 'no tile layer added without a tile server');
+                assert.ok(errorStub.withArgs('W1030').calledOnce, 'W1030 warning logged');
+                errorStub.restore();
+                done();
+            }
+        });
+    });
+
+    QUnit.test('tile layer is rebuilt when osmTileServer changes at runtime', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'osm',
+            providerConfig: { tileServer: 'https://a.example.com/{z}/{x}/{y}.png' },
+            onReady: () => { d.resolve(); }
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.option('onUpdated', () => {
+                assert.ok(L.removedLayers.length > 0, 'old tile layer removed');
+                assert.strictEqual(L.tileLayerUrl, 'https://b.example.com/{z}/{x}/{y}.png', 'new tile URL used');
+                done();
+            });
+            map.option('providerConfig.tileServer', 'https://b.example.com/{z}/{x}/{y}.png');
+        });
+    });
+});
+
+
+QUnit.module('OSM: markers', moduleConfig, () => {
+    QUnit.test('marker is added on init', function(assert) {
+        const done = assert.async();
+
+        $('#map').dxMap({
+            provider: 'osm',
+            markers: [{ location: [33, 33] }],
+            onReady: () => {
+                assert.strictEqual(L.addedMarkers.length, 1, 'one marker added');
+                assert.deepEqual(L.lastMarkerLatLng, { lat: 33, lng: 33 }, 'marker at correct position');
+                done();
+            }
+        });
+    });
+
+    QUnit.test('marker is added at runtime', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'osm',
+            onReady: () => { d.resolve(); }
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.option('onUpdated', () => {
+                assert.strictEqual(L.addedMarkers.length, 1, 'marker added');
+                assert.deepEqual(L.lastMarkerLatLng, { lat: 10, lng: 20 }, 'marker position correct');
+                done();
+            });
+            map.option('markers', [{ location: { lat: 10, lng: 20 } }]);
+        });
+    });
+
+    QUnit.test('marker uses custom icon from markerIconSrc', function(assert) {
+        const done = assert.async();
+        const markerIconSrc = 'customMarker.png';
+
+        $('#map').dxMap({
+            provider: 'osm',
+            markers: [{ location: [10, 20] }],
+            markerIconSrc,
+            onReady: () => {
+                assert.ok(L.iconOptions, 'L.icon was called');
+                assert.strictEqual(L.iconOptions.iconUrl, markerIconSrc, 'custom icon URL is passed');
+                done();
+            }
+        });
+    });
+
+    QUnit.test('marker uses custom icon from marker.iconSrc', function(assert) {
+        const done = assert.async();
+        const iconSrc = 'markerPin.png';
+
+        $('#map').dxMap({
+            provider: 'osm',
+            markers: [{ location: [10, 20], iconSrc }],
+            onReady: () => {
+                assert.ok(L.iconOptions, 'L.icon was called');
+                assert.strictEqual(L.iconOptions.iconUrl, iconSrc, 'marker iconSrc is passed');
+                done();
+            }
+        });
+    });
+
+    QUnit.test('marker uses divIcon when html option is set', function(assert) {
+        const done = assert.async();
+        const html = '<b>Custom</b>';
+
+        $('#map').dxMap({
+            provider: 'osm',
+            markers: [{ location: [10, 20], html }],
+            onReady: () => {
+                assert.ok(L.divIconOptions, 'L.divIcon was called');
+                assert.strictEqual(L.divIconOptions.html, html, 'html content is passed');
+                done();
+            }
+        });
+    });
+
+    QUnit.test('tooltip creates a popup bound to the marker', function(assert) {
+        const done = assert.async();
+
+        $('#map').dxMap({
+            provider: 'osm',
+            markers: [{ location: [10, 20], tooltip: 'Austin, TX' }],
+            onReady: () => {
+                assert.ok(L.boundPopup, 'popup was bound to marker');
+                assert.strictEqual(L.popupContent, 'Austin, TX', 'popup has correct text');
+                done();
+            }
+        });
+    });
+
+    QUnit.test('click on marker toggles popup and fires onClick', function(assert) {
+        const done = assert.async();
+        let clickFired = 0;
+
+        $('#map').dxMap({
+            provider: 'osm',
+            markers: [{
+                location: [10, 20],
+                tooltip: 'Test',
+                onClick: (e) => {
+                    assert.deepEqual(e.location, { lat: 10, lng: 20 }, 'click location correct');
+                    clickFired++;
+                }
+            }],
+            onReady: () => {
+                L.markerClickCallback();
+                assert.strictEqual(clickFired, 1, 'onClick fired');
+                assert.strictEqual(L.popupOpened, true, 'popup opened on first click');
+                done();
+            }
+        });
+    });
+
+    QUnit.test('addMarker method works', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'osm',
+            markers: [MARKERS[0]],
+            onReady: () => { d.resolve(); }
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.addMarker({ location: [7, 7] }).done((instance) => {
+                assert.strictEqual(L.addedMarkers.length, 2, 'second marker added');
+                assert.ok(instance, 'marker instance returned');
+                done();
+            });
+        });
+    });
+
+    QUnit.test('removeMarker method works', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'osm',
+            markers: [MARKERS[0]],
+            onReady: () => { d.resolve(); }
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.removeMarker(0).done(() => {
+                assert.strictEqual(L.removedMarkers.length, 1, 'marker removed');
+                done();
+            });
+        });
+    });
+
+    QUnit.test('onMarkerAdded fires with options and originalMarker', function(assert) {
+        const done = assert.async();
+        let markerAddedFired = false;
+
+        $('#map').dxMap({
+            provider: 'osm',
+            markers: [MARKERS[0]],
+            onReady: () => {
+                assert.strictEqual(markerAddedFired, true, 'onMarkerAdded fired');
+                done();
+            },
+            onMarkerAdded: ({ options, originalMarker }) => {
+                markerAddedFired = true;
+                assert.deepEqual(options, MARKERS[0], 'options are correct');
+                assert.ok(originalMarker, 'originalMarker provided');
+            },
+        });
+    });
+
+    QUnit.test('onMarkerRemoved fires', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+        let markerRemovedFired = false;
+
+        const map = $('#map').dxMap({
+            provider: 'osm',
+            markers: [MARKERS[0]],
+            onReady: () => { d.resolve(); },
+            onMarkerRemoved: ({ options }) => {
+                markerRemovedFired = true;
+                assert.deepEqual(options, MARKERS[0], 'options passed on remove');
+            },
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.option('onUpdated', () => {
+                assert.strictEqual(markerRemovedFired, true, 'onMarkerRemoved fired');
+                done();
+            });
+            map.option('markers', []);
+        });
+    });
+
+    QUnit.test('autoAdjust fits bounds to markers', function(assert) {
+        const done = assert.async();
+
+        $('#map').dxMap({
+            provider: 'osm',
+            autoAdjust: true,
+            center: [30, 30],
+            markers: [{ location: [20, 20] }],
+            onReady: () => {
+                assert.ok(L.fitBoundsArg, 'fitBounds was called');
+                done();
+            }
+        });
+    });
+
+    QUnit.test('autoAdjust: false does not call fitBounds for markers', function(assert) {
+        const done = assert.async();
+
+        $('#map').dxMap({
+            provider: 'osm',
+            autoAdjust: false,
+            center: [30, 30],
+            markers: [MARKERS[0], MARKERS[1]],
+            onReady: () => {
+                assert.notOk(L.fitBoundsArg, 'fitBounds not called');
+                done();
+            }
+        });
+    });
+});
+
+
+QUnit.module('OSM: routes', moduleConfig, () => {
+    QUnit.test('route is added on init via osmGetRoute callback', function(assert) {
+        const done = assert.async();
+
+        $('#map').dxMap({
+            provider: 'osm',
+            providerConfig: { getRoute: this.osmGetRoute },
+            routes: [ROUTES[0]],
+            onReady: () => {
+                assert.strictEqual(L.addedPolylines.length, 1, 'polyline added');
+                assert.deepEqual(L.polylineCoords, this.routePolylineCoords, 'route coordinates correct');
+                done();
+            }
+        });
+    });
+
+    QUnit.test('route is added at runtime', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'osm',
+            providerConfig: { getRoute: this.osmGetRoute },
+            onReady: () => { d.resolve(); }
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.option('onUpdated', () => {
+                assert.strictEqual(L.addedPolylines.length, 1, 'polyline added at runtime');
+                done();
+            });
+            map.option('routes', [ROUTES[0]]);
+        });
+    });
+
+    QUnit.test('addRoute method works', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'osm',
+            providerConfig: { getRoute: this.osmGetRoute },
+            onReady: () => { d.resolve(); }
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.addRoute(ROUTES[0]).done((instance) => {
+                assert.strictEqual(L.addedPolylines.length, 1, 'polyline added');
+                assert.ok(instance, 'route instance returned');
+                done();
+            });
+        });
+    });
+
+    QUnit.test('removeRoute method works', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'osm',
+            providerConfig: { getRoute: this.osmGetRoute },
+            routes: [ROUTES[0]],
+            onReady: () => { d.resolve(); }
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.removeRoute(0).done(() => {
+                assert.strictEqual(L.removedPolylines.length, 1, 'polyline removed');
+                done();
+            });
+        });
+    });
+
+    QUnit.test('route color, weight, opacity are applied', function(assert) {
+        const done = assert.async();
+
+        $('#map').dxMap({
+            provider: 'osm',
+            providerConfig: { getRoute: this.osmGetRoute },
+            routes: [{
+                color: 'red',
+                weight: 4,
+                opacity: 0.3,
+                locations: [[10, 10], [20, 20]],
+            }],
+            onReady: () => {
+                assert.strictEqual(L.polylineOptions.color, '#ff0000', 'color applied');
+                assert.strictEqual(L.polylineOptions.weight, 4, 'weight applied');
+                assert.strictEqual(L.polylineOptions.opacity, 0.3, 'opacity applied');
+                done();
+            }
+        });
+    });
+
+    QUnit.test('osmGetRoute callback receives locations and mode', function(assert) {
+        const done = assert.async();
+        let capturedParams;
+
+        $('#map').dxMap({
+            provider: 'osm',
+            providerConfig: { getRoute: (params) => {
+                capturedParams = params;
+                return Promise.resolve([[10, 20], [30, 40]]);
+            } },
+            routes: [{
+                locations: [{ lat: 10, lng: 20 }, { lat: 30, lng: 40 }],
+                mode: 'walking',
+            }],
+            onReady: () => {
+                assert.ok(capturedParams, 'callback was called');
+                assert.strictEqual(capturedParams.mode, 'walking', 'mode passed to callback');
+                assert.deepEqual(capturedParams.locations, [{ lat: 10, lng: 20 }, { lat: 30, lng: 40 }], 'locations passed to callback');
+                done();
+            }
+        });
+    });
+
+    QUnit.test('straight-line polyline is drawn when osmGetRoute is not provided', function(assert) {
+        const done = assert.async();
+
+        $('#map').dxMap({
+            provider: 'osm',
+            routes: [ROUTES[0]],
+            onReady: () => {
+                assert.strictEqual(L.addedPolylines.length, 1, 'straight-line polyline added');
+                done();
+            }
+        });
+    });
+
+    QUnit.test('falls back to straight polyline when osmGetRoute callback rejects', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const errorStub = sinon.stub(errors, 'log');
+
+        const map = $('#map').dxMap({
+            provider: 'osm',
+            providerConfig: { getRoute: () => Promise.reject(new Error('routing unavailable')) },
+            onReady: () => { d.resolve(); },
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.addRoute(ROUTES[0]).done(() => {
+                assert.strictEqual(L.addedPolylines.length, 1, 'fallback polyline added');
+                assert.ok(errorStub.withArgs('W1006').calledOnce, 'W1006 warning logged');
+
+                errorStub.restore();
+                done();
+            });
+        });
+    });
+
+    QUnit.test('onRouteAdded fires with options and originalRoute', function(assert) {
+        const done = assert.async();
+        let routeAddedFired = false;
+
+        $('#map').dxMap({
+            provider: 'osm',
+            providerConfig: { getRoute: this.osmGetRoute },
+            routes: [ROUTES[0]],
+            onReady: () => {
+                assert.strictEqual(routeAddedFired, true, 'onRouteAdded fired');
+                done();
+            },
+            onRouteAdded: ({ options, originalRoute }) => {
+                routeAddedFired = true;
+                assert.deepEqual(options, ROUTES[0], 'route options passed');
+                assert.ok(originalRoute, 'originalRoute provided');
+            },
+        });
+    });
+
+    QUnit.test('onRouteRemoved fires', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+        let routeRemovedFired = false;
+
+        const map = $('#map').dxMap({
+            provider: 'osm',
+            providerConfig: { getRoute: this.osmGetRoute },
+            routes: [ROUTES[0]],
+            onReady: () => { d.resolve(); },
+            onRouteRemoved: ({ options }) => {
+                routeRemovedFired = true;
+                assert.deepEqual(options, ROUTES[0], 'route options passed on remove');
+            },
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.option('onUpdated', () => {
+                assert.strictEqual(routeRemovedFired, true, 'onRouteRemoved fired');
+                done();
+            });
+            map.option('routes', []);
+        });
+    });
+
+    [
+        { routeMode: 'driving', expectedMode: 'driving' },
+        { routeMode: 'walking', expectedMode: 'walking' },
+    ].forEach(({ routeMode, expectedMode }) => {
+        QUnit.test(`movement mode "${routeMode}" is passed to osmGetRoute as "${expectedMode}"`, function(assert) {
+            const done = assert.async();
+
+            const map = $('#map').dxMap({
+                provider: 'osm',
+                onReady: () => {
+                    assert.strictEqual(map._provider._movementMode(routeMode), expectedMode);
+                    done();
+                }
+            }).dxMap('instance');
+        });
+    });
+
+    QUnit.test('undefined/empty movement mode defaults to "driving"', function(assert) {
+        const done = assert.async();
+
+        const map = $('#map').dxMap({
+            provider: 'osm',
+            onReady: () => {
+                assert.strictEqual(map._provider._movementMode(undefined), 'driving');
+                assert.strictEqual(map._provider._movementMode(''), 'driving');
+                done();
+            }
+        }).dxMap('instance');
+    });
+});
+
+
+QUnit.module('OSM: cleanup', moduleConfig, () => {
+    QUnit.test('clean() disposes map and removes event handlers', function(assert) {
+        const done = assert.async();
+        const d = $.Deferred();
+
+        const map = $('#map').dxMap({
+            provider: 'osm',
+            onReady: () => { d.resolve(); }
+        }).dxMap('instance');
+
+        d.done(() => {
+            map.option('provider', 'google'); // triggers _clean → provider.clean()
+            setTimeout(() => {
+                assert.strictEqual(L.mapDisposed, true, 'map.remove() called');
+                assert.ok(L.removedEvents.includes('click'), 'click handler removed');
+                assert.ok(L.removedEvents.includes('moveend'), 'moveend handler removed');
+                assert.ok(L.removedEvents.includes('zoomend'), 'zoomend handler removed');
+                done();
+            }, 50);
+        });
+    });
+});
diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts
index 9a2eacec574a..f7b7ebe10d85 100644
--- a/packages/devextreme/ts/dx.all.d.ts
+++ b/packages/devextreme/ts/dx.all.d.ts
@@ -23217,7 +23217,12 @@ declare module DevExpress.ui {
      */
     export type InitializedEvent =
       DevExpress.common.core.events.InitializedEventInfo<dxMap>;
-    export type MapProvider = 'azure' | 'bing' | 'google' | 'googleStatic';
+    export type MapProvider =
+      | 'azure'
+      | 'bing'
+      | 'google'
+      | 'googleStatic'
+      | 'osm';
     export type MapType = 'hybrid' | 'roadmap' | 'satellite';
     /**
      * [descr:_ui_map_MarkerAddedEvent]
@@ -23249,6 +23254,55 @@ declare module DevExpress.ui {
     export type OptionChangedEvent =
       DevExpress.common.core.events.EventInfo<dxMap> &
         DevExpress.common.core.events.ChangedOptionInfo;
+    /**
+     * [descr:OsmGeocodeFunction]
+     */
+    export type OsmGeocodeFunction = (
+      query: string
+    ) => Promise<MapLocation | null | undefined>;
+    /**
+     * [descr:OsmGetRouteFunction]
+     */
+    export type OsmGetRouteFunction = (
+      params: OsmGetRouteParams
+    ) => Promise<Array<[number, number]>>;
+    /**
+     * [descr:OsmGetRouteParams]
+     */
+    export interface OsmGetRouteParams {
+      locations: Array<MapLocation>;
+      mode: RouteMode | string;
+    }
+    /**
+     * [descr:OsmTileServer]
+     */
+    export type OsmTileServer =
+      | string
+      | OsmTileServerConfig
+      | ((
+          type: MapType | string
+        ) => string | OsmTileServerConfig | null | undefined);
+    /**
+     * [descr:OsmTileServerConfig]
+     */
+    export interface OsmTileServerConfig {
+      /**
+       * [descr:OsmTileServerConfig.url]
+       */
+      url: string;
+      /**
+       * [descr:OsmTileServerConfig.attribution]
+       */
+      attribution?: string;
+      /**
+       * [descr:OsmTileServerConfig.subdomains]
+       */
+      subdomains?: string | Array<string>;
+      /**
+       * [descr:OsmTileServerConfig.maxZoom]
+       */
+      maxZoom?: number;
+    }
     export type Properties = dxMapOptions;
     /**
      * [descr:_ui_map_ReadyEvent]
@@ -23412,6 +23466,18 @@ declare module DevExpress.ui {
        * @deprecated [depNote:dxMapOptions.providerConfig.useAdvancedMarkers]
        */
       useAdvancedMarkers?: boolean;
+      /**
+       * [descr:dxMapOptions.providerConfig.tileServer]
+       */
+      tileServer?: DevExpress.ui.dxMap.OsmTileServer;
+      /**
+       * [descr:dxMapOptions.providerConfig.geocodeLocation]
+       */
+      geocodeLocation?: DevExpress.ui.dxMap.OsmGeocodeFunction;
+      /**
+       * [descr:dxMapOptions.providerConfig.getRoute]
+       */
+      getRoute?: DevExpress.ui.dxMap.OsmGetRouteFunction;
     };
     /**
      * [descr:dxMapOptions.routes]