Skip to content

Commit 0975cb1

Browse files
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 code
1 parent cd4d15a commit 0975cb1

File tree

7 files changed

+877
-43
lines changed

7 files changed

+877
-43
lines changed

packages/ui/src/components/Map/CompactMap.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ export const CompactMap: React.FC<CompactMapProps> = ({
6363
defaultCenter,
6464
defaultZoom,
6565
markerVariant,
66+
renderMarker,
6667
isInspectorOpen,
6768
loading = false,
6869
error = false,
@@ -93,6 +94,7 @@ export const CompactMap: React.FC<CompactMapProps> = ({
9394
defaultCenter={defaultCenter}
9495
defaultZoom={defaultZoom}
9596
markerVariant={markerVariant}
97+
renderMarker={renderMarker}
9698
isInspectorOpen={isInspectorOpen}
9799
loading={loading}
98100
error={error}

0 commit comments

Comments
 (0)