https://chimney.ai/_next/static/chunks/6021.7724df7018e56f09.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6021],{26021:function(e,t,s){s.r(t),s.d(t,{default:function(){return ListingsMapView}});var n=s(57437),a=s(29738),r=s.n(a),o=s(2265),l=s(16691),i=s.n(l),c=s(24033),d=s(27872),u=s(17027),f=s(51753),p=s(4063);function ListingsMapView(e){let{criteria:t,searchQuery:s,savedHomeIds:a,bookmarkBusyMls:l=null,onBookmarkClick:i,googleMapsApiKey:p=""}=e,x=(0,o.useRef)(null),h=(0,o.useRef)(null),g=(0,o.useRef)([]),[b,v]=(0,o.useState)(!1),[w,j]=(0,o.useState)(null),[y,k]=(0,o.useState)(null),N=(0,o.useRef)(null),L=(0,c.useRouter)(),[z,E]=(0,o.useState)([]),[M,C]=(0,o.useState)(!1),[S,_]=(0,o.useState)(0),[P,R]=(0,o.useState)(11),B=(0,o.useRef)(null),V=(0,o.useRef)(t),F=(0,o.useRef)(s),[T,I]=(0,o.useState)(!1),A=(0,o.useRef)(!1),O=(0,o.useRef)("");(0,o.useEffect)(()=>{V.current=t},[t]),(0,o.useEffect)(()=>{F.current=s},[s]);let G=(0,o.useCallback)(async e=>{let t=h.current;if(!t)return;let s=JSON.stringify(V.current)+"|"+(F.current||"");if(s===O.current)return;O.current=s,B.current&&B.current.abort();let n=new AbortController;B.current=n,C(!0),I(!1);try{var a;let s={pageNumber:0,pageSize:200,sort:"list_date_desc",...V.current,...F.current?{searchQuery:F.current}:{}};F.current&&(delete s.cities,delete s.municipalities,delete s.neighborhoods);let r=await fetch("/api/search/v3",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(s),signal:n.signal});if(!r.ok){E([]),_(0);return}let o=await r.json(),l=o.listings||[];if(E(l),_((null===(a=o.meta)||void 0===a?void 0:a.totalResults)||0),!(null==e?void 0:e.skipFit)&&l.length>0){let e=l.filter(e=>(0,u.zo)(e.facts));if(e.length>0){A.current=!0;let s=new google.maps.LatLngBounds;e.forEach(e=>s.extend({lat:e.facts.point.y,lng:e.facts.point.x})),t.fitBounds(s,{top:50,right:50,bottom:50,left:50})}}}catch(e){e instanceof Error&&"AbortError"!==e.name&&console.error("[MapView]",e)}finally{C(!1)}},[]);(0,o.useEffect)(()=>{let e=!1;return(0,f.Z)(p).then(()=>{if(e||!x.current||h.current)return;let t=new google.maps.Map(x.current,{zoom:11,center:{lat:43.6532,lng:-79.3832},disableDefaultUI:!0,zoomControl:!0,streetViewControl:!1,scaleControl:!0,controlSize:30,gestureHandling:"greedy"});h.current=t,t.addListener("zoom_changed",()=>{let e=t.getZoom()||11;R(e)}),t.addListener("dragend",()=>{I(!0)}),v(!0)}).catch(t=>{e||j((null==t?void 0:t.message)||"Failed to load Google Maps")}),()=>{e=!0}},[p]),(0,o.useEffect)(()=>{b&&G()},[b,G]);let H=(0,o.useMemo)(()=>JSON.stringify({...t,searchQuery:s}),[t,s]);(0,o.useEffect)(()=>{b&&(O.current="",G())},[H,b,G]);let Z=(0,o.useCallback)(()=>{g.current.forEach(e=>e.setMap(null)),g.current=[]},[]),D=(0,o.useMemo)(()=>z.filter(e=>(0,u.zo)(e.facts)),[z]),J=(0,o.useMemo)(()=>{let e=h.current;if(!e||0===D.length)return D;let t=e.getBounds();return t?D.filter(e=>t.contains({lat:e.facts.point.y,lng:e.facts.point.x})):D},[D,P]);(0,o.useEffect)(()=>{if(!b||!h.current)return;Z(),k(null);let e=h.current;if(0===J.length)return;let{clusters:t,individual:s}=function(e,t){if(t>=14)return{clusters:[],individual:e};let s=t<=8?1:t<=9?.5:t<=10?.2:t<=11?.1:t<=12?.05:.02,n={};e.forEach(e=>{let t=e.facts.point.y,a=e.facts.point.x,r="".concat(Math.floor(t/s),",").concat(Math.floor(a/s));n[r]||(n[r]=[]),n[r].push(e)});let a=[],r=[];return Object.values(n).forEach(e=>{if(1===e.length){r.push(e[0]);return}let t=0,s=0;e.forEach(e=>{t+=e.facts.point.y,s+=e.facts.point.x}),a.push({lat:t/e.length,lng:s/e.length,count:e.length,listings:e})}),{clusters:a,individual:r}}(J,P);t.forEach(t=>{let s=new google.maps.LatLng(t.lat,t.lng),n=new google.maps.OverlayView,a=null;n.onAdd=function(){var s;(a=document.createElement("div")).style.position="absolute",a.style.cursor="pointer",a.style.transform="translate(-50%, -50%)",a.style.zIndex="5";let n=t.count>=100?52:t.count>=20?46:40;a.innerHTML='<div class="listings-map-cluster" style="width:'.concat(n,"px;height:").concat(n,'px">').concat(t.count,"</div>"),a.addEventListener("click",s=>{s.stopPropagation();let n=new google.maps.LatLngBounds;t.listings.forEach(e=>n.extend({lat:e.facts.point.y,lng:e.facts.point.x})),A.current=!0,e.fitBounds(n,{top:50,right:50,bottom:50,left:50})}),null===(s=this.getPanes())||void 0===s||s.floatPane.appendChild(a)},n.draw=function(){if(!a)return;let e=this.getProjection().fromLatLngToDivPixel(s);e&&(a.style.left="".concat(e.x,"px"),a.style.top="".concat(e.y,"px"))},n.onRemove=function(){(null==a?void 0:a.parentNode)&&(a.parentNode.removeChild(a),a=null)},n.setMap(e),g.current.push(n)}

1),s.forEach(t=>{let s=new google.maps.LatLng(t.facts.point.y,t.facts.point.x),n=function(e){if(!e||isNaN(e))return"N/A";let t=Math.round(e/100);return t>=1e6?"$".concat((t/1e6).toFixed(1),"M"):t>=1e3?"$".concat(Math.round(t/1e3),"k"):"$".concat(t.toLocaleString())}(t.facts.list_price),a=new google.maps.OverlayView,r=null;a.onAdd=function(){var e;(r=document.createElement("div")).style.position="absolute",r.style.cursor="pointer",r.style.transform="translate(-50%, -100%)",r.style.zIndex="10",r.style.transition="transform 150ms ease, z-index 0ms",r.innerHTML='<div class="listings-map-marker">'.concat(n,"</div>"),r.addEventListener("mouseenter",()=>{r&&(r.style.zIndex="1000000",r.style.transform="translate(-50%, -100%) scale(1.1)")}),r.addEventListener("mouseleave",()=>{r&&(r.style.zIndex="10",r.style.transform="translate(-50%, -100%)")}),r.addEventListener("click",e=>{e.stopPropagation();let s=r.getBoundingClientRect();k({listing:t,position:{x:s.left+s.width/2,y:s.top}})}),null===(e=this.getPanes())||void 0===e||e.floatPane.appendChild(r)},a.draw=function(){if(!r)return;let e=this.getProjection().fromLatLngToDivPixel(s);e&&(r.style.left="".concat(e.x,"px"),r.style.top="".concat(e.y,"px"))},a.onRemove=function(){(null==r?void 0:r.parentNode)&&(r.parentNode.removeChild(r),r=null)},a.setMap(e),g.current.push(a)})},[J,P,b,Z]),(0,o.useEffect)(()=>{if(!y)return;let handleClick=e=>{N.current&&!N.current.contains(e.target)&&k(null)},handleScroll=()=>k(null);return document.addEventListener("mousedown",handleClick),window.addEventListener("scroll",handleScroll,!0),()=>{document.removeEventListener("mousedown",handleClick),window.removeEventListener("scroll",handleScroll,!0)}},[y]);let U=(0,o.useCallback)(()=>{y&&L.push((0,d.l)(y.listing).path)},[y,L]),W=(0,o.useCallback)(()=>{I(!1),O.current="",G({skipFit:!0})},[G]);return(0,n.jsxs)("div",{style:{height:"calc(100vh - 240px)",minHeight:"500px"},className:"jsx-b7126f1d96987f48 relative w-full",children:[(0,n.jsx)("div",{ref:x,className:"jsx-b7126f1d96987f48 w-full h-full rounded-2xl overflow-hidden"}),w&&(0,n.jsx)("div",{className:"jsx-b7126f1d96987f48 absolute inset-0 flex items-center justify-center bg-white/90 rounded-2xl z-10",children:(0,n.jsxs)("div",{className:"jsx-b7126f1d96987f48 text-center p-6",children:[(0,n.jsx)("p",{className:"jsx-b7126f1d96987f48 text-red-600 text-lg font-medium mb-2",children:"Unable to load map"}),(0,n.jsx)("p",{className:"jsx-b7126f1d96987f48 text-neutral-500 text-sm",children:w})]})}),M&&!w&&(0,n.jsx)("div",{className:"jsx-b7126f1d96987f48 absolute top-4 left-1/2 -translate-x-1/2 z-20",children:(0,n.jsxs)("div",{className:"jsx-b7126f1d96987f48 flex items-center gap-2 bg-white rounded-full shadow-lg px-4 py-2",children:[(0,n.jsx)("div",{className:"jsx-b7126f1d96987f48 w-4 h-4 border-2 border-sky-700 border-t-transparent rounded-full animate-spin"}),(0,n.jsx)("span",{className:"jsx-b7126f1d96987f48 text-neutral-600 text-sm font-medium",children:"Loading properties…"})]})}),T&&!M&&(0,n.jsx)("div",{className:"jsx-b7126f1d96987f48 absolute top-4 left-1/2 -translate-x-1/2 z-20",children:(0,n.jsxs)("button",{onClick:W,className:"jsx-b7126f1d96987f48 flex items-center gap-2 bg-sky-700 hover:bg-sky-800 text-white rounded-full shadow-lg px-5 py-2.5 transition-colors font-medium text-sm",children:[(0,n.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",className:"jsx-b7126f1d96987f48",children:(0,n.jsx)("path",{d:"M7 1a6 6 0 1 0 3.71 10.71l3.29 3.29 1.41-1.41-3.29-3.29A6 6 0 0 0 7 1zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8z",fill:"currentColor",className:"jsx-b7126f1d96987f48"})}),"Search this area"]})}),!M&&!w&&0===z.length&&b&&(0,n.jsx)("div",{className:"jsx-b7126f1d96987f48 absolute top-4 left-1/2 -translate-x-1/2 z-20",children:(0,n.jsx)("div",{className:"jsx-b7126f1d96987f48 bg-white rounded-full shadow-lg px-5 py-2.5",children:(0,n.jsx)("p",{className:"jsx-b7126f1d96987f48 text-neutral-500 text-sm font-medium",children:"No properties in this area"})})}),(0,n.jsx)("div",{className:"jsx-b7126f1d96987f48 absolute bottom-4 left-4 z-20",children:(0,n.jsxs)("div",{className:"jsx-b7126f1d96987f48 bg-white/95 backdrop-blur-sm rounded-lg shadow-lg px-3 py-2 text-sm text-neutral-600",children:[(0,n.jsx)("span",{className:"jsx-b7126f1d96987f48 font-semibold text-neutral-800",children:S.toLocaleStr

1ing()})," properties",S>200&&(0,n.jsxs)("span",{className:"jsx-b7126f1d96987f48 text-neutral-400 ml-1",children:["(showing ",Math.min(z.length,200)," on map)"]})]})}),y&&(0,n.jsx)(m,{ref:N,listing:y.listing,position:y.position,isSaved:a.includes(String(y.listing.facts.mls_number)),bookmarkBusy:l===String(y.listing.facts.mls_number),onNavigate:U,onBookmark:()=>i(String(y.listing.facts.mls_number)),onClose:()=>k(null)}),(0,n.jsx)(r(),{id:"b7126f1d96987f48",children:'.listings-map-marker{background:white;color:#1a1a1a;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;padding:4px 10px;font-size:13px;font-weight:600;font-family:"Satoshi Variable",sans-serif;-webkit-box-shadow:0 2px 8px rgba(0,0,0,.15);-moz-box-shadow:0 2px 8px rgba(0,0,0,.15);box-shadow:0 2px 8px rgba(0,0,0,.15);white-space:nowrap;position:relative;border:2px solid transparent;-webkit-transition:border-color 150ms ease,box-shadow 150ms ease;-moz-transition:border-color 150ms ease,box-shadow 150ms ease;-o-transition:border-color 150ms ease,box-shadow 150ms ease;transition:border-color 150ms ease,box-shadow 150ms ease}.listings-map-marker:hover{border-color:#0369a1;-webkit-box-shadow:0 4px 12px rgba(3,105,161,.25);-moz-box-shadow:0 4px 12px rgba(3,105,161,.25);box-shadow:0 4px 12px rgba(3,105,161,.25)}.listings-map-marker::after{content:"";position:absolute;left:50%;bottom:-6px;-webkit-transform:translatex(-50%);-moz-transform:translatex(-50%);-ms-transform:translatex(-50%);-o-transform:translatex(-50%);transform:translatex(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid white}.listings-map-marker:hover::after{border-top-color:#0369a1}.listings-map-cluster{background:#0369a1;color:white;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:14px;font-weight:700;font-family:"Satoshi Variable",sans-serif;-webkit-box-shadow:0 2px 10px rgba(3,105,161,.35);-moz-box-shadow:0 2px 10px rgba(3,105,161,.35);box-shadow:0 2px 10px rgba(3,105,161,.35);border:3px solid white;cursor:pointer;-webkit-transition:-webkit-transform 150ms ease;-moz-transition:-moz-transform 150ms ease;-o-transition:-o-transform 150ms ease;transition:-webkit-transform 150ms ease;transition:-moz-transform 150ms ease;transition:-o-transform 150ms ease;transition:transform 150ms ease}.listings-map-cluster:hover{-webkit-transform:scale(1.15);-moz-transform:scale(1.15);-ms-transform:scale(1.15);-o-transform:scale(1.15);transform:scale(1.15)}'})]})}let m=o.forwardRef(function(e,t){var s,a;let{listing:r,position:o,isSaved:l,bookmarkBusy:c,onNavigate:u,onBookmark:f,onClose:m}=e,x=(0,d.l)(r),h="number"==typeof(null===(s=r.score)||void 0===s?void 0:s.total)?r.score.total:void 0,g=null===(a=r.score)||void 0===a?void 0:a.rank,b="/api/listing/".concat(r.facts.mls_number,"/image"),v=window.innerWidth,w=o.x-150;return w<16&&(w=16),w+300>v-16&&(w=v-300-16),(0,n.jsx)("div",{ref:t,className:"fixed z-[9999]",style:{left:"".concat(w,"px"),top:"".concat(Math.max(o.y-280,16),"px"),width:"".concat(300,"px")},children:(0,n.jsxs)("div",{className:"bg-white rounded-xl shadow-[0_8px_30px_rgba(0,0,0,0.15)] overflow-hidden",children:[(0,n.jsxs)("div",{className:"relative",children:[(0,n.jsx)("div",{className:"h-40 bg-cover bg-center cursor-pointer",style:{backgroundImage:"url(".concat(b,")")},onClick:u}),(0,n.jsx)("button",{className:"absolute top-2 right-2 w-8 h-8 rounded-full bg-white/90 flex items-center justify-center hover:bg-white transition-colors disabled:opacity-50",disabled:c,onClick:e=>{e.stopPropagation(),c||f()},children:c?(0,n.jsx)(p.xV,{}):(0,n.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:l?"#0369a1":"none",stroke:l?"#0369a1":"#666",strokeWidth:"2",children:(0,n.jsx)("path",{d:"M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"})})}),(0,n.jsx)("button",{className:"absolute top-2 left-2 w-7 h-7 rounded-full bg-black/50 flex items-center justify-center hover:bg-black/70 transition-colors",onClick:e=>{e.stopPropagation(),m()},children:(0,n.jsx)("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",children:(0,n.jsx)("path",{d:"M2 2L10 10M10 2L2 10",stroke:"white",strokeWidth:"2",strokeLinecap:"round"})})}),("great"===g||"good"===g)&&(0,n.jsx)("div",{className:"absolute bottom-2 left-2 px-2 py-0.5 bg-sky-700 text-white text-xs font-medium rounded",children:"Top Match"})]}),(0,n.jsxs)("div",{className:"p-3 cursor-pointer",onClick:u,children:[(0,n.jsxs)("div",{className:"flex items-center justify-between mb-1",children:[(0,n.jsx)("span",{className:"text-base font-bold text-neutral-800",children:(0,d.T)(r.facts.list_price)}),void 0!==h&&h>0&&(0,n.jsxs)("span",{className:"flex items-center gap-1 text-xs font-semibold text-sky-700 bg-sky-50 px-2 py-0.5 rounded-full",children:[(0,n.jsx)("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",children:(0,n.jsx)("path",{d:"M6 1L7.5 4.5L11 5L8.5 7.5L9 11L6 9.5L3 11L3.5 7.5L1 5L4.5 4.5L6 1Z",fill:"#0369a1"})}),Math.round(h)]})]}),(0,n.jsx)("p",{className:"text-sm font-medium text-neutral-700 truncate",children:x.card.title}),(0,n.jsx)("p",{className:"text-xs text-neutral-500 truncate mb-2",children:x.card.address}),(0,n.jsxs)("div",{className:"flex items-center gap-3 text-xs text-neutral-500",children:[x.card.beds>0&&(0,n.jsxs)("span",{className:"flex items-center gap-1",children:[(0,n.jsx)(i(),{src:"/assets/icons/bed.svg",alt:"Beds",width:14,height:14}),x.card.beds]}),x.card.baths>0&&(0,n.jsxs)("span",{className:"flex items-center gap-1",children:[(0,n.jsx)(i(),{src:"/assets/icons/bath.svg",alt:"Baths",width:14,height:14}),x.card.baths]}),x.card.parking>0&&(0,n.jsxs)("span",{className:"flex items-center gap-1",children:[(0,n.jsx)(i(),{src:"/assets/icons/parking.svg",alt:"Parking",width:14,height:14}),x.card.parking]})]})]})]})})})},51753:function(e,t,s){s.d(t,{Z:function(){return ensureGoogleMaps}});let n=null,a=null;function ensureGoogleMaps(e){var t;return"undefined"!=typeof google&&(null===(t=google.maps)||void 0===t?void 0:t.Map)?Promise.resolve():(n&&a!==e&&(n=null),n)?n:(a=e,n=new Promise((t,s)=>{let a=document.querySelector('script[src*="maps.googleapis.com/ma

1ps/api/js"]');if(a){var r;if("undefined"!=typeof google&&(null===(r=google.maps)||void 0===r?void 0:r.Map)){t();return}let e=!1,tryFinish=()=>{var s;!e&&"undefined"!=typeof google&&(null===(s=google.maps)||void 0===s?void 0:s.Map)&&(e=!0,a.removeEventListener("load",tryFinish),t())};a.addEventListener("load",tryFinish),setTimeout(tryFinish,0);return}let o="__chimneyEnsureGmapsCallback",l=window;l[o]=()=>{var e,a;(delete l[o],"undefined"!=typeof google&&(null===(e=google.maps)||void 0===e?void 0:e.Map))?t():(a=Error("Google Maps callback fired but API not available"),n=null,s(a))};let i=document.createElement("script");i.src="https://maps.googleapis.com/maps/api/js?key=".concat(encodeURIComponent(e),"&loading=async&libraries=places,marker,visualization&callback=").concat(o),i.async=!0,i.defer=!0,i.onerror=()=>{var e;n=null,delete l[o],e=Error("Failed to load Google Maps script"),n=null,s(e)},document.head.appendChild(i)}))}}}]);