feat: embedded interactive map in property + match detail views
Integrates react-leaflet with OpenStreetMap tiles. PropertyDetailView and MatchDetail now show property photo + zoomable/pannable map above the tabs/content — always visible on card click, no redirect. Map renders at correct lat/lng with a location marker and popup. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -9,6 +9,7 @@ import { useCompareStore } from '../../stores/compareStore'
|
||||
import { useShortlistStore } from '../../stores/shortlistStore'
|
||||
import { AddToShortlistDialog } from '../../components/shortlist'
|
||||
import { MatchReasonList } from '../../components/match-card/MatchReasonList'
|
||||
import { LocationPreview, PropertyMap } from '../../components/shared'
|
||||
import {
|
||||
LocationIntelligencePanel,
|
||||
MatchDetailHeader,
|
||||
@@ -142,6 +143,30 @@ export default function MatchDetail() {
|
||||
onShortlist={handleShortlist}
|
||||
/>
|
||||
|
||||
{/* Photo + Map */}
|
||||
{!isFuture && property && (
|
||||
<Box sx={{ mb: 2, borderRadius: 2, overflow: 'hidden', border: '1px solid #e2e8f0' }}>
|
||||
{property.images?.[0] && (
|
||||
<LocationPreview
|
||||
imageUrl={property.images[0]}
|
||||
lat={property.location.coordinates?.lat}
|
||||
lng={property.location.coordinates?.lng}
|
||||
address={`${property.address.street} ${property.address.houseNumber}, ${property.address.city}`}
|
||||
cityLabel={property.location.city}
|
||||
height={200}
|
||||
/>
|
||||
)}
|
||||
{property.location.coordinates && (
|
||||
<PropertyMap
|
||||
lat={property.location.coordinates.lat}
|
||||
lng={property.location.coordinates.lng}
|
||||
label={property.title}
|
||||
height={280}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box sx={{ display: 'flex', gap: 3, alignItems: 'flex-start' }}>
|
||||
{/* Main column */}
|
||||
<Box sx={{ flex: 1, minWidth: 0 }}>
|
||||
|
||||
Reference in New Issue
Block a user