From 5a9479f9081c702d301eec99878818e3ccf73b25 Mon Sep 17 00:00:00 2001
From: AlisherAmonulloev <AlisherAmonulloev@users.noreply.github.com>
Date: Wed, 17 Jun 2026 13:22:11 +0300
Subject: [PATCH 01/12] feat(Map): add OpenStreetMap (OSM) provider for dxMap

Keyless, Leaflet-based OSM provider (provider: 'osm'). Tiles, geocoding and
routing are supplied by the consumer via providerConfig.{tileServer,
geocodeLocation, getRoute} rather than bundled, so no public OSM tile server is
used by default. Adds errors W1030/W1031/W1032 for missing tile server,
geocode callback and attribution.

- New provider implementation and Leaflet integration
- 'osm' added to MapProvider; providerConfig OSM types in map.d.ts
- Regenerated React/Vue/Angular wrappers and aspnet metadata enum
- React Storybook story (Map/OSM Provider)
- Unit tests with a Leaflet mock
---
 .../stories/map/OSMMap.stories.tsx            |  239 ++++
 .../devextreme-angular/src/ui/map/index.ts    |    8 +-
 .../src/ui/map/nested/provider-config.ts      |   25 +
 .../src/ui/nested/provider-config.ts          |   25 +
 packages/devextreme-metadata/aspnet/enums.ts  |    2 +-
 packages/devextreme-react/src/map.ts          |    5 +-
 packages/devextreme-vue/src/map.ts            |   11 +
 packages/devextreme/eslint.config.mjs         |   10 +
 .../devextreme/js/__internal/ui/map/map.ts    |   17 +-
 .../__internal/ui/map/provider.dynamic.osm.ts |  611 ++++++++++
 .../js/__internal/ui/map/provider.dynamic.ts  |   11 +-
 .../js/__internal/ui/map/provider.ts          |    8 +-
 packages/devextreme/js/ui/map.d.ts            |   75 +-
 packages/devextreme/js/ui/map_types.d.ts      |    5 +
 packages/devextreme/js/ui/widget/ui.errors.js |   12 +
 .../testing/helpers/forMap/leafletMock.js     |  258 ++++
 .../tests/DevExpress.ui.widgets/map.tests.js  |    1 +
 .../mapParts/osmTests.js                      | 1061 +++++++++++++++++
 packages/devextreme/ts/dx.all.d.ts            |   68 +-
 19 files changed, 2436 insertions(+), 16 deletions(-)
 create mode 100644 apps/react-storybook/stories/map/OSMMap.stories.tsx
 create mode 100644 packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts
 create mode 100644 packages/devextreme/testing/helpers/forMap/leafletMock.js
 create mode 100644 packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js

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..79cb5ef5feed
--- /dev/null
+++ b/apps/react-storybook/stories/map/OSMMap.stories.tsx
@@ -0,0 +1,239 @@
+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' } },
+    zoom: { control: { type: 'number', min: 1, max: 19 }, table: { category: 'Map' } },
+    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
+      provider="osm"
+      providerConfig={providerConfig}
+      // @ts-expect-error center accepts a {lat,lng} object at runtime
+      center={centers[center]}
+      zoom={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..4be6d38dde81 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..8b464a26bf6d 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..b52e8518e9cf 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..baba689e1ef4 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..14d5db667aff 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..bdf72cf9a425
--- /dev/null
+++ b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts
@@ -0,0 +1,611 @@
+/* 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) => {
+      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(resolve);
+      });
+    });
+  }
+
+  _loadMapResources(): Promise<void> {
+    return Promise.all([
+      this._loadMapScript(),
+      this._loadMapStyles(),
+    ]).then(() => {});
+  }
+
+  _loadMapScript(): Promise<void> {
+    return new Promise<void>((resolve) => {
+      ajax.sendRequest({
+        url: LEAFLET_JS_URL,
+        dataType: 'script',
+      }).then(() => {
+        resolve();
+      });
+    });
+  }
+
+  _loadMapStyles(): Promise<void> {
+    return new Promise<void>((resolve) => {
+      ajax.sendRequest({
+        url: LEAFLET_CSS_URL,
+        dataType: 'text',
+      }).then((css) => {
+        $('<style>').html(css).appendTo($('head'));
+        resolve();
+      });
+    });
+  }
+
+  _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 },
+    });
+
+    const center = this._map.getCenter();
+    this._option('center', this._normalizeLocation(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) => {
+          const fallbackCoords = resolvedLocations.map(
+            (loc) => [loc.lat, loc.lng] as [number, number],
+          );
+          const polyline = L.polyline(fallbackCoords, polylineOptions).addTo(this._map);
+
+          errors.log('W1006', e);
+
+          resolve({ instance: polyline });
+        });
+      }));
+  }
+
+  _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..7f0647c35634 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..4bed27909131 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..9793e6b6b71f
--- /dev/null
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js
@@ -0,0 +1,1061 @@
+/* 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 MARKER_CLASS = 'dx-map-marker';
+
+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');
+
+        const map = $('#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();
+            }
+        }).dxMap('instance');
+    });
+
+    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 be00d6be8554..6586b01d7e88 100644
--- a/packages/devextreme/ts/dx.all.d.ts
+++ b/packages/devextreme/ts/dx.all.d.ts
@@ -23212,7 +23212,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]
@@ -23244,6 +23249,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]
@@ -23407,6 +23461,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]

From 584cdb722b06e36aafb3fc0c58cee0ae5a4329fe Mon Sep 17 00:00:00 2001
From: AlisherAmonulloev <AlisherAmonulloev@users.noreply.github.com>
Date: Thu, 18 Jun 2026 17:04:07 +0300
Subject: [PATCH 02/12] Fix Zoom and Center options

---
 .../stories/map/OSMMap.stories.tsx            | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/apps/react-storybook/stories/map/OSMMap.stories.tsx b/apps/react-storybook/stories/map/OSMMap.stories.tsx
index 79cb5ef5feed..dd2556066649 100644
--- a/apps/react-storybook/stories/map/OSMMap.stories.tsx
+++ b/apps/react-storybook/stories/map/OSMMap.stories.tsx
@@ -141,8 +141,14 @@ const meta: Meta<OSMStoryArgs> = {
     },
     // --- Map ---
     type: { control: 'select', options: ['roadmap', 'satellite', 'hybrid'], table: { category: 'Map' } },
-    center: { control: 'select', options: Object.keys(centers), table: { category: 'Map' } },
-    zoom: { control: { type: 'number', min: 1, max: 19 }, 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: {
@@ -197,11 +203,16 @@ const render: Story['render'] = (args) => {
 
   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); a two-way `center` would loop, because the provider reports center
+      // back as a fresh { lat, lng } object each apply. 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}
-      // @ts-expect-error center accepts a {lat,lng} object at runtime
-      center={centers[center]}
-      zoom={zoom}
+      defaultCenter={centers[center]}
+      defaultZoom={zoom}
       type={type}
       height={height}
       width={width}

From bbfbae71a51e2ab4aefd7fbc0d78af6c5ed909ee Mon Sep 17 00:00:00 2001
From: AlisherAmonulloev <AlisherAmonulloev@users.noreply.github.com>
Date: Sun, 21 Jun 2026 12:04:55 +0300
Subject: [PATCH 03/12] fix(map): prevent OSM center write-back loop under
 two-way bindings

_onViewChange emitted a fresh center location object on every view change,
which feeds an infinite update loop with two-way center bindings (e.g. Angular
[(center)]): each new object identity re-triggers the bound value and re-applies
the view. Only write the center option back when its value actually changed.
---
 .../js/__internal/ui/map/provider.dynamic.osm.ts      | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts
index bdf72cf9a425..daa48c2dcddc 100644
--- a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts
+++ b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts
@@ -253,8 +253,15 @@ class OSMProvider extends DynamicProvider {
       southWest: { lat: bounds.getSouthWest().lat, lng: bounds.getSouthWest().lng },
     });
 
-    const center = this._map.getCenter();
-    this._option('center', this._normalizeLocation(center));
+    // 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());

From 6bf352683b835119db45e49b25599363fc2d1433 Mon Sep 17 00:00:00 2001
From: AlisherAmonulloev <AlisherAmonulloev@users.noreply.github.com>
Date: Sun, 21 Jun 2026 12:10:33 +0300
Subject: [PATCH 04/12] fix(map): include OSM fallback route in autoAdjust
 bounds

When a custom getRoute callback failed, the catch drew a straight-line fallback
polyline but resolved a RouteObject without northEast/southWest, so _updateBounds
skipped it and the route was excluded from autoAdjust fitting. Route the fallback
through drawPolyline so it reports its bounds like the success path.
---
 .../js/__internal/ui/map/provider.dynamic.osm.ts         | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts
index daa48c2dcddc..9cf5fe160647 100644
--- a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts
+++ b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts
@@ -536,14 +536,11 @@ class OSMProvider extends DynamicProvider {
         getRouteFn({ locations: normalizedLocations, mode }).then((coords) => {
           drawPolyline(coords);
         }).catch((e: unknown) => {
-          const fallbackCoords = resolvedLocations.map(
-            (loc) => [loc.lat, loc.lng] as [number, number],
-          );
-          const polyline = L.polyline(fallbackCoords, polylineOptions).addTo(this._map);
-
           errors.log('W1006', e);
 
-          resolve({ instance: polyline });
+          // 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]));
         });
       }));
   }

From 33db8c6bdfd60a45189e0485051fb8129b20ec00 Mon Sep 17 00:00:00 2001
From: AlisherAmonulloev <AlisherAmonulloev@users.noreply.github.com>
Date: Sun, 21 Jun 2026 12:14:51 +0300
Subject: [PATCH 05/12] fix(map): reject instead of hanging when OSM Leaflet
 assets fail to load
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

_loadMapScript/_loadMapStyles wrapped ajax.sendRequest in a new Promise with no
rejection path, so a failed Leaflet JS/CSS request (offline, CSP block, 404) left
the promise unsettled and _loadImpl never resolved or rejected — the map stayed
blank with no error. Forward the ajax rejection through _loadMapScript,
_loadMapStyles, and the _loadImpl retry chain.
---
 .../js/__internal/ui/map/provider.dynamic.osm.ts   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts
index 9cf5fe160647..00ac8c8d8371 100644
--- a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts
+++ b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts
@@ -117,7 +117,7 @@ class OSMProvider extends DynamicProvider {
   }
 
   _loadImpl(): Promise<void> {
-    return new Promise<void>((resolve) => {
+    return new Promise<void>((resolve, reject) => {
       if (osmMapsLoaded()) {
         resolve();
         return;
@@ -133,8 +133,8 @@ class OSMProvider extends DynamicProvider {
         }
 
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        this._loadMapResources().then(resolve);
-      });
+        this._loadMapResources().then(resolve, reject);
+      }, reject);
     });
   }
 
@@ -146,25 +146,25 @@ class OSMProvider extends DynamicProvider {
   }
 
   _loadMapScript(): Promise<void> {
-    return new Promise<void>((resolve) => {
+    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) => {
+    return new Promise<void>((resolve, reject) => {
       ajax.sendRequest({
         url: LEAFLET_CSS_URL,
         dataType: 'text',
       }).then((css) => {
         $('<style>').html(css).appendTo($('head'));
         resolve();
-      });
+      }, reject);
     });
   }
 

From 373de4f56371945097add70077976056000d66d9 Mon Sep 17 00:00:00 2001
From: AlisherAmonulloev <AlisherAmonulloev@users.noreply.github.com>
Date: Sun, 21 Jun 2026 12:31:10 +0300
Subject: [PATCH 06/12] refactor(map): rename OSM* public types to Osm* per
 acronym convention

CLAUDE.md/API_conventions require acronyms be treated as regular words in
public .d.ts (e.g. parseHtml). Rename OSMGeocodeFunction, OSMGetRouteParams,
OSMGetRouteFunction, OSMTileServerConfig and OSMTileServer to their Osm*
equivalents in js/ui/map.d.ts and map_types.d.ts (plus the internal OSM
provider identifiers for consistency), and regenerate the framework wrappers
and dx.all.d.ts bundle accordingly.
---
 .../devextreme-angular/src/ui/map/index.ts    |  8 ++--
 .../src/ui/map/nested/provider-config.ts      | 14 +++----
 .../src/ui/nested/provider-config.ts          | 14 +++----
 packages/devextreme-react/src/map.ts          |  8 ++--
 packages/devextreme-vue/src/map.ts            | 16 ++++----
 .../__internal/ui/map/provider.dynamic.osm.ts | 32 +++++++--------
 packages/devextreme/js/ui/map.d.ts            | 18 ++++-----
 packages/devextreme/js/ui/map_types.d.ts      | 10 ++---
 packages/devextreme/ts/dx.all.d.ts            | 40 +++++++++----------
 9 files changed, 80 insertions(+), 80 deletions(-)

diff --git a/packages/devextreme-angular/src/ui/map/index.ts b/packages/devextreme-angular/src/ui/map/index.ts
index 4be6d38dde81..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, OSMGeocodeFunction, OSMGetRouteFunction, OSMTileServer, 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(): { geocodeLocation?: OSMGeocodeFunction, getRoute?: OSMGetRouteFunction, mapId?: string, tileServer?: OSMTileServer, useAdvancedMarkers?: boolean } {
+    get providerConfig(): { geocodeLocation?: OsmGeocodeFunction, getRoute?: OsmGetRouteFunction, mapId?: string, tileServer?: OsmTileServer, useAdvancedMarkers?: boolean } {
         return this._getOption('providerConfig');
     }
-    set providerConfig(value: { geocodeLocation?: OSMGeocodeFunction, getRoute?: OSMGetRouteFunction, mapId?: string, tileServer?: OSMTileServer, 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<{ geocodeLocation?: OSMGeocodeFunction, getRoute?: OSMGetRouteFunction, mapId?: string, tileServer?: OSMTileServer, 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 8b464a26bf6d..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,7 +14,7 @@ import {
 
 
 
-import type { OSMGeocodeFunction, OSMGetRouteFunction, OSMTileServer } from 'devextreme/ui/map';
+import type { OsmGeocodeFunction, OsmGetRouteFunction, OsmTileServer } from 'devextreme/ui/map';
 
 import {
     DxIntegrationModule,
@@ -32,18 +32,18 @@ import { NestedOption } from 'devextreme-angular/core';
 })
 export class DxoMapProviderConfigComponent extends NestedOption implements OnDestroy, OnInit  {
     @Input()
-    get geocodeLocation(): OSMGeocodeFunction {
+    get geocodeLocation(): OsmGeocodeFunction {
         return this._getOption('geocodeLocation');
     }
-    set geocodeLocation(value: OSMGeocodeFunction) {
+    set geocodeLocation(value: OsmGeocodeFunction) {
         this._setOption('geocodeLocation', value);
     }
 
     @Input()
-    get getRoute(): OSMGetRouteFunction {
+    get getRoute(): OsmGetRouteFunction {
         return this._getOption('getRoute');
     }
-    set getRoute(value: OSMGetRouteFunction) {
+    set getRoute(value: OsmGetRouteFunction) {
         this._setOption('getRoute', value);
     }
 
@@ -56,10 +56,10 @@ export class DxoMapProviderConfigComponent extends NestedOption implements OnDes
     }
 
     @Input()
-    get tileServer(): OSMTileServer {
+    get tileServer(): OsmTileServer {
         return this._getOption('tileServer');
     }
-    set tileServer(value: OSMTileServer) {
+    set tileServer(value: OsmTileServer) {
         this._setOption('tileServer', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/nested/provider-config.ts b/packages/devextreme-angular/src/ui/nested/provider-config.ts
index b52e8518e9cf..38792fdc46a5 100644
--- a/packages/devextreme-angular/src/ui/nested/provider-config.ts
+++ b/packages/devextreme-angular/src/ui/nested/provider-config.ts
@@ -14,7 +14,7 @@ import {
 
 
 
-import type { OSMGeocodeFunction, OSMGetRouteFunction, OSMTileServer } from 'devextreme/ui/map';
+import type { OsmGeocodeFunction, OsmGetRouteFunction, OsmTileServer } from 'devextreme/ui/map';
 
 import {
     DxIntegrationModule,
@@ -32,18 +32,18 @@ import { NestedOption } from 'devextreme-angular/core';
 })
 export class DxoProviderConfigComponent extends NestedOption implements OnDestroy, OnInit  {
     @Input()
-    get geocodeLocation(): OSMGeocodeFunction {
+    get geocodeLocation(): OsmGeocodeFunction {
         return this._getOption('geocodeLocation');
     }
-    set geocodeLocation(value: OSMGeocodeFunction) {
+    set geocodeLocation(value: OsmGeocodeFunction) {
         this._setOption('geocodeLocation', value);
     }
 
     @Input()
-    get getRoute(): OSMGetRouteFunction {
+    get getRoute(): OsmGetRouteFunction {
         return this._getOption('getRoute');
     }
-    set getRoute(value: OSMGetRouteFunction) {
+    set getRoute(value: OsmGetRouteFunction) {
         this._setOption('getRoute', value);
     }
 
@@ -56,10 +56,10 @@ export class DxoProviderConfigComponent extends NestedOption implements OnDestro
     }
 
     @Input()
-    get tileServer(): OSMTileServer {
+    get tileServer(): OsmTileServer {
         return this._getOption('tileServer');
     }
-    set tileServer(value: OSMTileServer) {
+    set tileServer(value: OsmTileServer) {
         this._setOption('tileServer', value);
     }
 
diff --git a/packages/devextreme-react/src/map.ts b/packages/devextreme-react/src/map.ts
index baba689e1ef4..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, OSMGeocodeFunction, OSMGetRouteFunction, OSMTileServer, 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,10 +182,10 @@ const Marker = Object.assign<typeof _componentMarker, NestedComponentMeta>(_comp
 // owners:
 // Map
 type IProviderConfigProps = React.PropsWithChildren<{
-  geocodeLocation?: OSMGeocodeFunction;
-  getRoute?: OSMGetRouteFunction;
+  geocodeLocation?: OsmGeocodeFunction;
+  getRoute?: OsmGetRouteFunction;
   mapId?: string;
-  tileServer?: OSMTileServer;
+  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 14d5db667aff..2c1159e67499 100644
--- a/packages/devextreme-vue/src/map.ts
+++ b/packages/devextreme-vue/src/map.ts
@@ -14,11 +14,11 @@ import {
  RouteRemovedEvent,
  MapProvider,
  MapType,
- OSMGeocodeFunction,
- OSMGetRouteFunction,
- OSMGetRouteParams,
- OSMTileServer,
- OSMTileServerConfig,
+ OsmGeocodeFunction,
+ OsmGetRouteFunction,
+ OsmGetRouteParams,
+ OsmTileServer,
+ OsmTileServerConfig,
  RouteMode,
 } from "devextreme/ui/map";
 import { prepareConfigurationComponentConfig } from "./core/index";
@@ -256,10 +256,10 @@ const DxProviderConfigConfig = {
     "update:useAdvancedMarkers": null,
   },
   props: {
-    geocodeLocation: [Object, Function] as PropType<OSMGeocodeFunction | (((query: string) => any))>,
-    getRoute: [Object, Function] as PropType<OSMGetRouteFunction | (((params: OSMGetRouteParams) => any))>,
+    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>,
+    tileServer: [Object, Function, String] as PropType<OsmTileServer | (((type: MapType | string) => string | OsmTileServerConfig | null | undefined)) | OsmTileServerConfig | string>,
     useAdvancedMarkers: Boolean
   }
 };
diff --git a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts
index 00ac8c8d8371..153e24dfd403 100644
--- a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts
+++ b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts
@@ -25,18 +25,18 @@ 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 {
+interface OsmTileServerConfig {
   url: string;
   attribution?: string;
   subdomains?: string | string[];
   maxZoom?: number;
 }
 
-type OSMTileServerObject = OSMTileServerConfig
-  | ((type: string) => string | OSMTileServerConfig | null | undefined);
-type OSMTileServerOption = string | OSMTileServerObject;
+type OsmTileServerObject = OsmTileServerConfig
+  | ((type: string) => string | OsmTileServerConfig | null | undefined);
+type OsmTileServerOption = string | OsmTileServerObject;
 
-export type OSMLocation = PlainLocation;
+export type OsmLocation = PlainLocation;
 
 // @ts-expect-error ts-error
 const osmMapsLoaded = (): boolean => Boolean(window.L?.map);
@@ -44,7 +44,7 @@ const osmMapsLoaded = (): boolean => Boolean(window.L?.map);
 // eslint-disable-next-line @typescript-eslint/init-declarations
 let osmMapsLoader: Promise<void> | undefined;
 
-class OSMProvider extends DynamicProvider {
+class OsmProvider extends DynamicProvider {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   _tileLayer?: any;
 
@@ -53,7 +53,7 @@ class OSMProvider extends DynamicProvider {
 
   _currentTileType?: string;
 
-  _clickHandler?: (e: { latlng: OSMLocation; originalEvent: Event }) => void;
+  _clickHandler?: (e: { latlng: OsmLocation; originalEvent: Event }) => void;
 
   _viewChangeHandler?: () => void;
 
@@ -68,7 +68,7 @@ class OSMProvider extends DynamicProvider {
     return modes[type] ?? 'driving';
   }
 
-  _resolveLocation(location?: LocationOption | null): Promise<OSMLocation> {
+  _resolveLocation(location?: LocationOption | null): Promise<OsmLocation> {
     return new Promise((resolve) => {
       const latLng = this._getLatLng(location);
       if (latLng) {
@@ -76,13 +76,13 @@ class OSMProvider extends DynamicProvider {
       } else {
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
         this._geocodeLocation(location as string).then((geocodedLocation) => {
-          resolve(geocodedLocation as unknown as OSMLocation);
+          resolve(geocodedLocation as unknown as OsmLocation);
         });
       }
     });
   }
 
-  _geocodeLocationImpl(location: string): Promise<OSMLocation> {
+  _geocodeLocationImpl(location: string): Promise<OsmLocation> {
     return new Promise((resolve) => {
       if (!isDefined(location)) {
         resolve(L.latLng(0, 0));
@@ -109,7 +109,7 @@ class OSMProvider extends DynamicProvider {
     });
   }
 
-  _normalizeLocation(location: OSMLocation): { lat: number; lng: number } {
+  _normalizeLocation(location: OsmLocation): { lat: number; lng: number } {
     return {
       lat: location.lat,
       lng: location.lng,
@@ -198,8 +198,8 @@ class OSMProvider extends DynamicProvider {
     });
   }
 
-  _resolveTileConfig(type: string): OSMTileServerConfig | undefined {
-    const option = this._option('providerConfig')?.tileServer as OSMTileServerOption | null | undefined;
+  _resolveTileConfig(type: string): OsmTileServerConfig | undefined {
+    const option = this._option('providerConfig')?.tileServer as OsmTileServerOption | null | undefined;
 
     const resolved = typeof option === 'function' ? option(type) : option;
 
@@ -268,7 +268,7 @@ class OSMProvider extends DynamicProvider {
     }
   }
 
-  _onMapClick(e: { latlng: OSMLocation; originalEvent: Event }): void {
+  _onMapClick(e: { latlng: OsmLocation; originalEvent: Event }): void {
     this._fireClickAction({
       location: this._normalizeLocation(e.latlng),
       event: e.originalEvent,
@@ -605,11 +605,11 @@ class OSMProvider extends DynamicProvider {
 
 /// #DEBUG
 // @ts-expect-error ts-error
-OSMProvider.remapConstant = (newValue: string): void => {
+OsmProvider.remapConstant = (newValue: string): void => {
   LEAFLET_JS_URL = newValue;
   LEAFLET_CSS_URL = newValue;
 };
 
 /// #ENDDEBUG
 
-export default OSMProvider;
+export default OsmProvider;
diff --git a/packages/devextreme/js/ui/map.d.ts b/packages/devextreme/js/ui/map.d.ts
index 7f0647c35634..fe986c98b7c3 100644
--- a/packages/devextreme/js/ui/map.d.ts
+++ b/packages/devextreme/js/ui/map.d.ts
@@ -22,13 +22,13 @@ export type RouteMode = 'driving' | 'walking';
  * @docid
  * @public
  */
-export type OSMGeocodeFunction = (query: string) => Promise<MapLocation | null | undefined>;
+export type OsmGeocodeFunction = (query: string) => Promise<MapLocation | null | undefined>;
 
 /**
  * @docid
  * @public
  */
-export interface OSMGetRouteParams {
+export interface OsmGetRouteParams {
   locations: Array<MapLocation>;
   mode: RouteMode | string;
 }
@@ -37,13 +37,13 @@ export interface OSMGetRouteParams {
  * @docid
  * @public
  */
-export type OSMGetRouteFunction = (params: OSMGetRouteParams) => Promise<Array<[number, number]>>;
+export type OsmGetRouteFunction = (params: OsmGetRouteParams) => Promise<Array<[number, number]>>;
 
 /**
  * @docid
  * @public
  */
-export interface OSMTileServerConfig {
+export interface OsmTileServerConfig {
   /**
    * @docid
    */
@@ -69,8 +69,8 @@ export interface OSMTileServerConfig {
  * @docid
  * @public
  */
-export type OSMTileServer = string | OSMTileServerConfig
-| ((type: MapType | string) => string | OSMTileServerConfig | null | undefined);
+export type OsmTileServer = string | OsmTileServerConfig
+| ((type: MapType | string) => string | OsmTileServerConfig | null | undefined);
 
 /** @public */
 export type MapType = 'hybrid' | 'roadmap' | 'satellite';
@@ -396,19 +396,19 @@ export interface dxMapOptions extends WidgetOptions<dxMap> {
        * @public
        * @default undefined
        */
-      tileServer?: OSMTileServer;
+      tileServer?: OsmTileServer;
       /**
        * @docid
        * @public
        * @default undefined
        */
-      geocodeLocation?: OSMGeocodeFunction;
+      geocodeLocation?: OsmGeocodeFunction;
       /**
        * @docid
        * @public
        * @default undefined
        */
-      getRoute?: OSMGetRouteFunction;
+      getRoute?: OsmGetRouteFunction;
     };
     /**
      * @docid
diff --git a/packages/devextreme/js/ui/map_types.d.ts b/packages/devextreme/js/ui/map_types.d.ts
index 4bed27909131..a4a397278a97 100644
--- a/packages/devextreme/js/ui/map_types.d.ts
+++ b/packages/devextreme/js/ui/map_types.d.ts
@@ -1,11 +1,11 @@
 export {
   MapProvider,
   RouteMode,
-  OSMGeocodeFunction,
-  OSMGetRouteParams,
-  OSMGetRouteFunction,
-  OSMTileServerConfig,
-  OSMTileServer,
+  OsmGeocodeFunction,
+  OsmGetRouteParams,
+  OsmGetRouteFunction,
+  OsmTileServerConfig,
+  OsmTileServer,
   MapType,
   ClickEvent,
   DisposingEvent,
diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts
index 26bc09d08637..79fdfac9baeb 100644
--- a/packages/devextreme/ts/dx.all.d.ts
+++ b/packages/devextreme/ts/dx.all.d.ts
@@ -23251,51 +23251,51 @@ declare module DevExpress.ui {
       DevExpress.common.core.events.EventInfo<dxMap> &
         DevExpress.common.core.events.ChangedOptionInfo;
     /**
-     * [descr:OSMGeocodeFunction]
+     * [descr:OsmGeocodeFunction]
      */
-    export type OSMGeocodeFunction = (
+    export type OsmGeocodeFunction = (
       query: string
     ) => Promise<MapLocation | null | undefined>;
     /**
-     * [descr:OSMGetRouteFunction]
+     * [descr:OsmGetRouteFunction]
      */
-    export type OSMGetRouteFunction = (
-      params: OSMGetRouteParams
+    export type OsmGetRouteFunction = (
+      params: OsmGetRouteParams
     ) => Promise<Array<[number, number]>>;
     /**
-     * [descr:OSMGetRouteParams]
+     * [descr:OsmGetRouteParams]
      */
-    export interface OSMGetRouteParams {
+    export interface OsmGetRouteParams {
       locations: Array<MapLocation>;
       mode: RouteMode | string;
     }
     /**
-     * [descr:OSMTileServer]
+     * [descr:OsmTileServer]
      */
-    export type OSMTileServer =
+    export type OsmTileServer =
       | string
-      | OSMTileServerConfig
+      | OsmTileServerConfig
       | ((
           type: MapType | string
-        ) => string | OSMTileServerConfig | null | undefined);
+        ) => string | OsmTileServerConfig | null | undefined);
     /**
-     * [descr:OSMTileServerConfig]
+     * [descr:OsmTileServerConfig]
      */
-    export interface OSMTileServerConfig {
+    export interface OsmTileServerConfig {
       /**
-       * [descr:OSMTileServerConfig.url]
+       * [descr:OsmTileServerConfig.url]
        */
       url: string;
       /**
-       * [descr:OSMTileServerConfig.attribution]
+       * [descr:OsmTileServerConfig.attribution]
        */
       attribution?: string;
       /**
-       * [descr:OSMTileServerConfig.subdomains]
+       * [descr:OsmTileServerConfig.subdomains]
        */
       subdomains?: string | Array<string>;
       /**
-       * [descr:OSMTileServerConfig.maxZoom]
+       * [descr:OsmTileServerConfig.maxZoom]
        */
       maxZoom?: number;
     }
@@ -23465,15 +23465,15 @@ declare module DevExpress.ui {
       /**
        * [descr:dxMapOptions.providerConfig.tileServer]
        */
-      tileServer?: DevExpress.ui.dxMap.OSMTileServer;
+      tileServer?: DevExpress.ui.dxMap.OsmTileServer;
       /**
        * [descr:dxMapOptions.providerConfig.geocodeLocation]
        */
-      geocodeLocation?: DevExpress.ui.dxMap.OSMGeocodeFunction;
+      geocodeLocation?: DevExpress.ui.dxMap.OsmGeocodeFunction;
       /**
        * [descr:dxMapOptions.providerConfig.getRoute]
        */
-      getRoute?: DevExpress.ui.dxMap.OSMGetRouteFunction;
+      getRoute?: DevExpress.ui.dxMap.OsmGetRouteFunction;
     };
     /**
      * [descr:dxMapOptions.routes]

From 4c8f29a42d98698f0e84b546516104a4098b4c0d Mon Sep 17 00:00:00 2001
From: AlisherAmonulloev <AlisherAmonulloev@users.noreply.github.com>
Date: Sun, 21 Jun 2026 13:32:14 +0300
Subject: [PATCH 07/12] docs(map): drop outdated two-way center loop note in
 OSM story

The OSM provider now only reports center back when its value actually changed,
so a two-way `center` binding no longer loops. Update the story comment to
reflect that the uncontrolled defaults are a simplicity choice, not a
workaround for the (now-fixed) loop.
---
 apps/react-storybook/stories/map/OSMMap.stories.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/react-storybook/stories/map/OSMMap.stories.tsx b/apps/react-storybook/stories/map/OSMMap.stories.tsx
index dd2556066649..d350533b4372 100644
--- a/apps/react-storybook/stories/map/OSMMap.stories.tsx
+++ b/apps/react-storybook/stories/map/OSMMap.stories.tsx
@@ -205,9 +205,9 @@ const render: Story['render'] = (args) => {
     <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); a two-way `center` would loop, because the provider reports center
-      // back as a fresh { lat, lng } object each apply. The `key` re-mounts the map when the
-      // Center/Zoom controls change so those controls re-seed the initial view.
+      // 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}

From 6558afd5b2afa48db312e30d4b74bff19699cf8f Mon Sep 17 00:00:00 2001
From: AlisherAmonulloev <AlisherAmonulloev@users.noreply.github.com>
Date: Sun, 21 Jun 2026 14:01:17 +0300
Subject: [PATCH 08/12] fix(map): reject OSM load when Leaflet missing after
 retry

The _loadImpl retry resolved after re-running _loadMapResources without
re-checking osmMapsLoaded(). If the resource requests succeed but Leaflet still
isn't initialized (e.g. CSP blocked script execution), the provider proceeded to
_init() and threw on `L`. Re-check after the retry and reject when window.L is
still unavailable. (Copilot review #2)
---
 .../js/__internal/ui/map/provider.dynamic.osm.ts          | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts
index 153e24dfd403..f5348714dcc9 100644
--- a/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts
+++ b/packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts
@@ -133,7 +133,13 @@ class OsmProvider extends DynamicProvider {
         }
 
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        this._loadMapResources().then(resolve, reject);
+        this._loadMapResources().then(() => {
+          if (osmMapsLoaded()) {
+            resolve();
+          } else {
+            reject(new Error('Leaflet (window.L) is not available after loading its resources.'));
+          }
+        }, reject);
       }, reject);
     });
   }

From 034526b40a2afa7710d4373cb824c98cacbc776f Mon Sep 17 00:00:00 2001
From: AlisherAmonulloev <AlisherAmonulloev@users.noreply.github.com>
Date: Sun, 21 Jun 2026 14:01:46 +0300
Subject: [PATCH 09/12] test(map): remove unused MARKER_CLASS in OSM tests

Unused const tripped no-unused-vars (lint-js). (Copilot review #3)
---
 .../testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js    | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js
index 9793e6b6b71f..aa9674b91b4e 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js
@@ -9,8 +9,6 @@ import errors from 'ui/widget/ui.errors';
 
 import 'ui/map';
 
-const MARKER_CLASS = 'dx-map-marker';
-
 const prepareTestingOSMProvider = () => {
     L.mapCreated = false;
     L.mapDisposed = false;

From bf16836b38e8e0656677662f540766478360349b Mon Sep 17 00:00:00 2001
From: AlisherAmonulloev <AlisherAmonulloev@users.noreply.github.com>
Date: Sun, 21 Jun 2026 14:02:12 +0300
Subject: [PATCH 10/12] test(map): drop unused map var in OSM onClick test

Removed the unused `const map` assignment and redundant .dxMap('instance')
call that tripped no-unused-vars (lint-js). (Copilot review #6)
---
 .../testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js
index aa9674b91b4e..21fb99ed9c27 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js
@@ -370,7 +370,7 @@ QUnit.module('OSM: basic options', moduleConfig, () => {
         let clickFired = 0;
         const fakeEvent = new PointerEvent('click');
 
-        const map = $('#map').dxMap({
+        $('#map').dxMap({
             provider: 'osm',
             onClick: (e) => {
                 assert.deepEqual(e.location, { lat: 5, lng: 10 }, 'click location is correct');
@@ -382,7 +382,7 @@ QUnit.module('OSM: basic options', moduleConfig, () => {
                 assert.strictEqual(clickFired, 1, 'onClick fired once');
                 done();
             }
-        }).dxMap('instance');
+        });
     });
 
     QUnit.test('moveend event updates center, bounds and zoom options', function(assert) {

From 5ce799b930717ee5af11673f7a605f39357b1383 Mon Sep 17 00:00:00 2001
From: AlisherAmonulloev <AlisherAmonulloev@users.noreply.github.com>
Date: Sun, 21 Jun 2026 14:02:41 +0300
Subject: [PATCH 11/12] test(map): use Osm* casing for OSM test helpers

Rename OSMProvider/prepareTestingOSMProvider to OsmProvider/
prepareTestingOsmProvider for consistency with the Osm* public types.
(Copilot review #4)
---
 .../tests/DevExpress.ui.widgets/mapParts/osmTests.js   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js
index 21fb99ed9c27..72a2b826d6a2 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js
@@ -3,13 +3,13 @@
 
 import $ from 'jquery';
 import { MARKERS, ROUTES } from './utils.js';
-import OSMProvider from '__internal/ui/map/provider.dynamic.osm';
+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 = () => {
+const prepareTestingOsmProvider = () => {
     L.mapCreated = false;
     L.mapDisposed = false;
     L.mapResized = false;
@@ -46,7 +46,7 @@ const moduleConfig = {
         const fakeURL = '/fakeLeafletUrl';
         let leafletMockCreated = false;
 
-        OSMProvider.remapConstant(fakeURL);
+        OsmProvider.remapConstant(fakeURL);
 
         ajaxMock.setup({
             url: fakeURL,
@@ -58,14 +58,14 @@ const moduleConfig = {
                         url: '../../packages/devextreme/testing/helpers/forMap/leafletMock.js',
                         scriptAttrs: { nonce: 'qunit-test' },
                     }).done(() => {
-                        prepareTestingOSMProvider();
+                        prepareTestingOsmProvider();
                     });
                 }
             },
         });
 
         if(window.L) {
-            prepareTestingOSMProvider();
+            prepareTestingOsmProvider();
         }
 
         this.geocodedLatLng = { lat: 10, lng: 20 };

From b8216334e58f5a9c074660f4e838c9335bc56b67 Mon Sep 17 00:00:00 2001
From: AlisherAmonulloev <AlisherAmonulloev@users.noreply.github.com>
Date: Sun, 21 Jun 2026 14:03:00 +0300
Subject: [PATCH 12/12] docs(map): use Osm* casing for OSM story args type

Rename OSMStoryArgs to OsmStoryArgs for acronym-casing consistency.
(Copilot review #5)
---
 apps/react-storybook/stories/map/OSMMap.stories.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/react-storybook/stories/map/OSMMap.stories.tsx b/apps/react-storybook/stories/map/OSMMap.stories.tsx
index d350533b4372..3d21286ffdd4 100644
--- a/apps/react-storybook/stories/map/OSMMap.stories.tsx
+++ b/apps/react-storybook/stories/map/OSMMap.stories.tsx
@@ -93,7 +93,7 @@ const centers: Record<string, { lat: number; lng: number }> = {
 };
 
 // Custom args (not native Map props) used to drive the story controls.
-interface OSMStoryArgs {
+interface OsmStoryArgs {
   tileProvider: TileProvider;
   maptilerKey: string;
   thunderforestKey: string;
@@ -112,7 +112,7 @@ interface OSMStoryArgs {
   width: string;
 }
 
-const meta: Meta<OSMStoryArgs> = {
+const meta: Meta<OsmStoryArgs> = {
   title: 'Map/OSM Provider',
   component: Map,
   parameters: { layout: 'fullscreen' },
@@ -178,7 +178,7 @@ const meta: Meta<OSMStoryArgs> = {
 
 export default meta;
 
-type Story = StoryObj<OSMStoryArgs>;
+type Story = StoryObj<OsmStoryArgs>;
 
 const render: Story['render'] = (args) => {
   const {