spb/house-ka

1// -----------------------------------------------------------------------------2// Author: Simon-Pierre Boucher3// Contact: contact@spboucher.ai4// Project: Groupe Ka / Ka Maps (House-Ka integration)5// components/PropertyMap.tsx : 3D mini-map of the listing page — same6// component as Lou-Ka (KaSpotlightMap): tight camera on the address, realistic7// Mapbox Standard basemap, the listing's building highlighted in House-Ka8// PINE. Lazy-loaded from Listing.tsx.9// -----------------------------------------------------------------------------10import { useMemo } from "react";11import "mapbox-gl/dist/mapbox-gl.css";12import "@groupe-ka/ka-maps/styles.css";13import type { MapProperty } from "@groupe-ka/ka-maps";14import { KaBrandBadge, KaSpotlightMap } from "@groupe-ka/ka-maps/react";15import { houseKaMapTheme } from "../kamaps/theme";16import { MAPBOX_TOKEN } from "../kamaps/config";1718/** House-Ka pine signal — same language as the brand accent. */19export const BUILDING_PINE = "#0f6b4f";2021export interface PropertyMapProps {22  uid: string;23  lat: number;24  lng: number;25  price?: number | null;26  propertyType?: string;27  address?: string;28  city?: string;29  image?: string | null;30  deal?: boolean;31}3233export default function PropertyMap({34  uid, lat, lng, price, propertyType, address, city, image, deal,35}: PropertyMapProps) {36  const property = useMemo<MapProperty>(() => ({37    id: uid,38    appSource: "house-ka",39    latitude: lat,40    longitude: lng,41    kind: "listing",42    listingType: "sale",43    price: price ?? undefined,44    propertyType: propertyType || undefined,45    address: address || undefined,46    city: city || undefined,47    thumbnailUrl: image ?? undefined,48    highlight: deal ?? false,49  }), [uid, lat, lng, price, propertyType, address, city, image, deal]);5051  return (52    <div53      className="lmap3d" role="img"54      aria-label={`3D map — ${address || "property"}, the listing's building in green`}55    >56      <KaSpotlightMap57        theme={houseKaMapTheme}58        mapboxToken={MAPBOX_TOKEN}59        property={property}60        buildingColor={BUILDING_PINE}61      >62        <KaBrandBadge />63      </KaSpotlightMap>64      <span className="lmap3d-legende" aria-hidden="true">65        <i /> The listing's building66      </span>67    </div>68  );69}70