Map: OSM provider — Define the public API contract

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, OsmTileServer, RouteMode, MapType } from 'devextreme/ui/map';
+import type { ClickEvent, DisposingEvent, InitializedEvent, MarkerAddedEvent, MarkerRemovedEvent, OptionChangedEvent, ReadyEvent, RouteAddedEvent, RouteRemovedEvent, MapProvider, CalculateOsmRouteInfo, 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, tileServer?: OsmTileServer | undefined, useAdvancedMarkers?: boolean } {
+    get providerConfig(): { calculateLocation?: ((query: string) => any), calculateRoute?: ((params: CalculateOsmRouteInfo) => any), mapId?: string, tileServer?: OsmTileServer | undefined, useAdvancedMarkers?: boolean } {
         return this._getOption('providerConfig');
     }
-    set providerConfig(value: { mapId?: string, tileServer?: OsmTileServer | undefined, useAdvancedMarkers?: boolean }) {
+    set providerConfig(value: { calculateLocation?: ((query: string) => any), calculateRoute?: ((params: CalculateOsmRouteInfo) => any), mapId?: string, tileServer?: OsmTileServer | undefined, 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, tileServer?: OsmTileServer | undefined, useAdvancedMarkers?: boolean }>;
+    @Output() providerConfigChange: EventEmitter<{ calculateLocation?: ((query: string) => any), calculateRoute?: ((params: CalculateOsmRouteInfo) => any), mapId?: string, tileServer?: OsmTileServer | undefined, useAdvancedMarkers?: boolean }>;
 
     /**
 

packages/devextreme-angular/src/ui/map/nested/provider-config.ts

@@ -14,7 +14,7 @@ import {
 
 
 
-import type { OsmTileServer } from 'devextreme/ui/map';
+import type { CalculateOsmRouteInfo, OsmTileServer } from 'devextreme/ui/map';
 
 import {
     DxIntegrationModule,
@@ -31,6 +31,22 @@ import { NestedOption } from 'devextreme-angular/core';
     providers: [NestedOptionHost]
 })
 export class DxoMapProviderConfigComponent extends NestedOption implements OnDestroy, OnInit  {
+    @Input()
+    get calculateLocation(): ((query: string) => any) {
+        return this._getOption('calculateLocation');
+    }
+    set calculateLocation(value: ((query: string) => any)) {
+        this._setOption('calculateLocation', value);
+    }
+
+    @Input()
+    get calculateRoute(): ((params: CalculateOsmRouteInfo) => any) {
+        return this._getOption('calculateRoute');
+    }
+    set calculateRoute(value: ((params: CalculateOsmRouteInfo) => any)) {
+        this._setOption('calculateRoute', value);
+    }
+
     @Input()
     get mapId(): string {
         return this._getOption('mapId');

packages/devextreme-angular/src/ui/nested/provider-config.ts

@@ -31,6 +31,22 @@ import { NestedOption } from 'devextreme-angular/core';
     providers: [NestedOptionHost]
 })
 export class DxoProviderConfigComponent extends NestedOption implements OnDestroy, OnInit  {
+    @Input()
+    get calculateLocation(): Function {
+        return this._getOption('calculateLocation');
+    }
+    set calculateLocation(value: Function) {
+        this._setOption('calculateLocation', value);
+    }
+
+    @Input()
+    get calculateRoute(): Function {
+        return this._getOption('calculateRoute');
+    }
+    set calculateRoute(value: Function) {
+        this._setOption('calculateRoute', value);
+    }
+
     @Input()
     get mapId(): string {
         return this._getOption('mapId');

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, OsmTileServer, RouteMode } from "devextreme/ui/map";
+import type { ClickEvent, DisposingEvent, InitializedEvent, MarkerAddedEvent, MarkerRemovedEvent, ReadyEvent, RouteAddedEvent, RouteRemovedEvent, CalculateOsmRouteInfo, OsmTileServer, RouteMode } from "devextreme/ui/map";
 
 type ReplaceFieldTypes<TSource, TReplacement> = {
   [P in keyof TSource]: P extends keyof TReplacement ? TReplacement[P] : TSource[P];
@@ -182,6 +182,8 @@ const Marker = Object.assign<typeof _componentMarker, NestedComponentMeta>(_comp
 // owners:
 // Map
 type IProviderConfigProps = React.PropsWithChildren<{
+  calculateLocation?: ((query: string) => any);
+  calculateRoute?: ((params: CalculateOsmRouteInfo) => any);
   mapId?: string;
   tileServer?: OsmTileServer | undefined;
   useAdvancedMarkers?: boolean;

packages/devextreme-vue/src/map.ts

@@ -14,6 +14,7 @@ import {
  RouteRemovedEvent,
  MapProvider,
  MapType,
+ CalculateOsmRouteInfo,
  OsmTileServer,
  OsmTileServerConfig,
  RouteMode,
@@ -246,11 +247,15 @@ const DxProviderConfigConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
+    "update:calculateLocation": null,
+    "update:calculateRoute": null,
     "update:mapId": null,
     "update:tileServer": null,
     "update:useAdvancedMarkers": null,
   },
   props: {
+    calculateLocation: Function as PropType<((query: string) => any)>,
+    calculateRoute: Function as PropType<((params: CalculateOsmRouteInfo) => any)>,
     mapId: String,
     tileServer: [Object, Function, String] as PropType<OsmTileServer | (((type: MapType) => string | OsmTileServerConfig | undefined)) | OsmTileServerConfig | string>,
     useAdvancedMarkers: Boolean

packages/devextreme/js/__internal/ui/errors.ts

@@ -163,5 +163,7 @@ export default errorUtils(errors.ERROR_MESSAGES, {
   W1028: 'Nested/banded columns do not support the following properties: {0}.',
   W1029: '\'hiddenWeekDays\' must leave at least one weekday visible.',
   W1030: '\'tileServer\' is not configured for the OSM map provider.',
+  W1031: '\'calculateLocation\' is not configured for the OSM map provider.',
   W1032: '\'attribution\' is not configured for the OSM tile server.',
+  W1033: '\'calculateRoute\' is not configured for the OSM map provider.',
 });

packages/devextreme/js/ui/map.d.ts

@@ -20,6 +20,31 @@ export type RouteMode = 'driving' | 'walking';
 /** @public */
 export type MapType = 'hybrid' | 'roadmap' | 'satellite';
 
+/**
+ * @docid
+ * @public
+ */
+export type CalculateOsmRouteInfo = {
+  locations: Array<MapLocation>;
+  mode: RouteMode | string;
+};
+
+/**
+ * @docid
+ * @public
+ */
+export type OsmGeoJsonLineString = {
+  type: 'LineString';
+  coordinates: Array<Array<number>>;
+};
+
+/**
+ * @docid
+ * @type Array<Array<number>>|OsmGeoJsonLineString
+ * @public
+ */
+export type OsmRouteResult = Array<[number, number]> | OsmGeoJsonLineString;
+
 /**
  * @docid
  * @public
@@ -372,6 +397,16 @@ export interface dxMapOptions extends WidgetOptions<dxMap> {
        * @default undefined
        */
       tileServer?: OsmTileServer | undefined;
+      /**
+       * @docid
+       * @public
+       */
+      calculateLocation?: (query: string) => PromiseLike<MapLocation | undefined>;
+      /**
+       * @docid
+       * @public
+       */
+      calculateRoute?: (params: CalculateOsmRouteInfo) => PromiseLike<OsmRouteResult>;
     };
     /**
      * @docid

packages/devextreme/js/ui/map_types.d.ts

@@ -2,6 +2,9 @@ export {
   MapProvider,
   RouteMode,
   MapType,
+  CalculateOsmRouteInfo,
+  OsmGeoJsonLineString,
+  OsmRouteResult,
   OsmTileServerConfig,
   OsmTileServer,
   ClickEvent,

packages/devextreme/js/ui/widget/ui.errors.js

@@ -248,9 +248,15 @@
 /**
     * @name ErrorsUIWidgets.W1030
     */
+/**
+    * @name ErrorsUIWidgets.W1031
+    */
 /**
     * @name ErrorsUIWidgets.W1032
     */
+/**
+    * @name ErrorsUIWidgets.W1033
+    */
 import errors from '../../__internal/ui/errors';
 
 export default errors;

packages/devextreme/ts/dx.all.d.ts

@@ -23337,6 +23337,13 @@ declare module DevExpress.ui {
     ): DevExpress.core.utils.DxPromise<void>;
   }
   module dxMap {
+    /**
+     * [descr:CalculateOsmRouteInfo]
+     */
+    export type CalculateOsmRouteInfo = {
+      locations: Array<MapLocation>;
+      mode: RouteMode | string;
+    };
     /**
      * [descr:_ui_map_ClickEvent]
      */
@@ -23395,6 +23402,17 @@ declare module DevExpress.ui {
     export type OptionChangedEvent =
       DevExpress.common.core.events.EventInfo<dxMap> &
         DevExpress.common.core.events.ChangedOptionInfo;
+    /**
+     * [descr:OsmGeoJsonLineString]
+     */
+    export type OsmGeoJsonLineString = {
+      type: 'LineString';
+      coordinates: Array<Array<number>>;
+    };
+    /**
+     * [descr:OsmRouteResult]
+     */
+    export type OsmRouteResult = Array<[number, number]> | OsmGeoJsonLineString;
     /**
      * [descr:OsmTileServer]
      */
@@ -23598,6 +23616,18 @@ declare module DevExpress.ui {
        * [descr:dxMapOptions.providerConfig.tileServer]
        */
       tileServer?: DevExpress.ui.dxMap.OsmTileServer | undefined;
+      /**
+       * [descr:dxMapOptions.providerConfig.calculateLocation]
+       */
+      calculateLocation?: (
+        query: string
+      ) => PromiseLike<MapLocation | undefined>;
+      /**
+       * [descr:dxMapOptions.providerConfig.calculateRoute]
+       */
+      calculateRoute?: (
+        params: DevExpress.ui.dxMap.CalculateOsmRouteInfo
+      ) => PromiseLike<DevExpress.ui.dxMap.OsmRouteResult>;
     };
     /**
      * [descr:dxMapOptions.routes]