spb/ora-ka

1import{r as f,u as b,j as r,i as C,A as h,s as j,l as w}from"./index-DKrZ0X1u.js";import{m as l,s as $,a as L,b as N}from"./pills-Dduvidoh.js";const S=[-72.5,46.4];function _(t){return`${h}/api/listings.geojson?${w(t)}`}function P(t){for(const a of t.features){const o=a.properties;o.p_short=N(o.price),o.deal=o.price!=null&&o.vp!=null&&o.price<=o.vp*.95?1:0}return t}function R(t){const a=t.price!=null?`${Number(t.price).toLocaleString("fr-CA",{maximumFractionDigits:0})} $`:t.price_label||"Prix sur demande",o=t.image?`<img src="${t.image}" alt="" loading="lazy"/>`:`<div class="mv-noimg">${C("home",30)}</div>`,c=[t.property_type,t.bedrooms!=null?`${t.bedrooms} ch.`:"",t.bathrooms!=null?`${t.bathrooms} sdb`:""].filter(Boolean).join(" · "),m=t.deal?`<span class="mv-pop-deal">Sous l'estimation Vrai-Prix</span>`:"";return`2    <div class="mv-pop">3      ${o}4      <div class="mv-pop-body">5        <div class="mv-pop-price">${a} ${m}</div>6        <div class="mv-pop-title">${t.address??t.title??""}</div>7        <div class="mv-pop-meta">${c}</div>8        <div class="mv-pop-src">${j(String(t.source??""))}</div>9        <a class="mv-pop-cta" href="${h}/propriete/${encodeURIComponent(String(t.uid))}">Voir la fiche →</a>10      </div>11    </div>`}function x(t,a){const o=a??"\0";t.setLayoutProperty("point-pill","icon-image",["case",["==",["get","uid"],o],"pill-active",["==",["get","deal"],1],"pill-deal","pill"]),t.setPaintProperty("point-pill","text-color",["case",["==",["get","uid"],o],"#ffffff",["==",["get","deal"],1],"#ffffff","#1a1214"])}function B({filters:t}){const a=f.useRef(null),o=f.useRef(null),c=f.useRef(!1),m=b();return f.useEffect(()=>{if(!a.current||o.current)return;const e=new l.Map({container:a.current,style:$,center:S,zoom:6,attributionControl:!1});return o.current=e,e.addControl(new l.NavigationControl({showCompass:!1}),"top-right"),e.addControl(new l.GeolocateControl({trackUserLocation:!1}),"top-right"),e.addControl(new l.ScaleControl({unit:"metric"}),"bottom-left"),e.touchZoomRotate.disableRotation(),e.on("load",()=>{try{L(e)}catch{}e.addSource("props",{type:"geojson",data:{type:"FeatureCollection",features:[]},cluster:!0,clusterMaxZoom:15,clusterRadius:48}),e.addLayer({id:"clusters",type:"circle",source:"props",filter:["has","point_count"],paint:{"circle-color":"#b3202b","circle-radius":["step",["get","point_count"],15,10,19,50,24,200,30],"circle-stroke-width":4,"circle-stroke-color":"rgba(226,55,68,0.28)"}}),e.addLayer({id:"cluster-count",type:"symbol",source:"props",filter:["has","point_count"],layout:{"text-field":["get","point_count_abbreviated"],"text-font":["Noto Sans Bold"],"text-size":13},paint:{"text-color":"#ffffff"}}),e.addLayer({id:"point-dot",type:"circle",source:"props",filter:["!",["has","point_count"]],paint:{"circle-color":["case",["==",["get","deal"],1],"#e23744","#b3202b"],"circle-radius":3.5,"circle-stroke-width":1.2,"circle-stroke-color":"#f7f1ef"}}),e.addLayer({id:"point-pill",type:"symbol",source:"props",filter:["!",["has","point_count"]],layout:{"icon-image":["case",["==",["get","deal"],1],"pill-deal","pill"],"icon-text-fit":"both","icon-text-fit-padding":[4,9,8,9],"icon-anchor":"bottom","icon-offset":[0,-2],"icon-allow-overlap":!1,"text-field":["get","p_short"],"text-font":["Noto Sans Bold"],"text-size":12.5,"text-anchor":"bottom","text-offset":[0,-.85],"text-allow-overlap":!1,"text-optional":!1},paint:{"text-color":["case",["==",["get","deal"],1],"#ffffff","#1a1214"]}}),e.on("click","clusters",async i=>{const s=e.queryRenderedFeatures(i.point,{layers:["clusters"]})[0],n=await e.getSource("props").getClusterExpansionZoom(s.properties.cluster_id);e.easeTo({center:s.geometry.coordinates,zoom:n})});const p=i=>{var g,v;const s=(g=i.features)==null?void 0:g[0];if(!s)return;const d=String(s.properties.uid);x(e,d);const n=s.geometry.coordinates.slice(),u=new l.Popup({offset:30,maxWidth:"290px",closeButton:!0}).setLngLat(n).setHTML(R(s.properties)).addTo(e);u.on("close",()=>{o.current&&x(e,null)}),(v=u.getElement().querySelector(".mv-pop-cta"))==null||v.addEventListener("click",y=>{y.preventDefault(),m(`/propriete/${encodeURIComponent(d)}`)})};e.on("click","point-pill",p),e.on("click","point-dot",p);for(const i of["clusters","point-pill","point-dot"])e.on("mouseenter",i,()=>{e.getCanvas().style.cursor="pointer"}),e.on("mouseleave",i,()=>{e.getCanvas().style.cursor=""});c.current=!0}),()=>{e.remove(),o.current=null,c.current=!1}},[m]),f.useEffect(()=>{const e=o.current;if(!e)return;let p=!1;const i=async()=>{var s;try{const d=await fetch(_(t)),n=P(await d.json());if(p||!o.current)return;if((s=e.getSource("props"))==null||s.setData(n),n.features.length>0){const u=new l.LngLatBounds;for(const g of n.features)u.extend(g.geometry.coordinates);e.fitBounds(u,{padding:56,maxZoom:14,duration:500})}}catch{}};return c.current?i():e.once("load",()=>i()),()=>{p=!0}},[t]),r.jsxs("div",{className:"mapwrap",children:[r.jsx("div",{ref:a,className:"mapview",role:"application","aria-label":"Carte des propriétés"}),r.jsxs("div",{className:"mv-brand","aria-hidden":"true",children:[r.jsx("span",{className:"mv-brand-dot"})," Cartographie ",r.jsx("b",{children:"Groupe Ka"})]}),r.jsxs("div",{className:"mv-legend","aria-hidden":"true",children:[r.jsxs("span",{children:[r.jsx("i",{className:"mv-lg-pill"})," Prix demandé"]}),r.jsxs("span",{children:[r.jsx("i",{className:"mv-lg-pill mv-lg-deal"})," Sous l'estimation Vrai-Prix"]})]}),r.jsxs("div",{className:"mv-credit","aria-hidden":"true",children:["Cartographie ",r.jsx("b",{children:"Groupe Ka"})]})]})}export{B as default};12