\n ${radar}\n
`,\n iconSize:[32,44], iconAnchor:[16,44], popupAnchor:[0,-42]\n });\n }\n function infraIcon(b){\n const meta = infraTypes[b.type] || infraTypes.bridge;\n const sz = infraSizes[b.size] || infraSizes.medium;\n const color = b.color || meta.color;\n const inner = b.icon_image ? `${head}
\n \n \n ${inner}
`,\n iconSize:[sz.px, sz.px], iconAnchor:[sz.px/2, sz.px], popupAnchor:[0, -sz.px+2]\n });\n }\n\n const pinMarkerMap = new Map();\n // On touch devices there's no real \"hover\" — a tap can synthesize\n // mouseout/mouseleave as the finger lifts, which was closing the popup\n // out from under anyone trying to tap Enquire/WhatsApp/Share inside it.\n // On these devices the popup only closes via its own × button or by\n // tapping elsewhere on the map — never on a hover-out timer.\n const isTouchDevice = window.matchMedia('(hover: none)').matches;\n // Business WhatsApp number for the card's WhatsApp button — country code +\n // number, digits only, no + or spaces (e.g. '919876543210'). Replace this\n // before going live; until then the button links to a placeholder number.\n // Desktop only: shifts an open card so it stays fully visible (clear of\n // the top bar and screen edges) WITHOUT moving the map.\n function fitCardInView(popup){\n const el = popup && popup._container;\n if(!el) return;\n // _updatePosition only moves the card — it doesn't re-render content,\n // so buttons, listeners and the video player stay intact.\n popup.options.offset = [0, -2];\n popup._updatePosition();\n const mapRect = map.getContainer().getBoundingClientRect();\n const topbar = document.getElementById('topbar');\n const topLimit = Math.max(mapRect.top + 10, topbar ? topbar.getBoundingClientRect().bottom + 10 : 0);\n const bottomLimit = mapRect.bottom - 10, leftLimit = mapRect.left + 10, rightLimit = mapRect.right - 10;\n const r = el.getBoundingClientRect();\n let dx = 0, dy = 0;\n if(r.right > rightLimit) dx = rightLimit - r.right;\n if(r.left + dx < leftLimit) dx = leftLimit - r.left;\n if(r.bottom > bottomLimit) dy = bottomLimit - r.bottom;\n if(r.top + dy < topLimit) dy = topLimit - r.top;\n if(dx || dy){\n popup.options.offset = [dx, -2 + dy];\n popup._updatePosition();\n }\n }\n const WHATSAPP_NUMBER = '918228828200';\n // Call number for the sticky Call button — same format as above, no + or\n // spaces. Defaults to the WhatsApp number; change independently if your\n // sales line is different.\n const CALL_NUMBER = '918228828200';\n document.getElementById('sticky-whatsapp').href =\n `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(\"Hi, I'm interested in a project on Mappingg.com. Could you share more details?\")}`;\n document.getElementById('sticky-call').href = `tel:+${CALL_NUMBER}`;\n document.getElementById('sticky-whatsapp').addEventListener('click', ()=> trackEvent('lead', 'sticky_whatsapp_click', 'sticky-button'));\n document.getElementById('sticky-call').addEventListener('click', ()=> trackEvent('lead', 'sticky_call_click', 'sticky-button'));\n function whatsappUrl(pin){\n const msg = encodeURIComponent(`Hi, I'm interested in ${pin.title || 'this project'} on the Mappingg.com. Could you share more details?`);\n return `https://wa.me/${WHATSAPP_NUMBER}?text=${msg}`;\n }\n // Display-only field visibility — purely what the admin set for this\n // project in the editor's \"Public Card Visibility\" panel. No toggle\n // controls appear here; visitors just see the card as configured.\n // ---------- Compare cart (buyer accounts) ----------\n // Signed-in buyers can add up to COMPARE_MAX projects from their cards and\n // compare them side by side. The cart is saved on their account\n // (/api/my/compare) so it follows them to other devices. Only the fields\n // the public card already shows are compared (and only where the admin\n // left them visible) — description etc. stay behind the enquiry form.\n // Other roles never see any of this.\n var compareEnabled = false;\n var compareIds = [];\n var COMPARE_MAX = 4;\n const COMPARE_ICON = '';\n\n const compareBar = document.createElement('button');\n compareBar.type = 'button';\n compareBar.id = 'compare-bar';\n compareBar.hidden = true;\n document.body.appendChild(compareBar);\n compareBar.addEventListener('click', ()=> openCompare());\n\n const compareModal = document.createElement('div');\n compareModal.id = 'compare-modal';\n compareModal.setAttribute('role', 'dialog');\n compareModal.setAttribute('aria-modal', 'true');\n compareModal.setAttribute('aria-label', 'Compare projects');\n compareModal.hidden = true;\n document.body.appendChild(compareModal);\n\n let compareToastTimer = null;\n function compareToast(text){\n const el = document.getElementById('area-toast');\n if(!el) return;\n el.textContent = text;\n el.classList.add('show');\n clearTimeout(compareToastTimer);\n compareToastTimer = setTimeout(()=> el.classList.remove('show'), 2600);\n }\n\n function comparePins(){ return compareIds.map(id => pins.find(p => p.id === id)).filter(Boolean); }\n\n function compareBtnHtml(id){\n const on = compareIds.includes(id);\n const label = on ? 'Remove from compare' : 'Add to compare';\n return ``;\n }\n\n function refreshCompareUI(){\n document.querySelectorAll('button[data-compare-pin]').forEach(btn=>{\n const on = compareIds.includes(btn.dataset.comparePin);\n const label = on ? 'Remove from compare' : 'Add to compare';\n btn.classList.toggle('on', on);\n btn.setAttribute('aria-pressed', String(on));\n btn.setAttribute('aria-label', label);\n btn.title = label;\n const l = btn.querySelector('.tc-compare-label');\n if(l) l.textContent = on ? 'Added' : 'Compare';\n });\n const n = comparePins().length;\n compareBar.hidden = !compareEnabled || n === 0;\n compareBar.innerHTML = `${COMPARE_ICON}Compare${n}/${COMPARE_MAX}`;\n compareBar.setAttribute('aria-label', `Compare ${n} selected project${n === 1 ? '' : 's'}`);\n if(!compareModal.hidden) renderCompare();\n }\n\n // One save in flight at a time: quick add/remove taps would otherwise race,\n // and an older reply (or an older write on the server) could undo a newer\n // change. Changes made mid-save are sent as soon as it finishes.\n let compareSaving = null;\n let compareDirty = false;\n function saveCompare(){\n if(compareSaving){ compareDirty = true; return compareSaving; }\n compareSaving = fetch('/api/my/compare', {\n method:'PUT', credentials:'same-origin',\n headers:{ 'Content-Type':'application/json' },\n body: JSON.stringify({ pins: compareIds })\n })\n .then(r => r.ok ? r.json() : Promise.reject(r))\n .then(d => { if(!compareDirty && d && Array.isArray(d.pins)){ compareIds = d.pins; refreshCompareUI(); } })\n .catch(()=> compareToast('Could not save your compare list — please try again'))\n .finally(()=>{\n compareSaving = null;\n if(compareDirty){ compareDirty = false; saveCompare(); }\n });\n return compareSaving;\n }\n\n function toggleCompare(id){\n if(compareIds.includes(id)){\n compareIds = compareIds.filter(x => x !== id);\n compareToast('Removed from compare');\n } else {\n if(compareIds.length >= COMPARE_MAX){\n compareToast(`You can compare up to ${COMPARE_MAX} projects — remove one first`);\n openCompare();\n return;\n }\n compareIds = compareIds.concat(id);\n const p = pins.find(x => x.id === id);\n trackEvent('compare', 'add', p ? (p.title || ('#' + p.number)) : id);\n const n = compareIds.length;\n compareToast(n >= 2 ? `Added — ${n} projects ready to compare` : 'Added to compare — add another project to compare');\n }\n refreshCompareUI();\n saveCompare();\n }\n\n // One row per compared attribute. A value only shows when the project has it\n // and the admin hasn't hidden that field on its public card.\n const COMPARE_ROWS = [\n { label:'Developer', field:'developer', val: p => p.developer },\n { label:'Location', field:'location', val: p => p.location },\n { label:'Status', field:'status', html: p => `${statusLabel[p.status] || 'Available'}` },\n { label:'Property Type', field:'type', val: p => p.type },\n { label:'MahaRERA No.', field:'rera', val: p => p.rera_number },\n { label:'Configuration', field:'configuration', val: p => p.configuration },\n { label:'Carpet Area', field:'configuration', val: p => p.sqft },\n { label:'Starting Price', field:'price', val: p => p.price },\n { label:'Possession / Launch', field:'possession', val: p => p.status === 'upcoming' ? (p.launch_date ? 'Launching: ' + p.launch_date : '') : p.possession_timeline },\n { label:'Key USP', field:'key_usp', val: p => p.key_usp },\n { label:'Project Video', html: p => { const v = extractYouTubeId(p.youtube_video_url); return v ? `▶ Watch video` : ''; } },\n ];\n\n function renderCompare(){\n const list = comparePins();\n const head = `Compare projects
${head}
`;\n return;\n }\n const dash = '—';\n const cell = (p, row)=>{\n if(row.field && !isFieldOn(p, row.field)) return dash;\n if(row.html){ const h = row.html(p); return h || dash; }\n const v = row.val(p);\n return v ? escapeHtml(String(v)) : dash;\n };\n let rows = COMPARE_ROWS\n .filter(row => list.some(p => cell(p, row) !== dash))\n .map(row => `Your compare list is empty.
Open a project card and tap Compare to add it.
Open a project card and tap Compare to add it.
\n \n ${isFieldOn(p, 'enquire') ? `` : ''}\n
\n ${p.image ? `![\"\"](\"${p.image}\")
` : ''}\n ${escapeHtml(p.title || 'Untitled project')}\n \n
Add at least one more project to compare side by side.
' : '';\n compareModal.innerHTML = `${head}${note}\n \n
\n
`;\n }\n\n function openCompare(){\n if(!compareEnabled) return;\n renderCompare();\n compareModal.hidden = false;\n document.body.classList.add('compare-open');\n const closeBtn = compareModal.querySelector('[data-cmp-close]');\n if(closeBtn) closeBtn.focus();\n }\n function closeCompare(){\n compareModal.hidden = true;\n document.body.classList.remove('compare-open');\n }\n\n compareModal.addEventListener('click', (ev)=>{\n const t = ev.target;\n if(t === compareModal || t.closest('[data-cmp-close]')){ closeCompare(); return; }\n const rm = t.closest('[data-cmp-remove]');\n if(rm){ toggleCompare(rm.dataset.cmpRemove); return; }\n if(t.closest('[data-cmp-clear]')){ compareIds = []; refreshCompareUI(); saveCompare(); return; }\n const view = t.closest('[data-cmp-view]');\n if(view){\n const p = pins.find(x => x.id === view.dataset.cmpView);\n closeCompare();\n if(!p) return;\n map.flyTo([p.lat, p.lng], 16, { duration:1 });\n setTimeout(()=>{ const m = pinMarkerMap.get(p.id); if(m){ m.openPopup(); pulseMarker(m); } }, 1100);\n return;\n }\n const enq = t.closest('[data-cmp-enquire]');\n if(enq){\n const p = pins.find(x => x.id === enq.dataset.cmpEnquire);\n closeCompare();\n if(p){ trackEvent('lead', 'enquire_click', p.title || ('#' + p.number)); requestDetails(p); }\n }\n });\n document.addEventListener('keydown', (ev)=>{ if(ev.key === 'Escape' && !compareModal.hidden) closeCompare(); });\n\n // Turn the cart on only for signed-in buyers, then load their saved list.\n fetch('/api/auth/session', { credentials:'same-origin' })\n .then(r => r.json())\n .then(body=>{\n const u = body && body.session && body.session.user;\n if(!u || u.role !== 'buyer') return;\n compareEnabled = true;\n return fetch('/api/my/compare', { credentials:'same-origin' })\n .then(r => r.ok ? r.json() : null)\n .then(d=>{\n if(d && Array.isArray(d.pins)) compareIds = d.pins;\n if(d && d.max) COMPARE_MAX = d.max;\n refreshCompareUI();\n });\n })\n .catch(()=>{ /* no cart if the session can't be read */ });\n\n function isFieldOn(pin, fieldId){\n const v = pin.field_visibility ? pin.field_visibility[fieldId] : undefined;\n return v !== false; // visible unless the admin explicitly turned it off\n }\n\n function renderPin(pin){\n if(pinMarkerMap.has(pin.id)) map.removeLayer(pinMarkerMap.get(pin.id));\n const marker = L.marker([pin.lat, pin.lng], {icon: pinIcon(pin)}).addTo(map);\n const color = statusColor[pin.status] || statusColor.available;\n // Card layout: the project's logo/marker image sits in its own banner\n // at the top of the popup. Further down, a \"Project Brochure\" section\n // shows the uploaded brochure image — swapping to the project's\n // YouTube video (muted autoplay) a few seconds after the popup opens,\n // if one is set. See the popupopen / popupclose handlers below.\n let pinVideoRevert = null;\n const buildCardHtml = () => {\n const logoHtml = pin.image ? `| ${list.length} of ${COMPARE_MAX} | ${projHead}
|---|
Tap Compare on any project card to add it.
\n PROJECT VIDEO
\n ${brochureImgHtml}${brochureVideoHtml}
`\n : '';\n const compareBtn = compareEnabled ? compareBtnHtml(pin.id) : '';\n const shareBtn = ``;\n\n // The full \"Project Card\" field set. Project Name is the card header and\n // always shows; everything else only appears if the project has data\n // for it AND the admin hasn't hidden it in the editor.\n const configValue = [pin.configuration, pin.sqft].filter(Boolean).join(' · ');\n const possessionValue = pin.status === 'upcoming'\n ? (pin.launch_date ? 'Launching: ' + pin.launch_date : '')\n : (pin.possession_timeline ? 'Possession: ' + pin.possession_timeline : '');\n const fields = [\n pin.developer ? { id:'developer', label:'Developer', html:`` } : null,\n pin.location ? { id:'location', label:'Location', html:`` } : null,\n { id:'status', label:'Status', html:`${statusLabel[pin.status] || 'Available'}` },\n pin.type ? { id:'type', label:'Property Type', html:`${escapeHtml(pin.type)}` } : null,\n pin.rera_number ? { id:'rera', label:'MahaRERA No.', html:`` } : null,\n configValue ? { id:'configuration', label:'Configuration', html:`` } : null,\n pin.price ? { id:'price', label:'Starting Price', html:`` } : null,\n possessionValue ? { id:'possession', label: pin.status === 'upcoming' ? 'Launch' : 'Possession', html:`` } : null,\n pin.key_usp ? { id:'key_usp', label:'Key USP', html:`` } : null\n ].filter(f => f && isFieldOn(pin, f.id));\n\n // Admin-added custom fields — each carries its own visible flag directly\n // (set per-field in the editor), so they don't go through isFieldOn.\n const customFields = Array.isArray(pin.custom_fields)\n ? pin.custom_fields.filter(cf => cf && cf.visible !== false && (cf.label || cf.value))\n : [];\n customFields.forEach(cf=>{\n fields.push({ id:'custom-' + cf.id, label: cf.label, html:`` });\n });\n\n // Card header is split 50/50: logo on the left, project name +\n // developer, location, status and type on the right. Everything else\n // (configuration, price, possession, USP, custom fields) runs full\n // width underneath.\n const headIds = ['developer','location','status','type'];\n const headFieldsHtml = fields.filter(f=> headIds.includes(f.id)).map(f=> `${f.html}
`).join('');\n const fieldsHtml = fields.filter(f=> !headIds.includes(f.id)).map(f=> `${f.html}
`).join('');\n\n // Enquire and WhatsApp are actions, not data — shown purely based on the\n // admin's Public Card Visibility setting for this project.\n const enquireBtn = isFieldOn(pin, 'enquire') ? `` : '';\n const whatsappBtn = isFieldOn(pin, 'whatsapp') ? `WhatsApp` : '';\n\n const titleHtml = isFieldOn(pin, 'name') ? `${escapeHtml(pin.title || 'Untitled project')}
` : '';\n return ``;\n };\n marker.bindPopup(buildCardHtml, {\n closeButton:false, className:'teaser-popup', offset:[0,-2], autoClose:false, closeOnClick:false,\n // Keeps the card clear of the fixed search bar at the top of the\n // screen and off the very edges on mobile, instead of opening flush\n // against it (which is what made it look like one long merged card).\n // Desktop: the map never pans when a card opens — the card is nudged\n // to stay on screen instead (see fitCardInView). Touch keeps autoPan.\n autoPan: isTouchDevice,\n autoPanPaddingTopLeft:[12, 90], autoPanPaddingBottomRight:[12, 20]\n });\n // Cards open on click/tap and stay until × or a map click. Hovering never opens a card.\n // Leaflet's built-in click toggle is switched off: it would close an open\n // card and re-render it, which wipes out the video player.\n marker.off('click', marker._openPopup, marker);\n const opensOnHover = false; // project cards open on click only, never on hover\n // Desktop hint: hovering a project pin shows how to open its card. Hidden\n // while the card is open, and never shown on touch screens (no hover there).\n if(!isTouchDevice){\n const hintScale = pinScale[pin.size] || 1;\n marker.bindTooltip('👆 Click on the pin', {\n direction:'top', offset:[0, -Math.round(44 * hintScale) - 4], className:'pin-hint', opacity:1,\n });\n marker.on('popupopen', ()=>{ marker.closeTooltip(); const t = marker.getTooltip(); if(t) t.setOpacity(0); });\n marker.on('popupclose', ()=>{ const t = marker.getTooltip(); if(t) t.setOpacity(1); });\n }\n let openedByHover = false;\n let closeTimer = null;\n function cancelClose(){ if(closeTimer){ clearTimeout(closeTimer); closeTimer = null; } }\n function scheduleClose(){ if(!openedByHover) return; cancelClose(); closeTimer = setTimeout(()=> marker.closePopup(), 400); }\n marker.on('mouseover', ()=>{\n if(!opensOnHover) return;\n cancelClose();\n if(!marker.isPopupOpen()){ openedByHover = true; marker.openPopup(); }\n });\n marker.on('mouseout', scheduleClose);\n marker.on('click', (ev)=>{\n L.DomEvent.stopPropagation(ev);\n cancelClose();\n openedByHover = false;\n if(!marker.isPopupOpen()) marker.openPopup();\n });\n marker.on('popupclose', ()=>{ openedByHover = false; cancelClose(); });\n marker.on('popupopen', (e)=>{\n if(!isTouchDevice){\n fitCardInView(e.popup);\n const logoImg = e.popup._contentNode.querySelector('.tc-logo-wrap img');\n if(logoImg && !logoImg.complete) logoImg.addEventListener('load', ()=> fitCardInView(e.popup), {once:true});\n }\n // Our own close (×) button, fixed to the popup frame so it never\n // scrolls away with a long card, and large enough to tap on mobile.\n // (Leaflet's built-in one was unreliable to tap on phones.)\n const frame = e.popup._container;\n if(frame && !frame.querySelector('.tc-close')){\n const closeBtn = L.DomUtil.create('button', 'tc-close', frame);\n closeBtn.type = 'button';\n closeBtn.setAttribute('aria-label', 'Close');\n closeBtn.innerHTML = '×';\n L.DomEvent.disableClickPropagation(closeBtn);\n L.DomEvent.on(closeBtn, 'click', (ev)=>{ L.DomEvent.stop(ev); marker.closePopup(); });\n }\n const btn = e.popup._contentNode.querySelector('button[data-pin]');\n if(btn) btn.addEventListener('click', ()=>{ trackEvent('lead', 'enquire_click', pin.title || ('#' + pin.number)); requestDetails(pin); });\n const waBtnEl = e.popup._contentNode.querySelector('a.tc-whatsapp');\n if(waBtnEl) waBtnEl.addEventListener('click', ()=> trackEvent('lead', 'whatsapp_click', pin.title || ('#' + pin.number)));\n const shareBtnEl = e.popup._contentNode.querySelector('button[data-share-pin]');\n if(shareBtnEl) shareBtnEl.addEventListener('click', (evt)=>{ evt.stopPropagation(); sharePin(pin); });\n const compareBtnEl = e.popup._contentNode.querySelector('button[data-compare-pin]');\n if(compareBtnEl) compareBtnEl.addEventListener('click', (evt)=>{ evt.stopPropagation(); toggleCompare(pin.id); });\n const popupEl = e.popup._container;\n if(popupEl){\n // Hover-opened card: moving onto it keeps it open, clicking in it pins it.\n popupEl.addEventListener('mouseenter', cancelClose);\n popupEl.addEventListener('mouseleave', scheduleClose);\n popupEl.addEventListener('click', ()=>{ openedByHover = false; cancelClose(); });\n // Clicks inside the YouTube player never reach this page; the window\n // losing focus to that iframe is the only sign of them.\n if(openedByHover){\n const pinOnVideoClick = ()=> setTimeout(()=>{\n const a = document.activeElement;\n if(a && a.tagName === 'IFRAME' && popupEl.contains(a)){ openedByHover = false; cancelClose(); }\n }, 0);\n window.addEventListener('blur', pinOnVideoClick);\n marker.once('popupclose', ()=> window.removeEventListener('blur', pinOnVideoClick));\n }\n // Stop map clicks inside the popup from closing it or firing other pins\n L.DomEvent.on(popupEl, 'click', L.DomEvent.stopPropagation);\n }\n // If a video is set, play it immediately using the official YouTube\n // IFrame Player API (not a plain iframe) — this is what reliably\n // fires onError when a video owner has disabled embedding, which a\n // raw