web-widgets
web-widgets copied to clipboard
Leaflet bug - Mapbox tiles did not load in certain scenarios
Pull request type
Description This PR addresses critical issues with the Maps widget's Leaflet-based providers (Mapbox, OpenStreet, and Here Maps) where auto-zoom functionality was firing too early before markers were rendered, and map tiles were not loading properly.
Root cause: The older Leaflet version had compatibility issues with certain tile providers. Additionally, the auto-zoom logic was calculating bounds and setting zoom levels before map markers were fully rendered, resulting in incorrect zoom positioning.
Changes made:
- Upgrade Leaflet dependency from ^1.9.4 to 2.0.0-alpha to resolve tile loading issues
- Add timing delay mechanism (100ms) in [SetBoundsComponent] to ensure markers render before auto-zoom calculations
- Implement auto zoom constraints with [maxZoom: 15] to prevent over-zooming when markers are clustered
- Use pixel-based padding [20, 20] for consistent marker spacing instead of percentage-based
- Add ResizeObserver polyfill in Jest setup for Leaflet 2.0.0-alpha test compatibility
- Update test snapshots to match new Leaflet DOM structure and CSS transformations
Technical improvements:
- Updated [flyToBounds] options with proper animation and padding settings
- Added map size invalidation after bounds setting for better reliability
- Improved initial zoom calculation to prevent conflicts between auto-zoom and manual zoom
Quality assurance:
✅ All 15 tests pass ✅ ESLint validation passes ✅ No breaking changes to existing APIs ✅ Google Maps functionality unchanged ✅ Backward compatibility maintained
What should be covered while testing?
Test scenarios:
Mapbox provider: Verify tiles load correctly and auto-zoom works with proper timing OpenStreet provider: Test auto-zoom behavior with multiple markers at varying distances Here Maps provider: Ensure consistent zoom levels and tile loading Edge cases: Test with markers very close together (should respect maxZoom: 15 limit) Performance: Verify the 100ms delay doesn't negatively impact user experience
Expected behavior:
Map tiles should load immediately without blank/missing areas Auto-zoom should trigger after markers are visible and position the map correctly Zoom level should be reasonable even when markers are clustered closely No regression in manual zoom or other existing functionality
Checklist review:
❌ JIRA story: No JIRA ticket ❌ Version bump: Maybe not required - bug fix maintains API compatibility ❌ Related PRs: None in other repositories ❌ Documentation: No XML changes or new features requiring docs ✅ Bug fix: Detailed testing instructions provided above