Python 49.6%
TypeScript 25.5%
CSS 24.1%
1// -----------------------------------------------------------------------------2// Author: Simon-Pierre Boucher3// Contact: contact@spboucher.ai4// Project: Groupe Ka / Ka Maps (Home-Ka integration)5// components/PropertyMap.tsx : 3D mini-map of the detail page — same component6// as Lou-Ka (KaSpotlightMap): tight camera on the address, realistic Mapbox7// Standard basemap, the listing's building highlighted in Home-Ka GREEN.8// 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 { homeKaMapTheme } from "../kamaps/theme";16import { HOMEKA_APP_SOURCE } from "../kamaps/adapter";17import { MAPBOX_TOKEN } from "../kamaps/config";1819/** Home-Ka signal green — same language as the brand accent. */20export const BUILDING_GREEN = "#1e4fd8";2122export interface PropertyMapProps {23 uid: string;24 lat: number;25 lng: number;26 price?: number | null;27 propertyType?: string;28 address?: string;29 city?: string;30 image?: string | null;31 deal?: boolean;32}3334export default function PropertyMap({35 uid, lat, lng, price, propertyType, address, city, image, deal,36}: PropertyMapProps) {37 const property = useMemo<MapProperty>(() => ({38 id: uid,39 appSource: HOMEKA_APP_SOURCE,40 latitude: lat,41 longitude: lng,42 kind: "listing",43 listingType: "sale",44 price: price ?? undefined,45 propertyType: propertyType || undefined,46 address: address || undefined,47 city: city || undefined,48 thumbnailUrl: image ?? undefined,49 highlight: deal ?? false,50 }), [uid, lat, lng, price, propertyType, address, city, image, deal]);5152 return (53 <div54 className="lmap3d" role="img"55 aria-label={`3D map — ${address || "property"}, the listed building in green`}56 >57 <KaSpotlightMap58 theme={homeKaMapTheme}59 mapboxToken={MAPBOX_TOKEN}60 property={property}61 buildingColor={BUILDING_GREEN}62 >63 <KaBrandBadge />64 </KaSpotlightMap>65 <span className="lmap3d-legende" aria-hidden="true">66 <i /> Listed building67 </span>68 </div>69 );70}71