DRAFT: feat(Map): add OpenStreetMap (OSM) provider for dxMap#34041
Open
AlisherAmonulloev wants to merge 15 commits into
Open
DRAFT: feat(Map): add OpenStreetMap (OSM) provider for dxMap#34041AlisherAmonulloev wants to merge 15 commits into
AlisherAmonulloev wants to merge 15 commits into
Conversation
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
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds a new provider: 'osm' option for dxMap, implementing an OpenStreetMap provider backed by Leaflet. It introduces OSM-specific providerConfig hooks (tiles/geocoding/routing provided by the consumer), integrates the provider into the core Map widget, updates typings/metadata/wrappers, and adds a Leaflet mock plus QUnit coverage and a React Storybook example.
Changes:
- Added a Leaflet-based OSM dynamic provider and hooked it into
dxMap’s provider registry and option-change pipeline (incl. runtime tileServer updates). - Extended public typings (
MapProvider, OSM callback/types) and propagated the new provider to metadata and framework wrappers. - Added QUnit test coverage for the new provider using a Leaflet mock, plus a React Storybook story demonstrating configuration.
Reviewed changes
Copilot reviewed 16 out of 19 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/devextreme/ts/dx.all.d.ts | Adds 'osm' to MapProvider and includes OSM-related public types/options in the aggregated typings output. |
| packages/devextreme/js/ui/map.d.ts | Adds 'osm' provider type and introduces public OSM callback/tile server types plus providerConfig fields. |
| packages/devextreme/js/ui/map_types.d.ts | Re-exports newly added OSM public types from ui/map. |
| packages/devextreme/js/ui/widget/ui.errors.js | Adds new warnings W1030/W1031/W1032 for OSM configuration issues. |
| packages/devextreme/js/__internal/ui/map/provider.ts | Adds a default updateTileServer() hook and adjusts apiKey lookup typing for non-keyed providers like osm. |
| packages/devextreme/js/__internal/ui/map/provider.dynamic.ts | Extends geocoding cache typing to support plain {lat,lng} results for OSM. |
| packages/devextreme/js/__internal/ui/map/provider.dynamic.osm.ts | New Leaflet-based OSM provider implementation (tiles, geocoding callback, routing callback + fallback). |
| packages/devextreme/js/__internal/ui/map/map.ts | Registers the osm provider and adds a targeted option-change path for providerConfig.tileServer. |
| packages/devextreme/testing/helpers/forMap/leafletMock.js | New Leaflet mock used by unit tests. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/osmTests.js | New QUnit suite covering OSM loading, options, tiles, markers, routes, and cleanup behavior. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets/map.tests.js | Includes the new OSM test module in the map test entrypoint. |
| packages/devextreme/eslint.config.mjs | Extends spellchecker skipWords for OSM/Leaflet domain terms used by the feature. |
| packages/devextreme-metadata/aspnet/enums.ts | Adds 'osm' to the ASP.NET GeoMapProvider enum metadata. |
| packages/devextreme-react/src/map.ts | Propagates new OSM providerConfig types into the generated React wrapper types. |
| packages/devextreme-vue/src/map.ts | Propagates new OSM providerConfig types/props/emits into the generated Vue wrapper. |
| packages/devextreme-angular/src/ui/nested/provider-config.ts | Adds OSM providerConfig inputs to the generated Angular nested option component. |
| packages/devextreme-angular/src/ui/map/nested/provider-config.ts | Adds OSM providerConfig inputs to the generated Angular map nested option component. |
| packages/devextreme-angular/src/ui/map/index.ts | Extends Angular Map component typing for providerConfig and its change event to include OSM hooks. |
| apps/react-storybook/stories/map/OSMMap.stories.tsx | New Storybook story demonstrating OSM provider configuration with commercial tile providers and OSRM routing. |
AlisherAmonulloev
temporarily deployed
to
storybook
GitHub Actions
Inactive
AlisherAmonulloev
temporarily deployed
to
storybook
GitHub Actions
Inactive
_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.
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.
_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.
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.
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.
AlisherAmonulloev
temporarily deployed
to
storybook
GitHub Actions
Inactive
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)
Unused const tripped no-unused-vars (lint-js). (Copilot review #3)
Removed the unused `const map` assignment and redundant .dxMap('instance')
call that tripped no-unused-vars (lint-js). (Copilot review #6)
Rename OSMProvider/prepareTestingOSMProvider to OsmProvider/ prepareTestingOsmProvider for consistency with the Osm* public types. (Copilot review #4)
Rename OSMStoryArgs to OsmStoryArgs for acronym-casing consistency. (Copilot review #5)
AlisherAmonulloev
temporarily deployed
to
storybook
GitHub Actions
Inactive
AlisherAmonulloev
temporarily deployed
to
storybook
GitHub Actions
Inactive
Comment on lines
+62
to
+69
| _movementMode(type: RouteMode | string = ''): string { | ||
| const modes: Record<string, string> = { | ||
| driving: 'driving', | ||
| walking: 'walking', | ||
| }; | ||
|
|
||
| return modes[type] ?? 'driving'; | ||
| } |
Comment on lines
+165
to
+175
| _loadMapStyles(): Promise<void> { | ||
| return new Promise<void>((resolve, reject) => { | ||
| ajax.sendRequest({ | ||
| url: LEAFLET_CSS_URL, | ||
| dataType: 'text', | ||
| }).then((css) => { | ||
| $('<style>').html(css).appendTo($('head')); | ||
| resolve(); | ||
| }, reject); | ||
| }); | ||
| } |
Comment on lines
258
to
264
| 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 | ||
| } |
AlisherAmonulloev
removed
skip-cache
storybook
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.