Add Google Maps ProviderMap organism with clustering + popup flow
Introduces a full Google-Maps-backed provider map for the arrangement wizard's ProvidersStep. Clicking a pin morphs it into a MapPopup at the same coord; pins within 70px of each other collapse into a cluster (ceiling at zoom 13) that opens a ClusterPopup list on click. Row clicks pan + zoom the map to the provider and open their MapPopup. Map-background click routes through an exit transition that fades the popup out before reappearing the pin, via a matching fade-in keyframe on the atom markers. Key additions: - @vis.gl/react-google-maps + @googlemaps/markerclusterer deps - ClusterMarker atom (count badge; verified / unverified palettes) - ClusterPopup molecule (image-free rows; verified icon aligned to name; right-aligned "From $X" column; verified-first sort) - ProviderMap organism (APIProvider + Map + imperative AdvancedMarker layer via createRoot for clusterer compatibility) Component changes: - MapPin: promoted verified palette (brand-700); name now required; name-only and price-only variants dropped; active prop removed in favour of organism-level state; SVG nub with fill+stroke replaces the CSS border-triangle trick so the outline is continuous - MapPopup: `exiting` prop drives close animation; click events stop propagation so the map's onClick can't clear state mid-interaction - ProviderData type gains optional `coords`; demo fixtures populated with real NSW/QLD lat/lng for all 7 providers - ProvidersStep demo route wires ProviderMap into the mapPanel slot Memory: - docs/memory/component-registry updated (ClusterMarker, ClusterPopup, ProviderMap added; MapPin + MapPopup refined; MapCard retired) - docs/memory/session-log captures arc across 2026-04-21/22 and flags next-session work: ProvidersStep polish, mobile layout for list-map WizardLayout, and demo deploy Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -20,6 +20,7 @@ export const providers: DemoProvider[] = [
|
||||
reviewCount: 7,
|
||||
startingPrice: 1800,
|
||||
distanceKm: 2.3,
|
||||
coords: { lat: -34.1074, lng: 141.9166 },
|
||||
description:
|
||||
'H.Parsons delivers premium funeral services with exceptional care and support, guiding families through every step with empathy and expertise.',
|
||||
},
|
||||
@@ -35,6 +36,7 @@ export const providers: DemoProvider[] = [
|
||||
reviewCount: 23,
|
||||
startingPrice: 2450,
|
||||
distanceKm: 5.1,
|
||||
coords: { lat: -34.487, lng: 150.897 },
|
||||
},
|
||||
{
|
||||
id: 'wollongong-city',
|
||||
@@ -46,6 +48,7 @@ export const providers: DemoProvider[] = [
|
||||
reviewCount: 15,
|
||||
startingPrice: 3400,
|
||||
distanceKm: 6.8,
|
||||
coords: { lat: -34.4278, lng: 150.8931 },
|
||||
},
|
||||
{
|
||||
id: 'killick',
|
||||
@@ -59,6 +62,7 @@ export const providers: DemoProvider[] = [
|
||||
reviewCount: 15,
|
||||
startingPrice: 3100,
|
||||
distanceKm: 8.4,
|
||||
coords: { lat: -26.5408, lng: 151.8388 },
|
||||
},
|
||||
{
|
||||
id: 'mackay',
|
||||
@@ -72,6 +76,7 @@ export const providers: DemoProvider[] = [
|
||||
reviewCount: 87,
|
||||
startingPrice: 2800,
|
||||
distanceKm: 18.2,
|
||||
coords: { lat: -33.3644, lng: 151.3728 },
|
||||
},
|
||||
{
|
||||
id: 'mannings',
|
||||
@@ -85,6 +90,7 @@ export const providers: DemoProvider[] = [
|
||||
reviewCount: 31,
|
||||
startingPrice: 2600,
|
||||
distanceKm: 22.0,
|
||||
coords: { lat: -36.6742, lng: 149.8417 },
|
||||
},
|
||||
{
|
||||
id: 'botanical',
|
||||
@@ -96,6 +102,7 @@ export const providers: DemoProvider[] = [
|
||||
reviewCount: 8,
|
||||
startingPrice: 5200,
|
||||
distanceKm: 15.0,
|
||||
coords: { lat: -33.8988, lng: 151.1794 },
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user