Commit 0975cb1
committed
feat(Map): add custom marker rendering with renderMarker API
Implements flexible custom marker rendering following Material-UI DataGrid
and Ant Design Table patterns. Enables developers to provide custom React
components for map markers while the library handles all Leaflet integration.
Core Changes:
- Add renderMarker prop to Map, MapView, and CompactMap components
- Add RenderMarkerParams interface with location, state, color, and variant
- Implement three-tier priority: per-location → global → built-in markers
- Support null returns from renderMarker to fall back to built-in markers
- Export RenderMarkerParams in public API via index.ts
Performance Optimizations:
- Remove react-dom/server dependency (~50KB bundle reduction)
- Implement lightweight SVG serializer for client-side conversion
- Automatically extract icon size/anchor from SVG width/height attributes
- Fix marker alignment issues for non-standard sizes (e.g., 20×20 dots)
API Design:
- Global renderMarker: applies to all locations unless overridden
- Per-location renderMarker: location-specific customization via LocationData
- Null fallback pattern: return null to use built-in markers for specific states
- Hybrid mode support: different markers for selected/unselected via variant param
Examples Added (CustomMarkers.stories.tsx):
1. Global Custom Marker - uniform styling across all locations
2. Hybrid Mode Support - pin when selected, dot otherwise
3. Per-Location Custom Markers - unique markers per location
4. Performance Optimized - useCallback memoization pattern
5. Fallback Pattern - custom selected, default unselected
Technical Details:
- Automatic size/anchor calculation: iconAnchor=[w/2, h], popupAnchor=[0, -h]
- React prop transformations: className→class, strokeWidth→stroke-width, etc.
- Recursive SVG child serialization for complex marker structures
- SSR-safe (MapView already guards against server-side rendering)
Fixes:
- CompactMap now forwards renderMarker prop to MapView
- Fixed marker positioning for non-28×40 sized custom markers
- Removed server-side React bundle bloat from client code1 parent cd4d15a commit 0975cb1
File tree
7 files changed
+877
-43
lines changed- packages/ui/src/components/Map
7 files changed
+877
-43
lines changed| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
63 | 63 | | |
64 | 64 | | |
65 | 65 | | |
| 66 | + | |
66 | 67 | | |
67 | 68 | | |
68 | 69 | | |
| |||
93 | 94 | | |
94 | 95 | | |
95 | 96 | | |
| 97 | + | |
96 | 98 | | |
97 | 99 | | |
98 | 100 | | |
| |||
0 commit comments