Interactive Plot Map<\/title>\n <style>\n body {\n margin: 0;\n font-family: Arial, sans-serif;\n background-color: #f9f9f9;\n }\n\n .plot-map-container {\n position: relative;\n max-width: 1200px;\n margin: auto;\n overflow: hidden;\n }\n\n img#sitePlanImage {\n width: 100%;\n height: auto;\n display: block;\n max-width: 100%;\n }\n\n \/* Tooltip Style *\/\n .tooltip {\n position: fixed;\n background-color: #e0e0e0;\n color: #333;\n padding: 6px 10px;\n border-radius: 6px;\n font-size: 13px;\n pointer-events: none;\n z-index: 9999;\n opacity: 0;\n transition: opacity 0.2s ease-in-out;\n white-space: nowrap;\n box-shadow: 0 2px 5px rgba(0,0,0,0.2);\n }\n\n \/* Modal Styles *\/\n .modal {\n display: none;\n position: fixed;\n z-index: 9999;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: rgba(0, 0, 0, 0.6);\n }\n\n .modal-content {\n color: #333;\n margin: 15% auto;\n padding: 20px 30px;\n border-radius: 12px;\n width: 90%;\n max-width: 400px;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);\n animation: fadeIn 0.3s ease-in-out;\n }\n\n \/* Available plot styles *\/\n .modal-content.available {\n background: #f0fff0; \/* Light green background *\/\n border: 2px solid #4CAF50; \/* Green border *\/\n }\n\n \/* Not available plot styles *\/\n .modal-content.not-available {\n background: #fff0f0; \/* Light red background *\/\n border: 2px solid #f44336; \/* Red border *\/\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: scale(0.9); }\n to { opacity: 1; transform: scale(1); }\n }\n\n @keyframes fadeOut {\n from { opacity: 1; transform: scale(1); }\n to { opacity: 0; transform: scale(0.9); }\n }\n\n .modal.fade-out {\n animation: fadeOut 0.3s ease-in-out;\n }\n\n h2 {\n margin-top: 0;\n text-align: center;\n font-size: 22px;\n color: #333;\n }\n\n .plot-badge {\n display: inline-block;\n font-weight: bold;\n font-size: 20px;\n padding: 8px 16px;\n border-radius: 50px;\n margin-bottom: 10px;\n border: 2px solid;\n }\n\n \/* Available plot badge *\/\n .plot-badge.available {\n background-color: #e0ffe0;\n color: #2e7d32; \/* Dark green *\/\n border-color: #4CAF50;\n }\n\n \/* Not available plot badge *\/\n .plot-badge.not-available {\n background-color: #ffe0e0;\n color: #d60000; \/* Red *\/\n border-color: #ffb3b3;\n }\n\n .availability-icon {\n font-size: 18px;\n vertical-align: middle;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n margin-top: 10px;\n background-color: rgba(255, 255, 255, 0.9);\n border-radius: 8px;\n overflow: hidden;\n color: #333;\n }\n\n th,\n td {\n padding: 6px 10px;\n border-bottom: 1px solid #ddd;\n font-size: 13px;\n }\n\n th {\n background-color: #f0f0f0;\n text-align: left;\n }\n\n .close-btn {\n display: block;\n text-align: center;\n margin: 15px auto 0;\n padding: 10px 16px;\n border-radius: 8px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n font-weight: bold;\n }\n\n \/* Available plot close button *\/\n .close-btn.available {\n background-color: #d0ffd0;\n border: 1px solid #4CAF50;\n color: #2e7d32;\n }\n\n \/* Not available plot close button *\/\n .close-btn.not-available {\n background-color: #ffd6d6;\n border: 1px solid #ff9999;\n color: #d60000;\n }\n\n .close-btn:hover {\n opacity: 0.8;\n }\n\n .download-pdf-btn {\n display: block;\n text-align: center;\n margin: 10px auto;\n background-color: #d6faff;\n border: 1px solid #99dfff;\n color: #007baa;\n padding: 10px 16px;\n border-radius: 8px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n }\n\n .download-pdf-btn:hover {\n background-color: #bfefff;\n }\n <\/style>\n<\/head>\n<body>\n\n \n <div class=\"tooltip\" id=\"plotTooltip\"><\/div>\n\n <div class=\"plot-map-container\">\n <img decoding=\"async\" id=\"sitePlanImage\"\n src=\"https:\/\/sriramhomes.com\/wp-content\/uploads\/2025\/07\/siteplan.jpg\"\n usemap=\"#plotMap\"\n alt=\"Site Plan Image\"\n \/>\n <map name=\"plotMap\" id=\"plotMap\"><\/map>\n <\/div>\n\n \n <div id=\"details-modal\" class=\"modal\">\n <div class=\"modal-content\" id=\"modal-content\">\n <h2 id=\"plot-title\">Plot No: <span class=\"plot-badge\" id=\"plot-badge\">1<\/span><\/h2>\n <div id=\"plot-details\"><\/div>\n <button class=\"close-btn\" id=\"close-btn\" onclick=\"closeModal()\">Close<\/button>\n <\/div>\n <\/div>\n\n <button class=\"download-pdf-btn\" onclick=\"exportToPDF()\">Export to PDF<\/button>\n\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf-autotable\/3.5.23\/jspdf.plugin.autotable.min.js\"><\/script>\n\n <script>\n \/\/ Initialize jsPDF\n const { jsPDF } = window.jspdf;\n \n const plotData = {};\n const groupedPlots = {};\n let originalImageWidth = 0;\n let originalImageHeight = 0;\n\n function csvToArray(csv) {\n const lines = csv.trim().split('\\n');\n const headers = lines[0].split(',').map(h => h.trim());\n return lines.slice(1).map(line => {\n const values = line.split(\/,(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)\/);\n const obj = {};\n headers.forEach((header, i) => {\n obj[header.trim()] = values[i]?.trim().replace(\/^\"(.*)\"$\/, '$1') || '';\n });\n return obj;\n });\n }\n\n function scaleImageMap() {\n const img = document.getElementById('sitePlanImage');\n const map = document.getElementById('plotMap');\n const areas = map.getElementsByTagName('area');\n \n const displayedWidth = img.clientWidth;\n const displayedHeight = img.clientHeight;\n \n const widthScale = displayedWidth \/ originalImageWidth;\n const heightScale = displayedHeight \/ originalImageHeight;\n \n Array.from(areas).forEach(area => {\n const coords = area.getAttribute('original-coords') || area.getAttribute('coords');\n area.setAttribute('original-coords', coords);\n \n const coordArray = coords.split(',').map(coord => parseFloat(coord));\n let scaledCoords = [];\n \n if (area.getAttribute('shape') === 'rect') {\n scaledCoords = [\n Math.round(coordArray[0] * widthScale),\n Math.round(coordArray[1] * heightScale),\n Math.round(coordArray[2] * widthScale),\n Math.round(coordArray[3] * heightScale)\n ];\n } else if (area.getAttribute('shape') === 'circle') {\n scaledCoords = [\n Math.round(coordArray[0] * widthScale),\n Math.round(coordArray[1] * heightScale),\n Math.round(coordArray[2] * Math.min(widthScale, heightScale))\n ];\n } else if (area.getAttribute('shape') === 'poly') {\n scaledCoords = coordArray.map((coord, index) => {\n return index % 2 === 0 \n ? Math.round(coord * widthScale) \n : Math.round(coord * heightScale);\n });\n }\n \n area.setAttribute('coords', scaledCoords.join(','));\n });\n }\n\n function loadImageAndInitialize() {\n const img = new Image();\n img.onload = function() {\n originalImageWidth = this.naturalWidth;\n originalImageHeight = this.naturalHeight;\n initializeMap();\n };\n img.src = document.getElementById('sitePlanImage').src;\n }\n\n function initializeMap() {\n fetch('https:\/\/sriramhomes.com\/wp-content\/uploads\/2025\/05\/imagemap.csv')\n .then(res => res.text())\n .then(rawHTML => {\n const parser = new DOMParser();\n const doc = parser.parseFromString('<body>' + rawHTML + '<\/body>', 'text\/html');\n const areas = doc.querySelectorAll(\"area\");\n\n const map = document.getElementById(\"plotMap\");\n map.innerHTML = '';\n \n areas.forEach(area => {\n const plotNo = area.alt.trim();\n const newArea = document.createElement('area');\n \n Array.from(area.attributes).forEach(attr => {\n newArea.setAttribute(attr.name, attr.value);\n });\n \n newArea.href = \"javascript:void(0)\";\n newArea.addEventListener(\"click\", () => showDetails(plotNo));\n newArea.addEventListener(\"touchstart\", (e) => {\n e.preventDefault();\n showDetails(plotNo);\n }, { passive: false });\n newArea.addEventListener(\"mousemove\", e => showTooltip(e, plotNo));\n newArea.addEventListener(\"touchmove\", e => showTooltip(e, plotNo), { passive: true });\n newArea.addEventListener(\"mouseout\", hideTooltip);\n newArea.addEventListener(\"touchend\", hideTooltip);\n \n map.appendChild(newArea);\n });\n \n scaleImageMap();\n })\n .catch(err => console.error(\"Error loading imagemap.csv:\", err));\n\n fetch('https:\/\/sriramhomes.com\/wp-content\/uploads\/2025\/07\/plot.csv')\n .then(res => res.text())\n .then(csvText => {\n const rows = csvToArray(csvText);\n\n rows.forEach(row => {\n let plotNo = row['Plot No'];\n if (!plotNo) return;\n\n plotNo = plotNo.toString().trim();\n\n if (plotNo.length > 0) {\n plotData[plotNo] = row;\n\n const facing = row['Placing of site']?.trim() || 'Unknown';\n if (!groupedPlots[facing]) groupedPlots[facing] = [];\n groupedPlots[facing].push(row);\n }\n });\n })\n .catch(err => console.error(\"Error loading plot.csv:\", err));\n }\n\n function showDetails(plotNumber) {\n const modal = document.getElementById(\"details-modal\");\n const modalContent = document.getElementById(\"modal-content\");\n const container = document.getElementById(\"plot-details\");\n const title = document.getElementById(\"plot-title\");\n const badge = document.getElementById(\"plot-badge\");\n const closeBtn = document.getElementById(\"close-btn\");\n\n const cleanPlotNumber = plotNumber.trim();\n const data = plotData[cleanPlotNumber];\n\n if (!data) {\n badge.textContent = cleanPlotNumber;\n badge.className = \"plot-badge not-available\";\n modalContent.className = \"modal-content not-available\";\n closeBtn.className = \"close-btn not-available\";\n container.innerHTML = \"<p>No details found for this plot.<\/p>\";\n modal.style.display = \"block\";\n return;\n }\n\n badge.textContent = cleanPlotNumber;\n\n let availabilityStatus = data['Availability']?.trim().toUpperCase();\n \n \/\/ Set colors based on availability\n if (availabilityStatus === \"NA\" || availabilityStatus === \"\") {\n badge.className = \"plot-badge not-available\";\n modalContent.className = \"modal-content not-available\";\n closeBtn.className = \"close-btn not-available\";\n } else {\n badge.className = \"plot-badge available\";\n modalContent.className = \"modal-content available\";\n closeBtn.className = \"close-btn available\";\n }\n\n let html = \"<table>\";\n\n let availabilityBadge = \"\";\n if (availabilityStatus === \"NA\" || availabilityStatus === \"\") {\n availabilityBadge = `<tr><td><strong>Availability<\/strong><\/td><td><span class=\"availability-icon\">\ud83d\udd34<\/span> Not Available<\/td><\/tr>`;\n } else {\n availabilityBadge = `<tr><td><strong>Availability<\/strong><\/td><td><span class=\"availability-icon\">\ud83d\udfe2<\/span> Available<\/td><\/tr>`;\n }\n\n html += availabilityBadge;\n\n Object.entries(data).forEach(([key, value]) => {\n if (value && value !== '' && key !== 'Availability') {\n html += `<tr><td><strong>${key}<\/strong><\/td><td>${value}<\/td><\/tr>`;\n }\n });\n\n html += \"<\/table>\";\n\n container.innerHTML = html;\n modal.style.display = \"block\";\n }\n\n function closeModal() {\n const modal = document.getElementById(\"details-modal\");\n modal.classList.add(\"fade-out\");\n setTimeout(() => {\n modal.style.display = \"none\";\n modal.classList.remove(\"fade-out\");\n }, 300);\n }\n\n function exportToPDF() {\n const doc = new jsPDF();\n\n let startY = 20;\n\n for (const [category, plots] of Object.entries(groupedPlots)) {\n doc.setFontSize(14);\n doc.text(category, 14, startY);\n startY += 10;\n\n const tableRows = plots.map(plot => [\n plot['Plot No'],\n plot['Availability']?.trim().toUpperCase() === \"NA\" ? '\u274c' : '\u2705',\n plot['SqY'],\n plot['Cents'],\n plot['North'],\n plot['South'],\n plot['East'],\n plot['West']\n ]);\n\n doc.autoTable({\n head: [['Plot', 'Avail', 'SqY', 'Cents', 'N', 'S', 'E', 'W']],\n body: tableRows,\n startY: startY\n });\n\n startY = doc.lastAutoTable.finalY + 10;\n }\n\n doc.save(\"Plot_Details.pdf\");\n }\n\n function showTooltip(e, plotNo) {\n const tooltip = document.getElementById(\"plotTooltip\");\n const data = plotData[plotNo];\n if (!data) return;\n\n let availability = data['Availability']?.trim().toUpperCase();\n let icon = availability === \"NA\" ? \"\ud83d\udd34\" : \"\ud83d\udfe2\";\n const sqy = data['SqY'] || 'N\/A';\n\n tooltip.innerHTML = `Plot ${plotNo} \u2013 ${icon}, SqY: ${sqy}`;\n tooltip.style.opacity = 1;\n\n let clientX, clientY;\n if (e.type === 'touchstart' || e.type === 'touchmove') {\n clientX = e.touches[0].clientX;\n clientY = e.touches[0].clientY;\n } else {\n clientX = e.clientX;\n clientY = e.clientY;\n }\n\n tooltip.style.left = `${clientX + 10}px`;\n tooltip.style.top = `${clientY + 10}px`;\n }\n\n function hideTooltip() {\n const tooltip = document.getElementById(\"plotTooltip\");\n tooltip.style.opacity = 0;\n }\n\n \/\/ Initialize everything when the page loads\n window.addEventListener('load', loadImageAndInitialize);\n window.addEventListener('resize', scaleImageMap);\n\n \/\/ Close modal when clicking outside\n window.addEventListener('click', function(event) {\n const modal = document.getElementById('details-modal');\n if (event.target === modal) {\n closeModal();\n }\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-842eb86 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"842eb86\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a02ce4f\" data-id=\"a02ce4f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c5e5af3 elementor-widget elementor-widget-html\" data-id=\"c5e5af3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<style>\n .whatsapp-float {\n position: fixed;\n bottom: 20px;\n right: 20px;\n z-index: 9999;\n background-color: #25D366;\n color: white;\n width: 60px;\n height: 60px;\n border-radius: 50%;\n text-align: center;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n transition: transform 0.3s ease;\n animation: whatsappBounce 2s infinite;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .whatsapp-float:hover {\n transform: scale(1.1);\n }\n\n .whatsapp-float img {\n width: 32px;\n height: auto;\n }\n\n @keyframes whatsappBounce {\n 0%, 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-8px);\n }\n }\n<\/style>\n\n<a \n href=\"https:\/\/wa.me\/919885155668?text=Hi%2C+I%27m+interested+in+Sriram+Homes+Layout+plots.+Can+you+share+more+details%3F\" \n target=\"_blank\" \n class=\"whatsapp-float\" \n title=\"Chat with us on WhatsApp\"\n>\n <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/6b\/WhatsApp.svg\" alt=\"WhatsApp\" \/>\n<\/a>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Hover your mouse over the plot to view detailed information, including size, location, and key features. Discover detailed information about available plots by clicking on each section of our interactive map. Select any plot to instantly view its location, size, and pricing\u2014making it easy to find your perfect property in Visakhapatnam. Interactive Plot Map Plot […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"%%post_title%% %%sep%% %%sitetitle%%! You can view details of a plot and it's availablity and sizes of the plots on clicking the required plot image.","_seopress_robots_index":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3079","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sriramhomes.com\/index.php\/wp-json\/wp\/v2\/pages\/3079","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sriramhomes.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sriramhomes.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sriramhomes.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sriramhomes.com\/index.php\/wp-json\/wp\/v2\/comments?post=3079"}],"version-history":[{"count":65,"href":"https:\/\/sriramhomes.com\/index.php\/wp-json\/wp\/v2\/pages\/3079\/revisions"}],"predecessor-version":[{"id":3450,"href":"https:\/\/sriramhomes.com\/index.php\/wp-json\/wp\/v2\/pages\/3079\/revisions\/3450"}],"wp:attachment":[{"href":"https:\/\/sriramhomes.com\/index.php\/wp-json\/wp\/v2\/media?parent=3079"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}