spb/rent-ka

1// -----------------------------------------------------------------------------2// Author: Simon-Pierre Boucher3// Contact: contact@spboucher.ai4// Project: Groupe Ka / Ka Maps (Rent-Ka integration)5// components/ListingMap3D.tsx: 3D mini-map of the detail page — tight camera6// on the address (zoom 17, 62° pitch), realistic Mapbox Standard basemap,7// and the listing's building highlighted in COBALT ("buildings" featureset8// via KaSpotlightMap). Lazily 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 type { Listing } from "../api";16import { louKaMapTheme } from "../kamaps/theme";17import { MAPBOX_TOKEN } from "../kamaps/config";1819/** Signature highlight of the page — same language as the badges. */20export const BUILDING_ACCENT = "#2456e6";  // official Rent-Ka cobalt2122export default function ListingMap3D({ l }: { l: Listing }) {23  const property = useMemo<MapProperty | null>(() => {24    if (l.lat == null || l.lng == null) return null;25    return {26      id: l.uid,27      appSource: "rent-ka",28      latitude: l.lat,29      longitude: l.lng,30      kind: "listing",31      listingType: "rent",32      price: l.price ?? undefined,33      propertyType: l.unit_type || undefined,34      address: l.address || l.title || undefined,35      city: l.city || undefined,36      thumbnailUrl: l.images?.[0],37    };38  }, [l.uid, l.lat, l.lng, l.price, l.unit_type, l.address, l.title, l.city, l.images]);3940  if (!property) return null;4142  return (43    <div className="lmap3d" role="img"44         aria-label={`3D map — ${l.address || l.title}, the listing's building highlighted`}>45      <KaSpotlightMap46        theme={louKaMapTheme}47        mapboxToken={MAPBOX_TOKEN}48        property={property}49        buildingColor={BUILDING_ACCENT}50      >51        <KaBrandBadge />52      </KaSpotlightMap>53      <span className="lmap3d-legende" aria-hidden="true">54        <i /> The listing's building55      </span>56    </div>57  );58}59