BSK Plot Finder<\/title>\r\n<link href=\"https:\/\/api.mapbox.com\/mapbox-gl-js\/v3.3.0\/mapbox-gl.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Syne:wght=600;800&family=DM+Sans:wght=400;500;600&display=swap\" rel=\"stylesheet\">\r\n<script src=\"https:\/\/api.mapbox.com\/mapbox-gl-js\/v3.3.0\/mapbox-gl.js\"><\/script>\r\n<style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n :root {\r\n --green: #00A651;\r\n --green-dark: #007a3d;\r\n --navy: #0f172a;\r\n --slate: #1e293b;\r\n --text: #334155;\r\n --muted: #64748b;\r\n --border: #e2e8f0;\r\n --bg: #f8fafc;\r\n --white: #ffffff;\r\n --red: #ef4444;\r\n }\r\n\r\n body {\r\n font-family: 'DM Sans', sans-serif;\r\n background: var(--bg);\r\n color: var(--text);\r\n min-height: 100vh;\r\n }\r\n\r\n .finder-wrap {\r\n max-width: 1280px;\r\n margin: 24px auto;\r\n padding: 0 16px;\r\n }\r\n\r\n \/* Header Bar *\/\r\n .finder-header {\r\n background: var(--navy);\r\n border-radius: 14px 14px 0 0;\r\n padding: 14px 24px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n .finder-header .brand {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n .pulse-dot {\r\n position: relative;\r\n width: 12px; height: 12px;\r\n }\r\n .pulse-dot span:first-child {\r\n position: absolute;\r\n inset: 0;\r\n background: var(--green);\r\n border-radius: 50%;\r\n opacity: 0.6;\r\n animation: pulse 2s infinite;\r\n }\r\n .pulse-dot span:last-child {\r\n position: absolute;\r\n inset: 2px;\r\n background: var(--green);\r\n border-radius: 50%;\r\n }\r\n @keyframes pulse {\r\n 0%,100% { transform: scale(1); opacity: 0.6; }\r\n 50% { transform: scale(2.2); opacity: 0; }\r\n }\r\n .brand-name {\r\n font-family: 'Syne', sans-serif;\r\n font-size: 17px;\r\n font-weight: 800;\r\n color: var(--white);\r\n letter-spacing: 0.3px;\r\n }\r\n .badge {\r\n font-size: 12px;\r\n font-weight: 600;\r\n color: #94a3b8;\r\n background: var(--slate);\r\n padding: 5px 14px;\r\n border-radius: 30px;\r\n }\r\n\r\n \/* Search Panel *\/\r\n .search-panel {\r\n background: var(--white);\r\n border-left: 1px solid var(--border);\r\n border-right: 1px solid var(--border);\r\n padding: 20px 24px;\r\n }\r\n .search-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\r\n gap: 12px;\r\n margin-bottom: 16px;\r\n }\r\n .field-group {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n }\r\n .field-group label {\r\n font-size: 11px;\r\n font-weight: 700;\r\n color: var(--muted);\r\n text-transform: uppercase;\r\n letter-spacing: 0.6px;\r\n }\r\n .field-group input, .field-group select {\r\n padding: 11px 13px;\r\n border: 2px solid var(--border);\r\n border-radius: 8px;\r\n font-size: 14px;\r\n font-family: 'DM Sans', sans-serif;\r\n color: var(--text);\r\n background: var(--bg);\r\n outline: none;\r\n transition: border-color 0.2s, background 0.2s;\r\n }\r\n .field-group input:focus, .field-group select:focus {\r\n border-color: var(--green);\r\n background: var(--white);\r\n }\r\n .field-group input::placeholder { color: #adb5bd; }\r\n\r\n .search-actions {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n }\r\n .hint {\r\n font-size: 12px;\r\n color: var(--muted);\r\n }\r\n .hint strong { color: var(--green); }\r\n\r\n .btn-search {\r\n background: var(--green);\r\n color: var(--white);\r\n border: none;\r\n padding: 13px 36px;\r\n border-radius: 8px;\r\n font-weight: 700;\r\n font-size: 15px;\r\n font-family: 'DM Sans', sans-serif;\r\n cursor: pointer;\r\n box-shadow: 0 4px 14px rgba(0,166,81,0.25);\r\n transition: all 0.2s;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .btn-search:hover { background: var(--green-dark); transform: translateY(-1px); }\r\n .btn-search:active { transform: translateY(0); }\r\n .btn-search.loading { opacity: 0.7; pointer-events: none; }\r\n\r\n \/* Result bar *\/\r\n .result-bar {\r\n background: #f0fdf4;\r\n border-left: 1px solid var(--border);\r\n border-right: 1px solid var(--border);\r\n border-top: 1px solid #bbf7d0;\r\n padding: 10px 24px;\r\n font-size: 13px;\r\n color: var(--green-dark);\r\n font-weight: 600;\r\n display: none;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .result-bar.show { display: flex; }\r\n\r\n .error-bar {\r\n background: #fef2f2;\r\n border-left: 1px solid var(--border);\r\n border-right: 1px solid var(--border);\r\n border-top: 1px solid #fecaca;\r\n padding: 10px 24px;\r\n font-size: 13px;\r\n color: var(--red);\r\n font-weight: 600;\r\n display: none;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .error-bar.show { display: flex; }\r\n\r\n \/* Map *\/\r\n #map {\r\n width: 100%;\r\n height: 580px;\r\n border-left: 1px solid var(--border);\r\n border-right: 1px solid var(--border);\r\n border-bottom: 1px solid var(--border);\r\n border-radius: 0 0 14px 14px;\r\n }\r\n\r\n \/* Suggestions dropdown *\/\r\n .suggestions-wrap {\r\n position: relative;\r\n }\r\n .suggestions-list {\r\n position: absolute;\r\n top: 100%;\r\n left: 0; right: 0;\r\n background: var(--white);\r\n border: 2px solid var(--green);\r\n border-radius: 8px;\r\n z-index: 999;\r\n max-height: 200px;\r\n overflow-y: auto;\r\n box-shadow: 0 8px 24px rgba(0,0,0,0.12);\r\n display: none;\r\n }\r\n .suggestions-list.open { display: block; }\r\n .suggestion-item {\r\n padding: 10px 14px;\r\n font-size: 13px;\r\n cursor: pointer;\r\n border-bottom: 1px solid var(--border);\r\n transition: background 0.15s;\r\n }\r\n .suggestion-item:last-child { border-bottom: none; }\r\n .suggestion-item:hover { background: #f0fdf4; color: var(--green-dark); }\r\n .suggestion-item .place-name { font-weight: 600; }\r\n .suggestion-item .place-context { font-size: 11px; color: var(--muted); margin-top: 2px; }\r\n\r\n @media (max-width: 640px) {\r\n .finder-wrap { margin: 12px auto; padding: 0 10px; }\r\n .search-grid { grid-template-columns: 1fr 1fr; }\r\n #map { height: 400px; }\r\n .badge { display: none; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"finder-wrap\">\r\n <div class=\"finder-header\">\r\n <div class=\"brand\">\r\n <div class=\"pulse-dot\"><span><\/span><span><\/span><\/div>\r\n <span class=\"brand-name\">BSK Real Estate \u2014 Plot Finder<\/span>\r\n <\/div>\r\n <div class=\"badge\">\u26a1 Mapbox Powered<\/div>\r\n <\/div>\r\n\r\n <div class=\"search-panel\">\r\n <div class=\"search-grid\">\r\n\r\n <div class=\"field-group\">\r\n <label>City *<\/label>\r\n <input type=\"text\" id=\"f-city\" placeholder=\"e.g. Peshawar\" autocomplete=\"off\">\r\n <\/div>\r\n\r\n <div class=\"field-group suggestions-wrap\">\r\n <label>Society \/ Area<\/label>\r\n <input type=\"text\" id=\"f-society\" placeholder=\"e.g. DHA, Hayatabad\" autocomplete=\"off\">\r\n <div class=\"suggestions-list\" id=\"society-suggestions\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>Phase<\/label>\r\n <input type=\"text\" id=\"f-phase\" placeholder=\"e.g. Phase 5\">\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>Sector \/ Block<\/label>\r\n <input type=\"text\" id=\"f-sector\" placeholder=\"e.g. Sector G, Block C\">\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>Street<\/label>\r\n <input type=\"text\" id=\"f-street\" placeholder=\"e.g. Street 12\">\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>House \/ Plot No.<\/label>\r\n <input type=\"text\" id=\"f-plot\" placeholder=\"e.g. Plot 45\">\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"search-actions\">\r\n <span class=\"hint\">* City is <strong>required<\/strong>. More details = more accurate location.<\/span>\r\n <button class=\"btn-search\" id=\"search-btn\" onclick=\"doSearch()\">\r\n \ud83d\udd0d Find on Map\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"result-bar\" id=\"result-bar\">\u2705 <span id=\"result-text\"><\/span><\/div>\r\n <div class=\"error-bar\" id=\"error-bar\">\u26a0\ufe0f <span id=\"error-text\"><\/span><\/div>\r\n\r\n <div id=\"map\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst TOKEN = 'pk.eyJ1Ijoibml6YW1td3QiLCJhIjoiY21uc3doZWd2MDVjZzJwc2hiZnphazY1MiJ9._-irZPW5lKVRQUupAN0bPw';\r\nconst STYLE = 'mapbox:\/\/styles\/nizammwt\/cmq3ifuj7005y01s3cpepcb3m';\r\n\r\nmapboxgl.accessToken = TOKEN;\r\n\r\nconst map = new mapboxgl.Map({\r\n container: 'map',\r\n style: STYLE,\r\n center: [71.5249, 34.0151],\r\n zoom: 12,\r\n pitch: 20\r\n});\r\nmap.addControl(new mapboxgl.NavigationControl(), 'top-right');\r\nmap.addControl(new mapboxgl.FullscreenControl(), 'top-right');\r\n\r\nlet marker = null;\r\n\r\n\/\/ \u2500\u2500 Society autocomplete \u2500\u2500\r\nlet debounceTimer;\r\ndocument.getElementById('f-society').addEventListener('input', function() {\r\n clearTimeout(debounceTimer);\r\n const city = document.getElementById('f-city').value.trim();\r\n const q = this.value.trim();\r\n if (q.length < 2) { closeSuggestions(); return; }\r\n debounceTimer = setTimeout(() => fetchSuggestions(q, city), 300);\r\n});\r\n\r\nasync function fetchSuggestions(q, city) {\r\n \/\/ CRITICAL ENGINEERING UPDATE: Forcing Mapbox to prioritize the typed city bounds\r\n let url = `https:\/\/api.mapbox.com\/geocoding\/v5\/mapbox.places\/${encodeURIComponent(q)}.json?access_token=${TOKEN}&country=PK&types=neighborhood,locality,place,poi&limit=5`;\r\n \r\n if (city) {\r\n try {\r\n const cityRes = await fetch(`https:\/\/api.mapbox.com\/geocoding\/v5\/mapbox.places\/${encodeURIComponent(city)}.json?access_token=${TOKEN}&country=PK&limit=1`);\r\n const cityData = await cityRes.json();\r\n if (cityData.features && cityData.features.length > 0) {\r\n const center = cityData.features[0].center;\r\n \/\/ Biasing search results directly around the selected city coordinates\r\n url += `&proximity=${center[0]},${center[1]}`;\r\n }\r\n } catch(err) { console.log(\"City bias error, falling back.\"); }\r\n }\r\n\r\n try {\r\n const res = await fetch(url);\r\n const data = await res.json();\r\n showSuggestions(data.features || []);\r\n } catch(e) { closeSuggestions(); }\r\n}\r\n\r\nfunction showSuggestions(features) {\r\n const box = document.getElementById('society-suggestions');\r\n if (!features.length) { closeSuggestions(); return; }\r\n box.innerHTML = features.map(f => `\r\n <div class=\"suggestion-item\" onclick=\"pickSuggestion('${f.text.replace(\/'\/g,\"\\\\'\")}', ${f.center[0]}, ${f.center[1]}, '${f.place_name.replace(\/'\/g,\"\\\\'\")}')\">\r\n <div class=\"place-name\">${f.text}<\/div>\r\n <div class=\"place-context\">${f.place_name}<\/div>\r\n <\/div>`).join('');\r\n box.classList.add('open');\r\n}\r\n\r\nfunction closeSuggestions() {\r\n document.getElementById('society-suggestions').classList.remove('open');\r\n}\r\n\r\nfunction pickSuggestion(name, lng, lat, fullName) {\r\n document.getElementById('f-society').value = name;\r\n closeSuggestions();\r\n map.flyTo({ center: [lng, lat], zoom: 14, speed: 1.2 });\r\n}\r\n\r\ndocument.addEventListener('click', e => {\r\n if (!e.target.closest('.suggestions-wrap')) closeSuggestions();\r\n});\r\n\r\n\/\/ \u2500\u2500 Main Search \u2500\u2500\r\nasync function doSearch() {\r\n showResult(false);\r\n showError(false);\r\n\r\n const city = document.getElementById('f-city').value.trim();\r\n const society = document.getElementById('f-society').value.trim();\r\n const phase = document.getElementById('f-phase').value.trim();\r\n const sector = document.getElementById('f-sector').value.trim();\r\n const street = document.getElementById('f-street').value.trim();\r\n const plot = document.getElementById('f-plot').value.trim();\r\n\r\n if (!city) {\r\n showError(true, 'Please enter City name (required).');\r\n document.getElementById('f-city').focus();\r\n return;\r\n }\r\n\r\n \/\/ Strict structural ordering: Specific details always come first\r\n const parts = [plot, street, sector, phase, society, city, 'Pakistan'].filter(Boolean);\r\n const query = parts.join(', ');\r\n\r\n const btn = document.getElementById('search-btn');\r\n btn.classList.add('loading');\r\n btn.textContent = '\u23f3 Searching...';\r\n\r\n try {\r\n let coords = await geocode(query);\r\n\r\n \/\/ Fallback logic to protect view viewport from sliding into different cities\r\n if (!coords && (plot || street || sector)) {\r\n const broaderParts = [sector, phase, society, city, 'Pakistan'].filter(Boolean);\r\n coords = await geocode(broaderParts.join(', '));\r\n }\r\n\r\n if (coords) {\r\n placeMarker(coords.center, coords.place_name, !!plot);\r\n showResult(true, coords.place_name);\r\n } else {\r\n showError(true, 'Location not found. Try with less detail \u2014 e.g. just Society + City.');\r\n }\r\n } catch(e) {\r\n showError(true, 'Connection error. Please try again.');\r\n }\r\n\r\n btn.classList.remove('loading');\r\n btn.innerHTML = '\ud83d\udd0d Find on Map';\r\n}\r\n\r\nasync function geocode(query) {\r\n const url = `https:\/\/api.mapbox.com\/geocoding\/v5\/mapbox.places\/${encodeURIComponent(query)}.json?access_token=${TOKEN}&country=PK&limit=1`;\r\n const res = await fetch(url);\r\n const data = await res.json();\r\n if (data.features && data.features.length > 0) {\r\n return data.features[0];\r\n }\r\n return null;\r\n}\r\n\r\nfunction placeMarker(center, label, isSpecific) {\r\n if (marker) marker.remove();\r\n const zoom = isSpecific ? 17.5 : 15.5;\r\n map.flyTo({ center, zoom, speed: 1.3, curve: 1.1, pitch: 25 });\r\n\r\n marker = new mapboxgl.Marker({ color: '#ef4444' })\r\n .setLngLat(center)\r\n .setPopup(new mapboxgl.Popup({ offset: 28 }).setHTML(`\r\n <div style=\"font-family:sans-serif;padding:4px;min-width:180px\">\r\n <div style=\"color:#00A651;font-weight:800;font-size:12px;margin-bottom:4px\">\ud83d\udccd Location Found<\/div>\r\n <div style=\"font-size:12px;color:#334155;line-height:1.5\">${label}<\/div>\r\n <\/div>`))\r\n .addTo(map)\r\n .togglePopup();\r\n}\r\n\r\nfunction showResult(show, text='') {\r\n const bar = document.getElementById('result-bar');\r\n document.getElementById('result-text').textContent = text;\r\n bar.classList.toggle('show', show);\r\n}\r\nfunction showError(show, text='') {\r\n const bar = document.getElementById('error-bar');\r\n document.getElementById('error-text').textContent = text;\r\n bar.classList.toggle('show', show);\r\n}\r\n\r\n\/\/ Enter key trigger on input fields\r\ndocument.querySelectorAll('input').forEach(el => {\r\n el.addEventListener('keypress', e => { if(e.key==='Enter') doSearch(); });\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-770cfc9 e-con e-atomic-element e-flexbox-base e-35b2dd4 \" data-id=\"770cfc9\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"770cfc9\">\n \t\t<div class=\"elementor-element elementor-element-7c156c4 elementor-widget elementor-widget-html\" data-id=\"7c156c4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>BSK Plot Finder<\/title>\r\n<link href=\"https:\/\/api.mapbox.com\/mapbox-gl-js\/v3.3.0\/mapbox-gl.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Syne:wght=600;800&family=DM+Sans:wght=400;500;600&display=swap\" rel=\"stylesheet\">\r\n<script src=\"https:\/\/api.mapbox.com\/mapbox-gl-js\/v3.3.0\/mapbox-gl.js\"><\/script>\r\n<style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n :root {\r\n --green: #00A651;\r\n --green-dark: #007a3d;\r\n --navy: #0f172a;\r\n --slate: #1e293b;\r\n --text: #334155;\r\n --muted: #64748b;\r\n --border: #e2e8f0;\r\n --bg: #f8fafc;\r\n --white: #ffffff;\r\n --red: #ef4444;\r\n }\r\n\r\n body {\r\n font-family: 'DM Sans', sans-serif;\r\n background: var(--bg);\r\n color: var(--text);\r\n min-height: 100vh;\r\n }\r\n\r\n .finder-wrap {\r\n max-width: 1280px;\r\n margin: 24px auto;\r\n padding: 0 16px;\r\n }\r\n\r\n \/* Header Bar *\/\r\n .finder-header {\r\n background: var(--navy);\r\n border-radius: 14px 14px 0 0;\r\n padding: 14px 24px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n .finder-header .brand {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n .pulse-dot {\r\n position: relative;\r\n width: 12px; height: 12px;\r\n }\r\n .pulse-dot span:first-child {\r\n position: absolute;\r\n inset: 0;\r\n background: var(--green);\r\n border-radius: 50%;\r\n opacity: 0.6;\r\n animation: pulse 2s infinite;\r\n }\r\n .pulse-dot span:last-child {\r\n position: absolute;\r\n inset: 2px;\r\n background: var(--green);\r\n border-radius: 50%;\r\n }\r\n @keyframes pulse {\r\n 0%,100% { transform: scale(1); opacity: 0.6; }\r\n 50% { transform: scale(2.2); opacity: 0; }\r\n }\r\n .brand-name {\r\n font-family: 'Syne', sans-serif;\r\n font-size: 17px;\r\n font-weight: 800;\r\n color: var(--white);\r\n letter-spacing: 0.3px;\r\n }\r\n .badge {\r\n font-size: 12px;\r\n font-weight: 600;\r\n color: #94a3b8;\r\n background: var(--slate);\r\n padding: 5px 14px;\r\n border-radius: 30px;\r\n }\r\n\r\n \/* Search Panel *\/\r\n .search-panel {\r\n background: var(--white);\r\n border-left: 1px solid var(--border);\r\n border-right: 1px solid var(--border);\r\n padding: 20px 24px;\r\n }\r\n .search-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\r\n gap: 12px;\r\n margin-bottom: 16px;\r\n }\r\n .field-group {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n }\r\n .field-group label {\r\n font-size: 11px;\r\n font-weight: 700;\r\n color: var(--muted);\r\n text-transform: uppercase;\r\n letter-spacing: 0.6px;\r\n }\r\n .field-group input {\r\n padding: 11px 13px;\r\n border: 2px solid var(--border);\r\n border-radius: 8px;\r\n font-size: 14px;\r\n font-family: 'DM Sans', sans-serif;\r\n color: var(--text);\r\n background: var(--bg);\r\n outline: none;\r\n transition: border-color 0.2s, background 0.2s;\r\n }\r\n .field-group input:focus {\r\n border-color: var(--green);\r\n background: var(--white);\r\n }\r\n .field-group input::placeholder { color: #adb5bd; }\r\n\r\n .search-actions {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n }\r\n .hint {\r\n font-size: 12px;\r\n color: var(--muted);\r\n }\r\n .hint strong { color: var(--green); }\r\n\r\n .btn-search {\r\n background: var(--green);\r\n color: var(--white);\r\n border: none;\r\n padding: 13px 36px;\r\n border-radius: 8px;\r\n font-weight: 700;\r\n font-size: 15px;\r\n font-family: 'DM Sans', sans-serif;\r\n cursor: pointer;\r\n box-shadow: 0 4px 14px rgba(0,166,81,0.25);\r\n transition: all 0.2s;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .btn-search:hover { background: var(--green-dark); transform: translateY(-1px); }\r\n .btn-search:active { transform: translateY(0); }\r\n .btn-search.loading { opacity: 0.7; pointer-events: none; }\r\n\r\n \/* Result bars *\/\r\n .result-bar {\r\n background: #f0fdf4;\r\n border-left: 1px solid var(--border);\r\n border-right: 1px solid var(--border);\r\n border-top: 1px solid #bbf7d0;\r\n padding: 10px 24px;\r\n font-size: 13px;\r\n color: var(--green-dark);\r\n font-weight: 600;\r\n display: none;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .result-bar.show { display: flex; }\r\n\r\n .error-bar {\r\n background: #fef2f2;\r\n border-left: 1px solid var(--border);\r\n border-right: 1px solid var(--border);\r\n border-top: 1px solid #fecaca;\r\n padding: 10px 24px;\r\n font-size: 13px;\r\n color: var(--red);\r\n font-weight: 600;\r\n display: none;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .error-bar.show { display: flex; }\r\n\r\n \/* Map Canvas *\/\r\n #map {\r\n width: 100%;\r\n height: 580px;\r\n border-left: 1px solid var(--border);\r\n border-right: 1px solid var(--border);\r\n border-bottom: 1px solid var(--border);\r\n border-radius: 0 0 14px 14px;\r\n }\r\n\r\n \/* Suggestions Dropdown *\/\r\n .suggestions-wrap { position: relative; }\r\n .suggestions-list {\r\n position: absolute;\r\n top: 100%; left: 0; right: 0;\r\n background: var(--white);\r\n border: 2px solid var(--green);\r\n border-radius: 8px;\r\n z-index: 999;\r\n max-height: 200px;\r\n overflow-y: auto;\r\n box-shadow: 0 8px 24px rgba(0,0,0,0.12);\r\n display: none;\r\n }\r\n .suggestions-list.open { display: block; }\r\n .suggestion-item {\r\n padding: 10px 14px;\r\n font-size: 13px;\r\n cursor: pointer;\r\n border-bottom: 1px solid var(--border);\r\n transition: background 0.15s;\r\n }\r\n .suggestion-item:last-child { border-bottom: none; }\r\n .suggestion-item:hover { background: #f0fdf4; color: var(--green-dark); }\r\n .suggestion-item .place-name { font-weight: 600; }\r\n .suggestion-item .place-context { font-size: 11px; color: var(--muted); margin-top: 2px; }\r\n\r\n @media (max-width: 640px) {\r\n .finder-wrap { margin: 12px auto; padding: 0 10px; }\r\n .search-grid { grid-template-columns: 1fr 1fr; }\r\n #map { height: 400px; }\r\n .badge { display: none; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"finder-wrap\">\r\n <div class=\"finder-header\">\r\n <div class=\"brand\">\r\n <div class=\"pulse-dot\"><span><\/span><span><\/span><\/div>\r\n <span class=\"brand-name\">BSK Real Estate \u2014 Plot Finder<\/span>\r\n <\/div>\r\n <div class=\"badge\">\u26a1 System Live<\/div>\r\n <\/div>\r\n\r\n <div class=\"search-panel\">\r\n <div class=\"search-grid\">\r\n <div class=\"field-group\">\r\n <label>City *<\/label>\r\n <input type=\"text\" id=\"f-city\" placeholder=\"e.g. Islamabad\" autocomplete=\"off\">\r\n <\/div>\r\n <div class=\"field-group suggestions-wrap\">\r\n <label>Society \/ Area<\/label>\r\n <input type=\"text\" id=\"f-society\" placeholder=\"e.g. Faisal Town, DHA\" autocomplete=\"off\">\r\n <div class=\"suggestions-list\" id=\"society-suggestions\"><\/div>\r\n <\/div>\r\n <div class=\"field-group\">\r\n <label>Phase<\/label>\r\n <input type=\"text\" id=\"f-phase\" placeholder=\"e.g. Phase 1\">\r\n <\/div>\r\n <div class=\"field-group\">\r\n <label>Sector \/ Block<\/label>\r\n <input type=\"text\" id=\"f-sector\" placeholder=\"e.g. Block A\">\r\n <\/div>\r\n <div class=\"field-group\">\r\n <label>Street<\/label>\r\n <input type=\"text\" id=\"f-street\" placeholder=\"e.g. Street 12\">\r\n <\/div>\r\n <div class=\"field-group\">\r\n <label>House \/ Plot No.<\/label>\r\n <input type=\"text\" id=\"f-plot\" placeholder=\"e.g. Plot 120\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"search-actions\">\r\n <span class=\"hint\">* City is <strong>required<\/strong>. Enter correct fields for precise locking.<\/span>\r\n <button class=\"btn-search\" id=\"search-btn\" onclick=\"doSearch()\">\r\n \ud83d\udd0d Find on Map\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"result-bar\" id=\"result-bar\">\u2705 <span id=\"result-text\"><\/span><\/div>\r\n <div class=\"error-bar\" id=\"error-bar\">\u26a0\ufe0f <span id=\"error-text\"><\/span><\/div>\r\n\r\n <div id=\"map\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst TOKEN = 'pk.eyJ1Ijoibml6YW1td3QiLCJhIjoiY21uc3doZWd2MDVjZzJwc2hiZnphazY1MiJ9._-irZPW5lKVRQUupAN0bPw';\r\n\r\n\/\/ Standard Mapbox Streets style URL that never fails to load\r\nconst SAFE_STYLE = 'mapbox:\/\/styles\/mapbox\/streets-v12';\r\n\r\nmapboxgl.accessToken = TOKEN;\r\n\r\nconst map = new mapboxgl.Map({\r\n container: 'map',\r\n style: SAFE_STYLE,\r\n center: [73.0479, 33.6844], \/\/ Default Islamabad center\r\n zoom: 11,\r\n pitch: 0\r\n});\r\n\r\nmap.addControl(new mapboxgl.NavigationControl(), 'top-right');\r\nmap.addControl(new mapboxgl.FullscreenControl(), 'top-right');\r\n\r\nlet marker = null;\r\n\r\n\/\/ Autocomplete suggestions\r\nlet debounceTimer;\r\ndocument.getElementById('f-society').addEventListener('input', function() {\r\n clearTimeout(debounceTimer);\r\n const city = document.getElementById('f-city').value.trim();\r\n const q = this.value.trim();\r\n if (q.length < 2) { closeSuggestions(); return; }\r\n debounceTimer = setTimeout(() => fetchSuggestions(q, city), 300);\r\n});\r\n\r\nasync function fetchSuggestions(q, city) {\r\n const query = city ? `${q}, ${city}, Pakistan` : `${q}, Pakistan`;\r\n const url = `https:\/\/api.mapbox.com\/geocoding\/v5\/mapbox.places\/${encodeURIComponent(query)}.json?access_token=${TOKEN}&country=PK&types=neighborhood,locality,place,poi&limit=5`;\r\n try {\r\n const res = await fetch(url);\r\n const data = await res.json();\r\n showSuggestions(data.features || []);\r\n } catch(e) { closeSuggestions(); }\r\n}\r\n\r\nfunction showSuggestions(features) {\r\n const box = document.getElementById('society-suggestions');\r\n if (!features.length) { closeSuggestions(); return; }\r\n box.innerHTML = features.map(f => `\r\n <div class=\"suggestion-item\" onclick=\"pickSuggestion('${f.text.replace(\/'\/g,\"\\\\'\")}', ${f.center[0]}, ${f.center[1]})\">\r\n <div class=\"place-name\">${f.text}<\/div>\r\n <div class=\"place-context\">${f.place_name}<\/div>\r\n <\/div>`).join('');\r\n box.classList.add('open');\r\n}\r\n\r\nfunction closeSuggestions() {\r\n document.getElementById('society-suggestions').classList.remove('open');\r\n}\r\n\r\nfunction pickSuggestion(name, lng, lat) {\r\n document.getElementById('f-society').value = name;\r\n closeSuggestions();\r\n map.flyTo({ center: [lng, lat], zoom: 14, speed: 1.2 });\r\n}\r\n\r\ndocument.addEventListener('click', e => {\r\n if (!e.target.closest('.suggestions-wrap')) closeSuggestions();\r\n});\r\n\r\n\/\/ Search Trigger Function\r\nasync function doSearch() {\r\n showResult(false);\r\n showError(false);\r\n\r\n const city = document.getElementById('f-city').value.trim();\r\n const society = document.getElementById('f-society').value.trim();\r\n const phase = document.getElementById('f-phase').value.trim();\r\n const sector = document.getElementById('f-sector').value.trim();\r\n const street = document.getElementById('f-street').value.trim();\r\n const plot = document.getElementById('f-plot').value.trim();\r\n\r\n if (!city) {\r\n showError(true, 'Please enter City name (required).');\r\n document.getElementById('f-city').focus();\r\n return;\r\n }\r\n\r\n \/\/ Composing structural location parts\r\n const parts = [plot, street, sector, phase, society, city, 'Pakistan'].filter(Boolean);\r\n const query = parts.join(', ');\r\n\r\n const btn = document.getElementById('search-btn');\r\n btn.classList.add('loading');\r\n btn.textContent = '\u23f3 Searching...';\r\n\r\n try {\r\n let coords = await geocode(query);\r\n\r\n \/\/ Dynamic broader fallback check\r\n if (!coords && (plot || street || sector)) {\r\n const broaderParts = [sector, phase, society, city, 'Pakistan'].filter(Boolean);\r\n coords = await geocode(broaderParts.join(', '));\r\n }\r\n\r\n if (coords) {\r\n placeMarker(coords.center, coords.place_name, !!plot);\r\n showResult(true, coords.place_name);\r\n } else {\r\n showError(true, 'Location coordinates not found. Try reducing details.');\r\n }\r\n } catch(e) {\r\n showError(true, 'Network timeout. Please retry.');\r\n }\r\n\r\n btn.classList.remove('loading');\r\n btn.innerHTML = '\ud83d\udd0d Find on Map';\r\n}\r\n\r\nasync function geocode(query) {\r\n const url = `https:\/\/api.mapbox.com\/geocoding\/v5\/mapbox.places\/${encodeURIComponent(query)}.json?access_token=${TOKEN}&country=PK&limit=1`;\r\n const res = await fetch(url);\r\n const data = await res.json();\r\n if (data.features && data.features.length > 0) {\r\n return data.features[0];\r\n }\r\n return null;\r\n}\r\n\r\nfunction placeMarker(center, label, isSpecific) {\r\n if (marker) marker.remove();\r\n const zoom = isSpecific ? 17 : 14.5;\r\n \r\n map.flyTo({ center, zoom, speed: 1.4, curve: 1.1 });\r\n\r\n marker = new mapboxgl.Marker({ color: '#ef4444' })\r\n .setLngLat(center)\r\n .setPopup(new mapboxgl.Popup({ offset: 28 }).setHTML(`\r\n <div style=\"font-family:sans-serif;padding:4px;min-width:180px\">\r\n <div style=\"color:#00A651;font-weight:800;font-size:12px;margin-bottom:4px\">\ud83d\udccd Target Spotted<\/div>\r\n <div style=\"font-size:12px;color:#334155;line-height:1.5\">${label}<\/div>\r\n <\/div>`))\r\n .addTo(map)\r\n .togglePopup();\r\n}\r\n\r\nfunction showResult(show, text='') {\r\n const bar = document.getElementById('result-bar');\r\n document.getElementById('result-text').textContent = text;\r\n bar.classList.toggle('show', show);\r\n}\r\nfunction showError(show, text='') {\r\n const bar = document.getElementById('error-bar');\r\n document.getElementById('error-text').textContent = text;\r\n bar.classList.toggle('show', show);\r\n}\r\n\r\ndocument.querySelectorAll('input').forEach(el => {\r\n el.addEventListener('keypress', e => { if(e.key==='Enter') doSearch(); });\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>BSK Plot Finder BSK Real Estate \u2014 Plot Finder \u26a1 Mapbox Powered City * Society \/ Area Phase Sector \/ Block Street House \/ Plot No. * City is required. More details = more accurate location. \ud83d\udd0d Find on Map \u2705 \u26a0\ufe0f BSK Plot Finder BSK Real Estate \u2014 Plot Finder \u26a1 System Live City […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_theme","meta":{"content-type":"","footnotes":""},"class_list":["post-1035787","page","type-page","status-publish","hentry"],"blocksy_meta":[],"yoast_head":"\n<title>PLOT FINDER | bskgroups.com<\/title>\n<meta name=\"description\" content=\"Explore PLOT FINDER at BSK Groups. Trusted real estate services, verified property listings and professional property solutions in Pakistan.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bskgroups.com\/ur\/plot-finder\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"PLOT FINDER | bskgroups.com\" \/>\n<meta property=\"og:description\" content=\"Explore PLOT FINDER at BSK Groups. Trusted real estate services, verified property listings and professional property solutions in Pakistan.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bskgroups.com\/ur\/plot-finder\/\" \/>\n<meta property=\"og:site_name\" content=\"bskgroups.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/share\/1H3N31xKg9\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-07T16:56:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bskgroups.com\/wp-content\/uploads\/2026\/07\/aaa-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"10 \u0645\u0646\u0679\u0633\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/bskgroups.com\\\/plot-finder\\\/\",\"url\":\"https:\\\/\\\/bskgroups.com\\\/plot-finder\\\/\",\"name\":\"PLOT FINDER | bskgroups.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/bskgroups.com\\\/#website\"},\"datePublished\":\"2026-04-19T07:02:29+00:00\",\"dateModified\":\"2026-06-07T16:56:07+00:00\",\"description\":\"Explore PLOT FINDER at BSK Groups. Trusted real estate services, verified property listings and professional property solutions in Pakistan.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/bskgroups.com\\\/plot-finder\\\/#breadcrumb\"},\"inLanguage\":\"ur\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/bskgroups.com\\\/plot-finder\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/bskgroups.com\\\/plot-finder\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/bskgroups.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"PLOT FINDER\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/bskgroups.com\\\/#website\",\"url\":\"https:\\\/\\\/bskgroups.com\\\/\",\"name\":\"BSK groups\",\"description\":\"Bharosa Sab Ka\",\"publisher\":{\"@id\":\"https:\\\/\\\/bskgroups.com\\\/#organization\"},\"alternateName\":\"BSK\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/bskgroups.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ur\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/bskgroups.com\\\/#organization\",\"name\":\"BSK groups\",\"alternateName\":\"BSK group\",\"url\":\"https:\\\/\\\/bskgroups.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ur\",\"@id\":\"https:\\\/\\\/bskgroups.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/bskgroups.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/aaa-removebg-preview-1.png\",\"contentUrl\":\"https:\\\/\\\/bskgroups.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/aaa-removebg-preview-1.png\",\"width\":539,\"height\":372,\"caption\":\"BSK groups\"},\"image\":{\"@id\":\"https:\\\/\\\/bskgroups.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/share\\\/1H3N31xKg9\\\/\",\"https:\\\/\\\/youtube.com\\\/@bskmarketinggroup?si=Q1fs08pVc69tk2jX\",\"https:\\\/\\\/vt.tiktok.com\\\/ZSXMvNe8p\\\/\"]}]}<\/script>\n","yoast_head_json":{"title":"PLOT FINDER | bskgroups.com","description":"Explore PLOT FINDER at BSK Groups. Trusted real estate services, verified property listings and professional property solutions in Pakistan.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bskgroups.com\/ur\/plot-finder\/","og_locale":"en_US","og_type":"article","og_title":"PLOT FINDER | bskgroups.com","og_description":"Explore PLOT FINDER at BSK Groups. Trusted real estate services, verified property listings and professional property solutions in Pakistan.","og_url":"https:\/\/bskgroups.com\/ur\/plot-finder\/","og_site_name":"bskgroups.com","article_publisher":"https:\/\/www.facebook.com\/share\/1H3N31xKg9\/","article_modified_time":"2026-06-07T16:56:07+00:00","og_image":[{"width":600,"height":600,"url":"https:\/\/bskgroups.com\/wp-content\/uploads\/2026\/07\/aaa-1.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"10 \u0645\u0646\u0679\u0633"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/bskgroups.com\/plot-finder\/","url":"https:\/\/bskgroups.com\/plot-finder\/","name":"PLOT FINDER | bskgroups.com","isPartOf":{"@id":"https:\/\/bskgroups.com\/#website"},"datePublished":"2026-04-19T07:02:29+00:00","dateModified":"2026-06-07T16:56:07+00:00","description":"Explore PLOT FINDER at BSK Groups. Trusted real estate services, verified property listings and professional property solutions in Pakistan.","breadcrumb":{"@id":"https:\/\/bskgroups.com\/plot-finder\/#breadcrumb"},"inLanguage":"ur","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bskgroups.com\/plot-finder\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/bskgroups.com\/plot-finder\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bskgroups.com\/"},{"@type":"ListItem","position":2,"name":"PLOT FINDER"}]},{"@type":"WebSite","@id":"https:\/\/bskgroups.com\/#website","url":"https:\/\/bskgroups.com\/","name":"BSK groups","description":"Bharosa Sab Ka","publisher":{"@id":"https:\/\/bskgroups.com\/#organization"},"alternateName":"BSK","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bskgroups.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ur"},{"@type":"Organization","@id":"https:\/\/bskgroups.com\/#organization","name":"BSK groups","alternateName":"BSK group","url":"https:\/\/bskgroups.com\/","logo":{"@type":"ImageObject","inLanguage":"ur","@id":"https:\/\/bskgroups.com\/#\/schema\/logo\/image\/","url":"https:\/\/bskgroups.com\/wp-content\/uploads\/2025\/06\/aaa-removebg-preview-1.png","contentUrl":"https:\/\/bskgroups.com\/wp-content\/uploads\/2025\/06\/aaa-removebg-preview-1.png","width":539,"height":372,"caption":"BSK groups"},"image":{"@id":"https:\/\/bskgroups.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/share\/1H3N31xKg9\/","https:\/\/youtube.com\/@bskmarketinggroup?si=Q1fs08pVc69tk2jX","https:\/\/vt.tiktok.com\/ZSXMvNe8p\/"]}]}},"_links":{"self":[{"href":"https:\/\/bskgroups.com\/ur\/wp-json\/wp\/v2\/pages\/1035787","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bskgroups.com\/ur\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bskgroups.com\/ur\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bskgroups.com\/ur\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bskgroups.com\/ur\/wp-json\/wp\/v2\/comments?post=1035787"}],"version-history":[{"count":38,"href":"https:\/\/bskgroups.com\/ur\/wp-json\/wp\/v2\/pages\/1035787\/revisions"}],"predecessor-version":[{"id":1037194,"href":"https:\/\/bskgroups.com\/ur\/wp-json\/wp\/v2\/pages\/1035787\/revisions\/1037194"}],"wp:attachment":[{"href":"https:\/\/bskgroups.com\/ur\/wp-json\/wp\/v2\/media?parent=1035787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nBSK Plot Finder<\/title>\r\n<link href=\"https:\/\/api.mapbox.com\/mapbox-gl-js\/v3.3.0\/mapbox-gl.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Syne:wght=600;800&family=DM+Sans:wght=400;500;600&display=swap\" rel=\"stylesheet\">\r\n<script src=\"https:\/\/api.mapbox.com\/mapbox-gl-js\/v3.3.0\/mapbox-gl.js\"><\/script>\r\n<style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n :root {\r\n --green: #00A651;\r\n --green-dark: #007a3d;\r\n --navy: #0f172a;\r\n --slate: #1e293b;\r\n --text: #334155;\r\n --muted: #64748b;\r\n --border: #e2e8f0;\r\n --bg: #f8fafc;\r\n --white: #ffffff;\r\n --red: #ef4444;\r\n }\r\n\r\n body {\r\n font-family: 'DM Sans', sans-serif;\r\n background: var(--bg);\r\n color: var(--text);\r\n min-height: 100vh;\r\n }\r\n\r\n .finder-wrap {\r\n max-width: 1280px;\r\n margin: 24px auto;\r\n padding: 0 16px;\r\n }\r\n\r\n \/* Header Bar *\/\r\n .finder-header {\r\n background: var(--navy);\r\n border-radius: 14px 14px 0 0;\r\n padding: 14px 24px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n .finder-header .brand {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n .pulse-dot {\r\n position: relative;\r\n width: 12px; height: 12px;\r\n }\r\n .pulse-dot span:first-child {\r\n position: absolute;\r\n inset: 0;\r\n background: var(--green);\r\n border-radius: 50%;\r\n opacity: 0.6;\r\n animation: pulse 2s infinite;\r\n }\r\n .pulse-dot span:last-child {\r\n position: absolute;\r\n inset: 2px;\r\n background: var(--green);\r\n border-radius: 50%;\r\n }\r\n @keyframes pulse {\r\n 0%,100% { transform: scale(1); opacity: 0.6; }\r\n 50% { transform: scale(2.2); opacity: 0; }\r\n }\r\n .brand-name {\r\n font-family: 'Syne', sans-serif;\r\n font-size: 17px;\r\n font-weight: 800;\r\n color: var(--white);\r\n letter-spacing: 0.3px;\r\n }\r\n .badge {\r\n font-size: 12px;\r\n font-weight: 600;\r\n color: #94a3b8;\r\n background: var(--slate);\r\n padding: 5px 14px;\r\n border-radius: 30px;\r\n }\r\n\r\n \/* Search Panel *\/\r\n .search-panel {\r\n background: var(--white);\r\n border-left: 1px solid var(--border);\r\n border-right: 1px solid var(--border);\r\n padding: 20px 24px;\r\n }\r\n .search-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\r\n gap: 12px;\r\n margin-bottom: 16px;\r\n }\r\n .field-group {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n }\r\n .field-group label {\r\n font-size: 11px;\r\n font-weight: 700;\r\n color: var(--muted);\r\n text-transform: uppercase;\r\n letter-spacing: 0.6px;\r\n }\r\n .field-group input, .field-group select {\r\n padding: 11px 13px;\r\n border: 2px solid var(--border);\r\n border-radius: 8px;\r\n font-size: 14px;\r\n font-family: 'DM Sans', sans-serif;\r\n color: var(--text);\r\n background: var(--bg);\r\n outline: none;\r\n transition: border-color 0.2s, background 0.2s;\r\n }\r\n .field-group input:focus, .field-group select:focus {\r\n border-color: var(--green);\r\n background: var(--white);\r\n }\r\n .field-group input::placeholder { color: #adb5bd; }\r\n\r\n .search-actions {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n }\r\n .hint {\r\n font-size: 12px;\r\n color: var(--muted);\r\n }\r\n .hint strong { color: var(--green); }\r\n\r\n .btn-search {\r\n background: var(--green);\r\n color: var(--white);\r\n border: none;\r\n padding: 13px 36px;\r\n border-radius: 8px;\r\n font-weight: 700;\r\n font-size: 15px;\r\n font-family: 'DM Sans', sans-serif;\r\n cursor: pointer;\r\n box-shadow: 0 4px 14px rgba(0,166,81,0.25);\r\n transition: all 0.2s;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .btn-search:hover { background: var(--green-dark); transform: translateY(-1px); }\r\n .btn-search:active { transform: translateY(0); }\r\n .btn-search.loading { opacity: 0.7; pointer-events: none; }\r\n\r\n \/* Result bar *\/\r\n .result-bar {\r\n background: #f0fdf4;\r\n border-left: 1px solid var(--border);\r\n border-right: 1px solid var(--border);\r\n border-top: 1px solid #bbf7d0;\r\n padding: 10px 24px;\r\n font-size: 13px;\r\n color: var(--green-dark);\r\n font-weight: 600;\r\n display: none;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .result-bar.show { display: flex; }\r\n\r\n .error-bar {\r\n background: #fef2f2;\r\n border-left: 1px solid var(--border);\r\n border-right: 1px solid var(--border);\r\n border-top: 1px solid #fecaca;\r\n padding: 10px 24px;\r\n font-size: 13px;\r\n color: var(--red);\r\n font-weight: 600;\r\n display: none;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .error-bar.show { display: flex; }\r\n\r\n \/* Map *\/\r\n #map {\r\n width: 100%;\r\n height: 580px;\r\n border-left: 1px solid var(--border);\r\n border-right: 1px solid var(--border);\r\n border-bottom: 1px solid var(--border);\r\n border-radius: 0 0 14px 14px;\r\n }\r\n\r\n \/* Suggestions dropdown *\/\r\n .suggestions-wrap {\r\n position: relative;\r\n }\r\n .suggestions-list {\r\n position: absolute;\r\n top: 100%;\r\n left: 0; right: 0;\r\n background: var(--white);\r\n border: 2px solid var(--green);\r\n border-radius: 8px;\r\n z-index: 999;\r\n max-height: 200px;\r\n overflow-y: auto;\r\n box-shadow: 0 8px 24px rgba(0,0,0,0.12);\r\n display: none;\r\n }\r\n .suggestions-list.open { display: block; }\r\n .suggestion-item {\r\n padding: 10px 14px;\r\n font-size: 13px;\r\n cursor: pointer;\r\n border-bottom: 1px solid var(--border);\r\n transition: background 0.15s;\r\n }\r\n .suggestion-item:last-child { border-bottom: none; }\r\n .suggestion-item:hover { background: #f0fdf4; color: var(--green-dark); }\r\n .suggestion-item .place-name { font-weight: 600; }\r\n .suggestion-item .place-context { font-size: 11px; color: var(--muted); margin-top: 2px; }\r\n\r\n @media (max-width: 640px) {\r\n .finder-wrap { margin: 12px auto; padding: 0 10px; }\r\n .search-grid { grid-template-columns: 1fr 1fr; }\r\n #map { height: 400px; }\r\n .badge { display: none; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"finder-wrap\">\r\n <div class=\"finder-header\">\r\n <div class=\"brand\">\r\n <div class=\"pulse-dot\"><span><\/span><span><\/span><\/div>\r\n <span class=\"brand-name\">BSK Real Estate \u2014 Plot Finder<\/span>\r\n <\/div>\r\n <div class=\"badge\">\u26a1 Mapbox Powered<\/div>\r\n <\/div>\r\n\r\n <div class=\"search-panel\">\r\n <div class=\"search-grid\">\r\n\r\n <div class=\"field-group\">\r\n <label>City *<\/label>\r\n <input type=\"text\" id=\"f-city\" placeholder=\"e.g. Peshawar\" autocomplete=\"off\">\r\n <\/div>\r\n\r\n <div class=\"field-group suggestions-wrap\">\r\n <label>Society \/ Area<\/label>\r\n <input type=\"text\" id=\"f-society\" placeholder=\"e.g. DHA, Hayatabad\" autocomplete=\"off\">\r\n <div class=\"suggestions-list\" id=\"society-suggestions\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>Phase<\/label>\r\n <input type=\"text\" id=\"f-phase\" placeholder=\"e.g. Phase 5\">\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>Sector \/ Block<\/label>\r\n <input type=\"text\" id=\"f-sector\" placeholder=\"e.g. Sector G, Block C\">\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>Street<\/label>\r\n <input type=\"text\" id=\"f-street\" placeholder=\"e.g. Street 12\">\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>House \/ Plot No.<\/label>\r\n <input type=\"text\" id=\"f-plot\" placeholder=\"e.g. Plot 45\">\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"search-actions\">\r\n <span class=\"hint\">* City is <strong>required<\/strong>. More details = more accurate location.<\/span>\r\n <button class=\"btn-search\" id=\"search-btn\" onclick=\"doSearch()\">\r\n \ud83d\udd0d Find on Map\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"result-bar\" id=\"result-bar\">\u2705 <span id=\"result-text\"><\/span><\/div>\r\n <div class=\"error-bar\" id=\"error-bar\">\u26a0\ufe0f <span id=\"error-text\"><\/span><\/div>\r\n\r\n <div id=\"map\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst TOKEN = 'pk.eyJ1Ijoibml6YW1td3QiLCJhIjoiY21uc3doZWd2MDVjZzJwc2hiZnphazY1MiJ9._-irZPW5lKVRQUupAN0bPw';\r\nconst STYLE = 'mapbox:\/\/styles\/nizammwt\/cmq3ifuj7005y01s3cpepcb3m';\r\n\r\nmapboxgl.accessToken = TOKEN;\r\n\r\nconst map = new mapboxgl.Map({\r\n container: 'map',\r\n style: STYLE,\r\n center: [71.5249, 34.0151],\r\n zoom: 12,\r\n pitch: 20\r\n});\r\nmap.addControl(new mapboxgl.NavigationControl(), 'top-right');\r\nmap.addControl(new mapboxgl.FullscreenControl(), 'top-right');\r\n\r\nlet marker = null;\r\n\r\n\/\/ \u2500\u2500 Society autocomplete \u2500\u2500\r\nlet debounceTimer;\r\ndocument.getElementById('f-society').addEventListener('input', function() {\r\n clearTimeout(debounceTimer);\r\n const city = document.getElementById('f-city').value.trim();\r\n const q = this.value.trim();\r\n if (q.length < 2) { closeSuggestions(); return; }\r\n debounceTimer = setTimeout(() => fetchSuggestions(q, city), 300);\r\n});\r\n\r\nasync function fetchSuggestions(q, city) {\r\n \/\/ CRITICAL ENGINEERING UPDATE: Forcing Mapbox to prioritize the typed city bounds\r\n let url = `https:\/\/api.mapbox.com\/geocoding\/v5\/mapbox.places\/${encodeURIComponent(q)}.json?access_token=${TOKEN}&country=PK&types=neighborhood,locality,place,poi&limit=5`;\r\n \r\n if (city) {\r\n try {\r\n const cityRes = await fetch(`https:\/\/api.mapbox.com\/geocoding\/v5\/mapbox.places\/${encodeURIComponent(city)}.json?access_token=${TOKEN}&country=PK&limit=1`);\r\n const cityData = await cityRes.json();\r\n if (cityData.features && cityData.features.length > 0) {\r\n const center = cityData.features[0].center;\r\n \/\/ Biasing search results directly around the selected city coordinates\r\n url += `&proximity=${center[0]},${center[1]}`;\r\n }\r\n } catch(err) { console.log(\"City bias error, falling back.\"); }\r\n }\r\n\r\n try {\r\n const res = await fetch(url);\r\n const data = await res.json();\r\n showSuggestions(data.features || []);\r\n } catch(e) { closeSuggestions(); }\r\n}\r\n\r\nfunction showSuggestions(features) {\r\n const box = document.getElementById('society-suggestions');\r\n if (!features.length) { closeSuggestions(); return; }\r\n box.innerHTML = features.map(f => `\r\n <div class=\"suggestion-item\" onclick=\"pickSuggestion('${f.text.replace(\/'\/g,\"\\\\'\")}', ${f.center[0]}, ${f.center[1]}, '${f.place_name.replace(\/'\/g,\"\\\\'\")}')\">\r\n <div class=\"place-name\">${f.text}<\/div>\r\n <div class=\"place-context\">${f.place_name}<\/div>\r\n <\/div>`).join('');\r\n box.classList.add('open');\r\n}\r\n\r\nfunction closeSuggestions() {\r\n document.getElementById('society-suggestions').classList.remove('open');\r\n}\r\n\r\nfunction pickSuggestion(name, lng, lat, fullName) {\r\n document.getElementById('f-society').value = name;\r\n closeSuggestions();\r\n map.flyTo({ center: [lng, lat], zoom: 14, speed: 1.2 });\r\n}\r\n\r\ndocument.addEventListener('click', e => {\r\n if (!e.target.closest('.suggestions-wrap')) closeSuggestions();\r\n});\r\n\r\n\/\/ \u2500\u2500 Main Search \u2500\u2500\r\nasync function doSearch() {\r\n showResult(false);\r\n showError(false);\r\n\r\n const city = document.getElementById('f-city').value.trim();\r\n const society = document.getElementById('f-society').value.trim();\r\n const phase = document.getElementById('f-phase').value.trim();\r\n const sector = document.getElementById('f-sector').value.trim();\r\n const street = document.getElementById('f-street').value.trim();\r\n const plot = document.getElementById('f-plot').value.trim();\r\n\r\n if (!city) {\r\n showError(true, 'Please enter City name (required).');\r\n document.getElementById('f-city').focus();\r\n return;\r\n }\r\n\r\n \/\/ Strict structural ordering: Specific details always come first\r\n const parts = [plot, street, sector, phase, society, city, 'Pakistan'].filter(Boolean);\r\n const query = parts.join(', ');\r\n\r\n const btn = document.getElementById('search-btn');\r\n btn.classList.add('loading');\r\n btn.textContent = '\u23f3 Searching...';\r\n\r\n try {\r\n let coords = await geocode(query);\r\n\r\n \/\/ Fallback logic to protect view viewport from sliding into different cities\r\n if (!coords && (plot || street || sector)) {\r\n const broaderParts = [sector, phase, society, city, 'Pakistan'].filter(Boolean);\r\n coords = await geocode(broaderParts.join(', '));\r\n }\r\n\r\n if (coords) {\r\n placeMarker(coords.center, coords.place_name, !!plot);\r\n showResult(true, coords.place_name);\r\n } else {\r\n showError(true, 'Location not found. Try with less detail \u2014 e.g. just Society + City.');\r\n }\r\n } catch(e) {\r\n showError(true, 'Connection error. Please try again.');\r\n }\r\n\r\n btn.classList.remove('loading');\r\n btn.innerHTML = '\ud83d\udd0d Find on Map';\r\n}\r\n\r\nasync function geocode(query) {\r\n const url = `https:\/\/api.mapbox.com\/geocoding\/v5\/mapbox.places\/${encodeURIComponent(query)}.json?access_token=${TOKEN}&country=PK&limit=1`;\r\n const res = await fetch(url);\r\n const data = await res.json();\r\n if (data.features && data.features.length > 0) {\r\n return data.features[0];\r\n }\r\n return null;\r\n}\r\n\r\nfunction placeMarker(center, label, isSpecific) {\r\n if (marker) marker.remove();\r\n const zoom = isSpecific ? 17.5 : 15.5;\r\n map.flyTo({ center, zoom, speed: 1.3, curve: 1.1, pitch: 25 });\r\n\r\n marker = new mapboxgl.Marker({ color: '#ef4444' })\r\n .setLngLat(center)\r\n .setPopup(new mapboxgl.Popup({ offset: 28 }).setHTML(`\r\n <div style=\"font-family:sans-serif;padding:4px;min-width:180px\">\r\n <div style=\"color:#00A651;font-weight:800;font-size:12px;margin-bottom:4px\">\ud83d\udccd Location Found<\/div>\r\n <div style=\"font-size:12px;color:#334155;line-height:1.5\">${label}<\/div>\r\n <\/div>`))\r\n .addTo(map)\r\n .togglePopup();\r\n}\r\n\r\nfunction showResult(show, text='') {\r\n const bar = document.getElementById('result-bar');\r\n document.getElementById('result-text').textContent = text;\r\n bar.classList.toggle('show', show);\r\n}\r\nfunction showError(show, text='') {\r\n const bar = document.getElementById('error-bar');\r\n document.getElementById('error-text').textContent = text;\r\n bar.classList.toggle('show', show);\r\n}\r\n\r\n\/\/ Enter key trigger on input fields\r\ndocument.querySelectorAll('input').forEach(el => {\r\n el.addEventListener('keypress', e => { if(e.key==='Enter') doSearch(); });\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-770cfc9 e-con e-atomic-element e-flexbox-base e-35b2dd4 \" data-id=\"770cfc9\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"770cfc9\">\n \t\t<div class=\"elementor-element elementor-element-7c156c4 elementor-widget elementor-widget-html\" data-id=\"7c156c4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>BSK Plot Finder<\/title>\r\n<link href=\"https:\/\/api.mapbox.com\/mapbox-gl-js\/v3.3.0\/mapbox-gl.css\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Syne:wght=600;800&family=DM+Sans:wght=400;500;600&display=swap\" rel=\"stylesheet\">\r\n<script src=\"https:\/\/api.mapbox.com\/mapbox-gl-js\/v3.3.0\/mapbox-gl.js\"><\/script>\r\n<style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n :root {\r\n --green: #00A651;\r\n --green-dark: #007a3d;\r\n --navy: #0f172a;\r\n --slate: #1e293b;\r\n --text: #334155;\r\n --muted: #64748b;\r\n --border: #e2e8f0;\r\n --bg: #f8fafc;\r\n --white: #ffffff;\r\n --red: #ef4444;\r\n }\r\n\r\n body {\r\n font-family: 'DM Sans', sans-serif;\r\n background: var(--bg);\r\n color: var(--text);\r\n min-height: 100vh;\r\n }\r\n\r\n .finder-wrap {\r\n max-width: 1280px;\r\n margin: 24px auto;\r\n padding: 0 16px;\r\n }\r\n\r\n \/* Header Bar *\/\r\n .finder-header {\r\n background: var(--navy);\r\n border-radius: 14px 14px 0 0;\r\n padding: 14px 24px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n .finder-header .brand {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n .pulse-dot {\r\n position: relative;\r\n width: 12px; height: 12px;\r\n }\r\n .pulse-dot span:first-child {\r\n position: absolute;\r\n inset: 0;\r\n background: var(--green);\r\n border-radius: 50%;\r\n opacity: 0.6;\r\n animation: pulse 2s infinite;\r\n }\r\n .pulse-dot span:last-child {\r\n position: absolute;\r\n inset: 2px;\r\n background: var(--green);\r\n border-radius: 50%;\r\n }\r\n @keyframes pulse {\r\n 0%,100% { transform: scale(1); opacity: 0.6; }\r\n 50% { transform: scale(2.2); opacity: 0; }\r\n }\r\n .brand-name {\r\n font-family: 'Syne', sans-serif;\r\n font-size: 17px;\r\n font-weight: 800;\r\n color: var(--white);\r\n letter-spacing: 0.3px;\r\n }\r\n .badge {\r\n font-size: 12px;\r\n font-weight: 600;\r\n color: #94a3b8;\r\n background: var(--slate);\r\n padding: 5px 14px;\r\n border-radius: 30px;\r\n }\r\n\r\n \/* Search Panel *\/\r\n .search-panel {\r\n background: var(--white);\r\n border-left: 1px solid var(--border);\r\n border-right: 1px solid var(--border);\r\n padding: 20px 24px;\r\n }\r\n .search-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\r\n gap: 12px;\r\n margin-bottom: 16px;\r\n }\r\n .field-group {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n }\r\n .field-group label {\r\n font-size: 11px;\r\n font-weight: 700;\r\n color: var(--muted);\r\n text-transform: uppercase;\r\n letter-spacing: 0.6px;\r\n }\r\n .field-group input {\r\n padding: 11px 13px;\r\n border: 2px solid var(--border);\r\n border-radius: 8px;\r\n font-size: 14px;\r\n font-family: 'DM Sans', sans-serif;\r\n color: var(--text);\r\n background: var(--bg);\r\n outline: none;\r\n transition: border-color 0.2s, background 0.2s;\r\n }\r\n .field-group input:focus {\r\n border-color: var(--green);\r\n background: var(--white);\r\n }\r\n .field-group input::placeholder { color: #adb5bd; }\r\n\r\n .search-actions {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n }\r\n .hint {\r\n font-size: 12px;\r\n color: var(--muted);\r\n }\r\n .hint strong { color: var(--green); }\r\n\r\n .btn-search {\r\n background: var(--green);\r\n color: var(--white);\r\n border: none;\r\n padding: 13px 36px;\r\n border-radius: 8px;\r\n font-weight: 700;\r\n font-size: 15px;\r\n font-family: 'DM Sans', sans-serif;\r\n cursor: pointer;\r\n box-shadow: 0 4px 14px rgba(0,166,81,0.25);\r\n transition: all 0.2s;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .btn-search:hover { background: var(--green-dark); transform: translateY(-1px); }\r\n .btn-search:active { transform: translateY(0); }\r\n .btn-search.loading { opacity: 0.7; pointer-events: none; }\r\n\r\n \/* Result bars *\/\r\n .result-bar {\r\n background: #f0fdf4;\r\n border-left: 1px solid var(--border);\r\n border-right: 1px solid var(--border);\r\n border-top: 1px solid #bbf7d0;\r\n padding: 10px 24px;\r\n font-size: 13px;\r\n color: var(--green-dark);\r\n font-weight: 600;\r\n display: none;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .result-bar.show { display: flex; }\r\n\r\n .error-bar {\r\n background: #fef2f2;\r\n border-left: 1px solid var(--border);\r\n border-right: 1px solid var(--border);\r\n border-top: 1px solid #fecaca;\r\n padding: 10px 24px;\r\n font-size: 13px;\r\n color: var(--red);\r\n font-weight: 600;\r\n display: none;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .error-bar.show { display: flex; }\r\n\r\n \/* Map Canvas *\/\r\n #map {\r\n width: 100%;\r\n height: 580px;\r\n border-left: 1px solid var(--border);\r\n border-right: 1px solid var(--border);\r\n border-bottom: 1px solid var(--border);\r\n border-radius: 0 0 14px 14px;\r\n }\r\n\r\n \/* Suggestions Dropdown *\/\r\n .suggestions-wrap { position: relative; }\r\n .suggestions-list {\r\n position: absolute;\r\n top: 100%; left: 0; right: 0;\r\n background: var(--white);\r\n border: 2px solid var(--green);\r\n border-radius: 8px;\r\n z-index: 999;\r\n max-height: 200px;\r\n overflow-y: auto;\r\n box-shadow: 0 8px 24px rgba(0,0,0,0.12);\r\n display: none;\r\n }\r\n .suggestions-list.open { display: block; }\r\n .suggestion-item {\r\n padding: 10px 14px;\r\n font-size: 13px;\r\n cursor: pointer;\r\n border-bottom: 1px solid var(--border);\r\n transition: background 0.15s;\r\n }\r\n .suggestion-item:last-child { border-bottom: none; }\r\n .suggestion-item:hover { background: #f0fdf4; color: var(--green-dark); }\r\n .suggestion-item .place-name { font-weight: 600; }\r\n .suggestion-item .place-context { font-size: 11px; color: var(--muted); margin-top: 2px; }\r\n\r\n @media (max-width: 640px) {\r\n .finder-wrap { margin: 12px auto; padding: 0 10px; }\r\n .search-grid { grid-template-columns: 1fr 1fr; }\r\n #map { height: 400px; }\r\n .badge { display: none; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"finder-wrap\">\r\n <div class=\"finder-header\">\r\n <div class=\"brand\">\r\n <div class=\"pulse-dot\"><span><\/span><span><\/span><\/div>\r\n <span class=\"brand-name\">BSK Real Estate \u2014 Plot Finder<\/span>\r\n <\/div>\r\n <div class=\"badge\">\u26a1 System Live<\/div>\r\n <\/div>\r\n\r\n <div class=\"search-panel\">\r\n <div class=\"search-grid\">\r\n <div class=\"field-group\">\r\n <label>City *<\/label>\r\n <input type=\"text\" id=\"f-city\" placeholder=\"e.g. Islamabad\" autocomplete=\"off\">\r\n <\/div>\r\n <div class=\"field-group suggestions-wrap\">\r\n <label>Society \/ Area<\/label>\r\n <input type=\"text\" id=\"f-society\" placeholder=\"e.g. Faisal Town, DHA\" autocomplete=\"off\">\r\n <div class=\"suggestions-list\" id=\"society-suggestions\"><\/div>\r\n <\/div>\r\n <div class=\"field-group\">\r\n <label>Phase<\/label>\r\n <input type=\"text\" id=\"f-phase\" placeholder=\"e.g. Phase 1\">\r\n <\/div>\r\n <div class=\"field-group\">\r\n <label>Sector \/ Block<\/label>\r\n <input type=\"text\" id=\"f-sector\" placeholder=\"e.g. Block A\">\r\n <\/div>\r\n <div class=\"field-group\">\r\n <label>Street<\/label>\r\n <input type=\"text\" id=\"f-street\" placeholder=\"e.g. Street 12\">\r\n <\/div>\r\n <div class=\"field-group\">\r\n <label>House \/ Plot No.<\/label>\r\n <input type=\"text\" id=\"f-plot\" placeholder=\"e.g. Plot 120\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"search-actions\">\r\n <span class=\"hint\">* City is <strong>required<\/strong>. Enter correct fields for precise locking.<\/span>\r\n <button class=\"btn-search\" id=\"search-btn\" onclick=\"doSearch()\">\r\n \ud83d\udd0d Find on Map\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"result-bar\" id=\"result-bar\">\u2705 <span id=\"result-text\"><\/span><\/div>\r\n <div class=\"error-bar\" id=\"error-bar\">\u26a0\ufe0f <span id=\"error-text\"><\/span><\/div>\r\n\r\n <div id=\"map\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst TOKEN = 'pk.eyJ1Ijoibml6YW1td3QiLCJhIjoiY21uc3doZWd2MDVjZzJwc2hiZnphazY1MiJ9._-irZPW5lKVRQUupAN0bPw';\r\n\r\n\/\/ Standard Mapbox Streets style URL that never fails to load\r\nconst SAFE_STYLE = 'mapbox:\/\/styles\/mapbox\/streets-v12';\r\n\r\nmapboxgl.accessToken = TOKEN;\r\n\r\nconst map = new mapboxgl.Map({\r\n container: 'map',\r\n style: SAFE_STYLE,\r\n center: [73.0479, 33.6844], \/\/ Default Islamabad center\r\n zoom: 11,\r\n pitch: 0\r\n});\r\n\r\nmap.addControl(new mapboxgl.NavigationControl(), 'top-right');\r\nmap.addControl(new mapboxgl.FullscreenControl(), 'top-right');\r\n\r\nlet marker = null;\r\n\r\n\/\/ Autocomplete suggestions\r\nlet debounceTimer;\r\ndocument.getElementById('f-society').addEventListener('input', function() {\r\n clearTimeout(debounceTimer);\r\n const city = document.getElementById('f-city').value.trim();\r\n const q = this.value.trim();\r\n if (q.length < 2) { closeSuggestions(); return; }\r\n debounceTimer = setTimeout(() => fetchSuggestions(q, city), 300);\r\n});\r\n\r\nasync function fetchSuggestions(q, city) {\r\n const query = city ? `${q}, ${city}, Pakistan` : `${q}, Pakistan`;\r\n const url = `https:\/\/api.mapbox.com\/geocoding\/v5\/mapbox.places\/${encodeURIComponent(query)}.json?access_token=${TOKEN}&country=PK&types=neighborhood,locality,place,poi&limit=5`;\r\n try {\r\n const res = await fetch(url);\r\n const data = await res.json();\r\n showSuggestions(data.features || []);\r\n } catch(e) { closeSuggestions(); }\r\n}\r\n\r\nfunction showSuggestions(features) {\r\n const box = document.getElementById('society-suggestions');\r\n if (!features.length) { closeSuggestions(); return; }\r\n box.innerHTML = features.map(f => `\r\n <div class=\"suggestion-item\" onclick=\"pickSuggestion('${f.text.replace(\/'\/g,\"\\\\'\")}', ${f.center[0]}, ${f.center[1]})\">\r\n <div class=\"place-name\">${f.text}<\/div>\r\n <div class=\"place-context\">${f.place_name}<\/div>\r\n <\/div>`).join('');\r\n box.classList.add('open');\r\n}\r\n\r\nfunction closeSuggestions() {\r\n document.getElementById('society-suggestions').classList.remove('open');\r\n}\r\n\r\nfunction pickSuggestion(name, lng, lat) {\r\n document.getElementById('f-society').value = name;\r\n closeSuggestions();\r\n map.flyTo({ center: [lng, lat], zoom: 14, speed: 1.2 });\r\n}\r\n\r\ndocument.addEventListener('click', e => {\r\n if (!e.target.closest('.suggestions-wrap')) closeSuggestions();\r\n});\r\n\r\n\/\/ Search Trigger Function\r\nasync function doSearch() {\r\n showResult(false);\r\n showError(false);\r\n\r\n const city = document.getElementById('f-city').value.trim();\r\n const society = document.getElementById('f-society').value.trim();\r\n const phase = document.getElementById('f-phase').value.trim();\r\n const sector = document.getElementById('f-sector').value.trim();\r\n const street = document.getElementById('f-street').value.trim();\r\n const plot = document.getElementById('f-plot').value.trim();\r\n\r\n if (!city) {\r\n showError(true, 'Please enter City name (required).');\r\n document.getElementById('f-city').focus();\r\n return;\r\n }\r\n\r\n \/\/ Composing structural location parts\r\n const parts = [plot, street, sector, phase, society, city, 'Pakistan'].filter(Boolean);\r\n const query = parts.join(', ');\r\n\r\n const btn = document.getElementById('search-btn');\r\n btn.classList.add('loading');\r\n btn.textContent = '\u23f3 Searching...';\r\n\r\n try {\r\n let coords = await geocode(query);\r\n\r\n \/\/ Dynamic broader fallback check\r\n if (!coords && (plot || street || sector)) {\r\n const broaderParts = [sector, phase, society, city, 'Pakistan'].filter(Boolean);\r\n coords = await geocode(broaderParts.join(', '));\r\n }\r\n\r\n if (coords) {\r\n placeMarker(coords.center, coords.place_name, !!plot);\r\n showResult(true, coords.place_name);\r\n } else {\r\n showError(true, 'Location coordinates not found. Try reducing details.');\r\n }\r\n } catch(e) {\r\n showError(true, 'Network timeout. Please retry.');\r\n }\r\n\r\n btn.classList.remove('loading');\r\n btn.innerHTML = '\ud83d\udd0d Find on Map';\r\n}\r\n\r\nasync function geocode(query) {\r\n const url = `https:\/\/api.mapbox.com\/geocoding\/v5\/mapbox.places\/${encodeURIComponent(query)}.json?access_token=${TOKEN}&country=PK&limit=1`;\r\n const res = await fetch(url);\r\n const data = await res.json();\r\n if (data.features && data.features.length > 0) {\r\n return data.features[0];\r\n }\r\n return null;\r\n}\r\n\r\nfunction placeMarker(center, label, isSpecific) {\r\n if (marker) marker.remove();\r\n const zoom = isSpecific ? 17 : 14.5;\r\n \r\n map.flyTo({ center, zoom, speed: 1.4, curve: 1.1 });\r\n\r\n marker = new mapboxgl.Marker({ color: '#ef4444' })\r\n .setLngLat(center)\r\n .setPopup(new mapboxgl.Popup({ offset: 28 }).setHTML(`\r\n <div style=\"font-family:sans-serif;padding:4px;min-width:180px\">\r\n <div style=\"color:#00A651;font-weight:800;font-size:12px;margin-bottom:4px\">\ud83d\udccd Target Spotted<\/div>\r\n <div style=\"font-size:12px;color:#334155;line-height:1.5\">${label}<\/div>\r\n <\/div>`))\r\n .addTo(map)\r\n .togglePopup();\r\n}\r\n\r\nfunction showResult(show, text='') {\r\n const bar = document.getElementById('result-bar');\r\n document.getElementById('result-text').textContent = text;\r\n bar.classList.toggle('show', show);\r\n}\r\nfunction showError(show, text='') {\r\n const bar = document.getElementById('error-bar');\r\n document.getElementById('error-text').textContent = text;\r\n bar.classList.toggle('show', show);\r\n}\r\n\r\ndocument.querySelectorAll('input').forEach(el => {\r\n el.addEventListener('keypress', e => { if(e.key==='Enter') doSearch(); });\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>BSK Plot Finder BSK Real Estate \u2014 Plot Finder \u26a1 Mapbox Powered City * Society \/ Area Phase Sector \/ Block Street House \/ Plot No. * City is required. More details = more accurate location. \ud83d\udd0d Find on Map \u2705 \u26a0\ufe0f BSK Plot Finder BSK Real Estate \u2014 Plot Finder \u26a1 System Live City […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_theme","meta":{"content-type":"","footnotes":""},"class_list":["post-1035787","page","type-page","status-publish","hentry"],"blocksy_meta":[],"yoast_head":"\n<title>PLOT FINDER | bskgroups.com<\/title>\n<meta name=\"description\" content=\"Explore PLOT FINDER at BSK Groups. Trusted real estate services, verified property listings and professional property solutions in Pakistan.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bskgroups.com\/ur\/plot-finder\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"PLOT FINDER | bskgroups.com\" \/>\n<meta property=\"og:description\" content=\"Explore PLOT FINDER at BSK Groups. Trusted real estate services, verified property listings and professional property solutions in Pakistan.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bskgroups.com\/ur\/plot-finder\/\" \/>\n<meta property=\"og:site_name\" content=\"bskgroups.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/share\/1H3N31xKg9\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-07T16:56:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bskgroups.com\/wp-content\/uploads\/2026\/07\/aaa-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"10 \u0645\u0646\u0679\u0633\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/bskgroups.com\\\/plot-finder\\\/\",\"url\":\"https:\\\/\\\/bskgroups.com\\\/plot-finder\\\/\",\"name\":\"PLOT FINDER | bskgroups.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/bskgroups.com\\\/#website\"},\"datePublished\":\"2026-04-19T07:02:29+00:00\",\"dateModified\":\"2026-06-07T16:56:07+00:00\",\"description\":\"Explore PLOT FINDER at BSK Groups. Trusted real estate services, verified property listings and professional property solutions in Pakistan.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/bskgroups.com\\\/plot-finder\\\/#breadcrumb\"},\"inLanguage\":\"ur\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/bskgroups.com\\\/plot-finder\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/bskgroups.com\\\/plot-finder\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/bskgroups.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"PLOT FINDER\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/bskgroups.com\\\/#website\",\"url\":\"https:\\\/\\\/bskgroups.com\\\/\",\"name\":\"BSK groups\",\"description\":\"Bharosa Sab Ka\",\"publisher\":{\"@id\":\"https:\\\/\\\/bskgroups.com\\\/#organization\"},\"alternateName\":\"BSK\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/bskgroups.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ur\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/bskgroups.com\\\/#organization\",\"name\":\"BSK groups\",\"alternateName\":\"BSK group\",\"url\":\"https:\\\/\\\/bskgroups.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ur\",\"@id\":\"https:\\\/\\\/bskgroups.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/bskgroups.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/aaa-removebg-preview-1.png\",\"contentUrl\":\"https:\\\/\\\/bskgroups.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/aaa-removebg-preview-1.png\",\"width\":539,\"height\":372,\"caption\":\"BSK groups\"},\"image\":{\"@id\":\"https:\\\/\\\/bskgroups.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/share\\\/1H3N31xKg9\\\/\",\"https:\\\/\\\/youtube.com\\\/@bskmarketinggroup?si=Q1fs08pVc69tk2jX\",\"https:\\\/\\\/vt.tiktok.com\\\/ZSXMvNe8p\\\/\"]}]}<\/script>\n","yoast_head_json":{"title":"PLOT FINDER | bskgroups.com","description":"Explore PLOT FINDER at BSK Groups. Trusted real estate services, verified property listings and professional property solutions in Pakistan.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bskgroups.com\/ur\/plot-finder\/","og_locale":"en_US","og_type":"article","og_title":"PLOT FINDER | bskgroups.com","og_description":"Explore PLOT FINDER at BSK Groups. Trusted real estate services, verified property listings and professional property solutions in Pakistan.","og_url":"https:\/\/bskgroups.com\/ur\/plot-finder\/","og_site_name":"bskgroups.com","article_publisher":"https:\/\/www.facebook.com\/share\/1H3N31xKg9\/","article_modified_time":"2026-06-07T16:56:07+00:00","og_image":[{"width":600,"height":600,"url":"https:\/\/bskgroups.com\/wp-content\/uploads\/2026\/07\/aaa-1.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"10 \u0645\u0646\u0679\u0633"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/bskgroups.com\/plot-finder\/","url":"https:\/\/bskgroups.com\/plot-finder\/","name":"PLOT FINDER | bskgroups.com","isPartOf":{"@id":"https:\/\/bskgroups.com\/#website"},"datePublished":"2026-04-19T07:02:29+00:00","dateModified":"2026-06-07T16:56:07+00:00","description":"Explore PLOT FINDER at BSK Groups. Trusted real estate services, verified property listings and professional property solutions in Pakistan.","breadcrumb":{"@id":"https:\/\/bskgroups.com\/plot-finder\/#breadcrumb"},"inLanguage":"ur","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bskgroups.com\/plot-finder\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/bskgroups.com\/plot-finder\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bskgroups.com\/"},{"@type":"ListItem","position":2,"name":"PLOT FINDER"}]},{"@type":"WebSite","@id":"https:\/\/bskgroups.com\/#website","url":"https:\/\/bskgroups.com\/","name":"BSK groups","description":"Bharosa Sab Ka","publisher":{"@id":"https:\/\/bskgroups.com\/#organization"},"alternateName":"BSK","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bskgroups.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ur"},{"@type":"Organization","@id":"https:\/\/bskgroups.com\/#organization","name":"BSK groups","alternateName":"BSK group","url":"https:\/\/bskgroups.com\/","logo":{"@type":"ImageObject","inLanguage":"ur","@id":"https:\/\/bskgroups.com\/#\/schema\/logo\/image\/","url":"https:\/\/bskgroups.com\/wp-content\/uploads\/2025\/06\/aaa-removebg-preview-1.png","contentUrl":"https:\/\/bskgroups.com\/wp-content\/uploads\/2025\/06\/aaa-removebg-preview-1.png","width":539,"height":372,"caption":"BSK groups"},"image":{"@id":"https:\/\/bskgroups.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/share\/1H3N31xKg9\/","https:\/\/youtube.com\/@bskmarketinggroup?si=Q1fs08pVc69tk2jX","https:\/\/vt.tiktok.com\/ZSXMvNe8p\/"]}]}},"_links":{"self":[{"href":"https:\/\/bskgroups.com\/ur\/wp-json\/wp\/v2\/pages\/1035787","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bskgroups.com\/ur\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bskgroups.com\/ur\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bskgroups.com\/ur\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bskgroups.com\/ur\/wp-json\/wp\/v2\/comments?post=1035787"}],"version-history":[{"count":38,"href":"https:\/\/bskgroups.com\/ur\/wp-json\/wp\/v2\/pages\/1035787\/revisions"}],"predecessor-version":[{"id":1037194,"href":"https:\/\/bskgroups.com\/ur\/wp-json\/wp\/v2\/pages\/1035787\/revisions\/1037194"}],"wp:attachment":[{"href":"https:\/\/bskgroups.com\/ur\/wp-json\/wp\/v2\/media?parent=1035787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}