Direktori Lapangan Squash \u2014 SquashIndonesia<\/title>\r\n\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\"\r\n integrity=\"sha256-sA+e2k6wX1qQYJbT0nQY9qE3k1m9V+Uo7mXvYx0iR2M=\" crossorigin=\"\"\/>\r\n\r\n <style>\r\n :root{\r\n --primary:#8B0000;\r\n --muted:#6b7280;\r\n --bg:#f8fafc;\r\n --card:#ffffff;\r\n --glass: rgba(255,255,255,0.7);\r\n --max-width:1200px;\r\n }\r\n *{box-sizing:border-box}\r\n body{\r\n margin:0;\r\n font-family:Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial;\r\n background:linear-gradient(180deg, #fff 0%, var(--bg) 100%);\r\n color:#111827;\r\n -webkit-font-smoothing:antialiased;\r\n -moz-osx-font-smoothing:grayscale;\r\n }\r\n\r\n .container{max-width:var(--max-width); margin:28px auto; padding:0 18px;}\r\n\r\n \/* HERO *\/\r\n .hero{\r\n background: linear-gradient(90deg, rgba(139,0,0,0.05), rgba(255,255,255,0.85));\r\n border-radius:14px;\r\n padding:24px;\r\n display:flex;\r\n gap:18px;\r\n align-items:center;\r\n justify-content:space-between;\r\n box-shadow:0 6px 20px rgba(15,23,42,0.06);\r\n }\r\n .hero h1{margin:0; font-size:22px}\r\n .hero p{margin:6px 0 0; color:var(--muted); font-size:13px}\r\n\r\n \/* Filter bar *\/\r\n .filters{\r\n margin-top:16px;\r\n display:flex;\r\n gap:10px;\r\n flex-wrap:wrap;\r\n background:var(--glass);\r\n padding:10px;\r\n border-radius:12px;\r\n align-items:center;\r\n position:sticky;\r\n top:14px;\r\n z-index:40;\r\n box-shadow:0 4px 10px rgba(2,6,23,0.04);\r\n }\r\n .filters input[type=\"search\"], .filters select {\r\n padding:8px 10px;\r\n border-radius:8px;\r\n border:1px solid #e6e9ee;\r\n outline:none;\r\n font-size:14px;\r\n background:white;\r\n }\r\n .filters .btn{background:var(--primary); color:white; padding:9px 12px; border-radius:8px; border:none; cursor:pointer}\r\n .filters .muted-btn{background:white; border:1px solid #e6e9ee; color:var(--muted); padding:8px 10px; border-radius:8px; cursor:pointer}\r\n\r\n \/* grid *\/\r\n .layout{display:grid; grid-template-columns: 1fr 380px; gap:18px; margin-top:18px;}\r\n @media (max-width: 920px){ .layout{ grid-template-columns: 1fr; } .filters{ position: static; } }\r\n\r\n \/* cards *\/\r\n .cards{display:grid; grid-template-columns: repeat(2,1fr); gap:12px;}\r\n @media (max-width:720px){ .cards{ grid-template-columns:1fr } }\r\n .card{\r\n background:var(--card);\r\n padding:12px;\r\n border-radius:12px;\r\n box-shadow:0 6px 18px rgba(2,6,23,0.04);\r\n display:flex;\r\n gap:12px;\r\n align-items:flex-start;\r\n }\r\n .thumb{width:96px;height:72px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px}\r\n .card h3{margin:0;font-size:15px}\r\n .card .meta{color:var(--muted);font-size:12px;margin-top:6px}\r\n\r\n .card .actions{margin-top:10px;display:flex;gap:8px;align-items:center}\r\n .btn-sm{padding:7px 10px;border-radius:8px;border:1px solid #e6e9ee;background:white;cursor:pointer;font-size:13px}\r\n .btn-sm.primary{background:var(--primary); border:none;color:white}\r\n\r\n \/* map *\/\r\n #map { height:480px; border-radius:12px; overflow:hidden; box-shadow:0 6px 18px rgba(2,6,23,0.06); }\r\n\r\n \/* sidebar *\/\r\n .sidebar{background:var(--card); padding:12px;border-radius:12px;box-shadow:0 6px 18px rgba(2,6,23,0.04)}\r\n .sidebar h4{margin:0 0 8px 0}\r\n .list-communities{display:flex;flex-direction:column;gap:8px;margin-top:8px}\r\n .community {display:flex;justify-content:space-between;align-items:center;padding:8px;border-radius:8px;border:1px solid #f1f5f9}\r\n\r\n \/* CTA *\/\r\n .cta{margin-top:16px;padding:12px;border-radius:10px;background:linear-gradient(90deg, rgba(139,0,0,0.06), #fff);text-align:center}\r\n\r\n \/* modal *\/\r\n .modal-back{ position:fixed; inset:0; background:rgba(2,6,23,0.4); display:flex; align-items:center; justify-content:center; z-index:80; padding:18px; }\r\n .modal{ background:white; width:100%; max-width:880px; border-radius:12px; padding:18px; box-shadow:0 20px 50px rgba(2,6,23,0.4) }\r\n .modal-grid{ display:grid; grid-template-columns: 220px 1fr; gap:14px; align-items:start }\r\n @media (max-width:720px){ .modal-grid{ grid-template-columns: 1fr } }\r\n\r\n .badge{display:inline-block;padding:6px 8px;border-radius:999px;font-size:12px;background:#f8fafc;border:1px solid #eef2f7;color:var(--muted)}\r\n\r\n \/* small helpers *\/\r\n .muted{color:var(--muted);font-size:13px}\r\n a.link{color:var(--primary); text-decoration:none;font-weight:600}\r\n .fav{cursor:pointer;padding:6px;border-radius:8px}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"container\">\r\n <div class=\"hero\" role=\"banner\" aria-label=\"Hero\">\r\n <div>\r\n <h1>Temukan Lapangan Squash di Seluruh Indonesia<\/h1>\r\n <p>Jelajahi lokasi, komunitas, dan fasilitas squash yang tersebar di 22 provinsi.<\/p>\r\n <div style=\"margin-top:10px\">\r\n <button class=\"btn\" id=\"toFilters\">Cari Lapangan Sekarang<\/button>\r\n <button class=\"muted-btn\" id=\"toggleMapBtn\" title=\"Toggle Peta\">Lihat di Peta<\/button>\r\n <\/div>\r\n <\/div>\r\n <div style=\"text-align:right\">\r\n <div class=\"muted\">Statistik<\/div>\r\n <div style=\"margin-top:8px; font-weight:600\">Provinsi: <span id=\"stat-prov\">22<\/span><\/div>\r\n <div style=\"margin-top:4px; font-weight:600\">Lapangan: <span id=\"stat-courts\">--<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"filters\" id=\"filterBar\" role=\"search\">\r\n <input type=\"search\" id=\"searchInput\" placeholder=\"Cari nama lapangan, alamat, atau kota\" aria-label=\"Cari\">\r\n <select id=\"provSelect\" aria-label=\"Pilih Provinsi\">\r\n <option value=\"\">Semua Provinsi<\/option>\r\n <\/select>\r\n <select id=\"citySelect\" aria-label=\"Pilih Kota\">\r\n <option value=\"\">Semua Kota\/Kabupaten<\/option>\r\n <\/select>\r\n <select id=\"commSelect\" aria-label=\"Pilih Komunitas\">\r\n <option value=\"\">Semua Komunitas<\/option>\r\n <\/select>\r\n\r\n <button class=\"muted-btn\" id=\"resetBtn\">Reset<\/button>\r\n <div style=\"margin-left:auto; display:flex; gap:8px; align-items:center\">\r\n <button class=\"muted-btn\" id=\"detectLoc\">Detect Lokasi<\/button>\r\n <button class=\"muted-btn\" id=\"bookmarkCount\" title=\"Bookmarks\">Bookmarks: 0<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"layout\">\r\n \r\n <div>\r\n <div style=\"margin-top:8px; color:var(--muted); font-size:13px\">Menampilkan <strong id=\"resultCount\">0<\/strong> hasil<\/div>\r\n\r\n <div class=\"cards\" id=\"cardsContainer\" aria-live=\"polite\" style=\"margin-top:12px\"><\/div>\r\n\r\n <div class=\"cta\">\r\n <div style=\"font-weight:600\">Punya Lapangan atau Komunitas?<\/div>\r\n <div class=\"muted\" style=\"margin-top:6px\">Daftarkan lapanganmu agar mudah ditemukan oleh pemain dan komunitas.<\/div>\r\n <div style=\"margin-top:10px\"><button class=\"btn\">Daftarkan Lapangan Baru<\/button><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <div id=\"mapWrapper\">\r\n <div id=\"map\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"sidebar\" style=\"margin-top:12px\">\r\n <h4>Komunitas yang ditemukan<\/h4>\r\n <div class=\"list-communities\" id=\"communityList\"><\/div>\r\n <div style=\"margin-top:12px\" class=\"muted\">Bookmark disimpan di browser.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div id=\"modalRoot\" aria-live=\"polite\"><\/div>\r\n\r\n \r\n <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"\r\n integrity=\"sha256-m6Q5sV0v6r9j9z0sV3rY2x9k6bDq6Vb6fWkQ0k3Y3m8=\" crossorigin=\"\"><\/script>\r\n\r\n <script>\r\n \/*********************************************************************\r\n * Sample DATA (mock)\r\n * Replace this array with API data when ready. Each item:\r\n * { id, name, province, city, address, courts_count, communities:[], hours, phone, lat, lng }\r\n *********************************************************************\/\r\n const DATA = (function generateMock() {\r\n const PROVINCES = [\r\n \"Aceh\",\"Bali\",\"Banten\",\"Bengkulu\",\"DI Yogyakarta\",\"DKI Jakarta\",\r\n \"Gorontalo\",\"Jambi\",\"Jawa Barat\",\"Jawa Tengah\",\"Jawa Timur\",\r\n \"Kalimantan Barat\",\"Kalimantan Selatan\",\"Kalimantan Tengah\",\"Kalimantan Timur\",\r\n \"Lampung\",\"Maluku\",\"NTB\",\"NTT\",\"Papua\",\"Riau\",\"Sumatera Utara\"\r\n ];\r\n let id=1; const arr=[];\r\n PROVINCES.forEach((prov, idx) => {\r\n const n = 1 + ((idx+2)%3);\r\n for(let i=0;i<n;i++){\r\n arr.push({\r\n id: id++,\r\n name: `${prov} Squash Center ${i+1}`,\r\n province: prov,\r\n city: `${prov} City ${i+1}`,\r\n address: `Jl. Merdeka No.${100+i}, ${prov}`,\r\n courts_count: 1 + (i%3),\r\n communities: (i%2===0) ? [\"Komunitas A\", \"Komunitas B\"] : [],\r\n hours: \"Senin - Minggu: 07:00 - 21:00\",\r\n phone: `+62 8${Math.floor(10000000 + Math.random()*89999999)}`,\r\n lat: -2 + Math.random()*6 + idx*0.03,\r\n lng: 117 + Math.random()*6 + idx*0.03\r\n });\r\n }\r\n });\r\n return arr;\r\n })();\r\n\r\n \/*********************\r\n * App state & helpers\r\n *********************\/\r\n const state = {\r\n query: '',\r\n province: '',\r\n city: '',\r\n community: '',\r\n showMap: true,\r\n selected: null,\r\n favorites: JSON.parse(localStorage.getItem('squash_favs') || '[]'),\r\n };\r\n\r\n \/\/ DOM refs\r\n const provSelect = document.getElementById('provSelect');\r\n const citySelect = document.getElementById('citySelect');\r\n const commSelect = document.getElementById('commSelect');\r\n const searchInput = document.getElementById('searchInput');\r\n const cardsContainer = document.getElementById('cardsContainer');\r\n const resultCount = document.getElementById('resultCount');\r\n const bookmarkCount = document.getElementById('bookmarkCount');\r\n const communityList = document.getElementById('communityList');\r\n const mapEl = document.getElementById('map');\r\n const modalRoot = document.getElementById('modalRoot');\r\n const statCourts = document.getElementById('stat-courts');\r\n\r\n \/\/ populate stats\r\n document.getElementById('stat-courts').textContent = DATA.length;\r\n\r\n \/****************\r\n * Build selects\r\n ****************\/\r\n const provinces = Array.from(new Set(DATA.map(d=>d.province))).sort();\r\n provinces.forEach(p => {\r\n const opt = document.createElement('option'); opt.value=p; opt.textContent=p; provSelect.appendChild(opt);\r\n });\r\n\r\n function updateCityOptions() {\r\n citySelect.innerHTML = '<option value=\"\">Semua Kota\/Kabupaten<\/option>';\r\n const cities = new Set(DATA.filter(d => state.province ? d.province === state.province : true).map(d => d.city));\r\n Array.from(cities).sort().forEach(c => {\r\n const opt = document.createElement('option'); opt.value=c; opt.textContent=c; citySelect.appendChild(opt);\r\n });\r\n }\r\n\r\n function updateCommunityOptions() {\r\n commSelect.innerHTML = '<option value=\"\">Semua Komunitas<\/option>';\r\n const comms = new Set();\r\n DATA.filter(d => state.province ? d.province === state.province : true).forEach(d => d.communities.forEach(c => comms.add(c)));\r\n Array.from(comms).sort().forEach(c => {\r\n const opt = document.createElement('option'); opt.value=c; opt.textContent=c; commSelect.appendChild(opt);\r\n });\r\n }\r\n\r\n updateCityOptions();\r\n updateCommunityOptions();\r\n\r\n \/****************\r\n * Map init\r\n ****************\/\r\n const map = L.map(mapEl, { scrollWheelZoom: false }).setView([-2.5, 117], 5);\r\n L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\r\n attribution: '© OpenStreetMap contributors'\r\n }).addTo(map);\r\n\r\n let markersLayer = L.layerGroup().addTo(map);\r\n\r\n \/****************\r\n * Rendering\r\n ****************\/\r\n function filteredData() {\r\n const q = state.query.trim().toLowerCase();\r\n return DATA.filter(d => {\r\n if (state.province && d.province !== state.province) return false;\r\n if (state.city && d.city !== state.city) return false;\r\n if (state.community && !d.communities.includes(state.community)) return false;\r\n if (q) {\r\n return d.name.toLowerCase().includes(q) ||\r\n d.address.toLowerCase().includes(q) ||\r\n d.city.toLowerCase().includes(q) ||\r\n d.province.toLowerCase().includes(q);\r\n }\r\n return true;\r\n });\r\n }\r\n\r\n function renderCards() {\r\n const list = filteredData();\r\n cardsContainer.innerHTML = '';\r\n resultCount.textContent = list.length;\r\n bookmarkCount.textContent = `Bookmarks: ${state.favorites.length}`;\r\n\r\n list.forEach(d => {\r\n const el = document.createElement('div'); el.className='card';\r\n el.innerHTML = `\r\n <div class=\"thumb\">Foto<\/div>\r\n <div style=\"flex:1\">\r\n <h3>${escapeHtml(d.name)}<\/h3>\r\n <div class=\"meta\">${escapeHtml(d.city)} \u2014 ${escapeHtml(d.province)}<\/div>\r\n <div class=\"meta\" style=\"margin-top:8px\">${escapeHtml(d.address)}<\/div>\r\n <div class=\"actions\">\r\n <button class=\"btn-sm primary\" data-action=\"detail\" data-id=\"${d.id}\">Detail Lapangan<\/button>\r\n <a class=\"link\" href=\"https:\/\/www.google.com\/maps\/search\/?api=1&query=${encodeURIComponent(d.address)}\" target=\"_blank\" rel=\"noreferrer\">Buka di Maps<\/a>\r\n <button class=\"btn-sm\" data-action=\"fav\" data-id=\"${d.id}\">${state.favorites.includes(d.id) ? 'Unbookmark' : 'Bookmark'}<\/button>\r\n <\/div>\r\n ${d.communities.length ? `<div class=\"meta\" style=\"margin-top:8px\">Komunitas: ${d.communities.join(', ')}<\/div>` : ''}\r\n <\/div>\r\n `;\r\n cardsContainer.appendChild(el);\r\n });\r\n\r\n \/\/ attach listeners\r\n cardsContainer.querySelectorAll('[data-action=\"detail\"]').forEach(btn => {\r\n btn.addEventListener('click', e => {\r\n const id = Number(btn.dataset.id); showDetail(id);\r\n });\r\n });\r\n cardsContainer.querySelectorAll('[data-action=\"fav\"]').forEach(btn => {\r\n btn.addEventListener('click', e => {\r\n const id = Number(btn.dataset.id); toggleFav(id); renderCards(); renderMap();\r\n });\r\n });\r\n }\r\n\r\n function renderMap() {\r\n markersLayer.clearLayers();\r\n const list = filteredData();\r\n list.forEach(d => {\r\n if (typeof d.lat === 'number' && typeof d.lng === 'number') {\r\n const m = L.marker([d.lat, d.lng]).addTo(markersLayer);\r\n const popup = `<strong>${escapeHtml(d.name)}<\/strong><br\/><small>${escapeHtml(d.city)} \u2014 ${escapeHtml(d.province)}<\/small><br\/><a target=\"_blank\" href=\"https:\/\/www.google.com\/maps\/search\/?api=1&query=${encodeURIComponent(d.address)}\">Buka di Maps<\/a>`;\r\n m.bindPopup(popup);\r\n }\r\n });\r\n \/\/ adjust bounds if there are markers\r\n const all = markersLayer.getLayers();\r\n if(all.length){\r\n const group = L.featureGroup(all);\r\n map.fitBounds(group.getBounds().pad(0.15));\r\n }\r\n }\r\n\r\n function renderCommunities() {\r\n communityList.innerHTML = '';\r\n const comms = new Set();\r\n filteredData().forEach(d => d.communities.forEach(c => comms.add(c)));\r\n if(comms.size === 0){\r\n communityList.innerHTML = `<div class=\"muted\" style=\"font-size:13px\">Tidak ada komunitas terdaftar.<\/div>`;\r\n return;\r\n }\r\n Array.from(comms).sort().forEach(c => {\r\n const row = document.createElement('div'); row.className='community';\r\n row.innerHTML = `<span>${escapeHtml(c)}<\/span><button class=\"btn-sm\" data-comm=\"${escapeHtml(c)}\">Pilih<\/button>`;\r\n communityList.appendChild(row);\r\n row.querySelector('button').addEventListener('click', ()=> {\r\n state.community = c; commSelect.value = c; updateAndRender();\r\n });\r\n });\r\n }\r\n\r\n function showDetail(id) {\r\n const d = DATA.find(x => x.id === id);\r\n if(!d) return;\r\n state.selected = d;\r\n const html = `\r\n <div class=\"modal-back\" role=\"dialog\" aria-modal=\"true\">\r\n <div class=\"modal\">\r\n <div style=\"display:flex;justify-content:space-between;align-items:center\">\r\n <h3 style=\"margin:0\">${escapeHtml(d.name)}<\/h3>\r\n <div><button id=\"closeModal\" class=\"btn-sm\">Tutup<\/button><\/div>\r\n <\/div>\r\n <div style=\"margin-top:12px\" class=\"modal-grid\">\r\n <div style=\"background:#f1f5f9;border-radius:10px;padding:12px\">\r\n <div style=\"height:140px;display:flex;align-items:center;justify-content:center;color:var(--muted)\">Galeri Foto<\/div>\r\n <div style=\"margin-top:8px\"><span class=\"badge\">Jam: ${escapeHtml(d.hours)}<\/span><\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"muted\">${escapeHtml(d.city)} \u2014 ${escapeHtml(d.province)}<\/div>\r\n <div style=\"margin-top:8px\">${escapeHtml(d.address)}<\/div>\r\n <div style=\"margin-top:8px\">Kontak: <strong>${escapeHtml(d.phone)}<\/strong><\/div>\r\n <div style=\"margin-top:12px\">\r\n <div style=\"font-weight:600\">Fasilitas<\/div>\r\n <ul style=\"margin:6px 0 0 18px\" class=\"muted\">\r\n <li>Ruang Ganti<\/li><li>Parkir<\/li><li>Alat Sewa<\/li>\r\n <\/ul>\r\n <\/div>\r\n ${d.communities.length ? `<div style=\"margin-top:12px\"><strong>Komunitas:<\/strong> ${d.communities.join(', ')}<\/div>` : ''}\r\n <div style=\"margin-top:14px; display:flex; gap:8px;\">\r\n <a class=\"btn-sm primary\" href=\"https:\/\/www.google.com\/maps\/search\/?api=1&query=${encodeURIComponent(d.address)}\" target=\"_blank\">Buka di Maps<\/a>\r\n <button id=\"toggleModalFav\" class=\"btn-sm\">${state.favorites.includes(d.id) ? 'Unbookmark' : 'Bookmark'}<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n modalRoot.innerHTML = html;\r\n document.getElementById('closeModal').addEventListener('click', closeModal);\r\n document.getElementById('toggleModalFav').addEventListener('click', ()=>{\r\n toggleFav(d.id);\r\n closeModal();\r\n renderCards();\r\n renderMap();\r\n });\r\n }\r\n\r\n function closeModal(){\r\n state.selected = null;\r\n modalRoot.innerHTML = '';\r\n }\r\n\r\n function escapeHtml(s){\r\n return String(s).replaceAll('&','&').replaceAll('<','<').replaceAll('>','>');\r\n }\r\n\r\n function toggleFav(id){\r\n const idx = state.favorites.indexOf(id);\r\n if(idx === -1) state.favorites.push(id);\r\n else state.favorites.splice(idx,1);\r\n localStorage.setItem('squash_favs', JSON.stringify(state.favorites));\r\n bookmarkCount.textContent = `Bookmarks: ${state.favorites.length}`;\r\n }\r\n\r\n \/****************\r\n * Interactions\r\n ****************\/\r\n function updateAndRender() {\r\n updateCityOptions();\r\n updateCommunityOptions();\r\n renderCards();\r\n renderMap();\r\n renderCommunities();\r\n }\r\n\r\n searchInput.addEventListener('input', e => { state.query = e.target.value; updateAndRender(); });\r\n provSelect.addEventListener('change', e => { state.province = e.target.value; state.city=''; citySelect.value=''; updateAndRender(); });\r\n citySelect.addEventListener('change', e => { state.city = e.target.value; updateAndRender(); });\r\n commSelect.addEventListener('change', e => { state.community = e.target.value; updateAndRender(); });\r\n\r\n document.getElementById('resetBtn').addEventListener('click', ()=> {\r\n state.query=''; state.province=''; state.city=''; state.community='';\r\n searchInput.value=''; provSelect.value=''; citySelect.value=''; commSelect.value='';\r\n updateAndRender();\r\n });\r\n\r\n document.getElementById('toggleMapBtn').addEventListener('click', ()=> {\r\n state.showMap = !state.showMap;\r\n mapEl.parentElement.style.display = state.showMap ? 'block' : 'none';\r\n document.getElementById('toggleMapBtn').textContent = state.showMap ? 'Sembunyikan Peta' : 'Lihat di Peta';\r\n });\r\n\r\n document.getElementById('toFilters').addEventListener('click', ()=> {\r\n document.getElementById('filterBar').scrollIntoView({behavior:'smooth'});\r\n });\r\n\r\n document.getElementById('detectLoc').addEventListener('click', ()=> {\r\n if(!navigator.geolocation) return alert('Geolocation tidak didukung pada browser ini.');\r\n navigator.geolocation.getCurrentPosition(pos => {\r\n const {latitude, longitude} = pos.coords;\r\n alert(`Lokasimu: ${latitude.toFixed(4)}, ${longitude.toFixed(4)}`);\r\n map.setView([latitude, longitude], 12);\r\n }, ()=> alert('Gagal mendeteksi lokasi.'));\r\n });\r\n\r\n \/\/ bookmark button (sidebar)\r\n bookmarkCount.addEventListener('click', ()=> {\r\n if(state.favorites.length===0) return alert('Belum ada bookmark.');\r\n const list = state.favorites.map(id => {\r\n const p = DATA.find(d=>d.id===id);\r\n return p ? `${p.name} \u2014 ${p.province}` : id;\r\n }).join('\\\\n');\r\n alert('Bookmarks:\\\\n' + list);\r\n });\r\n\r\n \/****************\r\n * Init\r\n ****************\/\r\n \/\/ initial visibility: show map\r\n mapEl.parentElement.style.display = 'block';\r\n updateAndRender();\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Direktori Lapangan Squash \u2014 SquashIndonesia Temukan Lapangan Squash di Seluruh Indonesia Jelajahi lokasi, komunitas, dan fasilitas squash yang tersebar di 22 provinsi. Cari Lapangan Sekarang Lihat di Peta Statistik Provinsi:… <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-313","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Squash Court Location - PB Squash Indonesia<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/squashindonesia.id\/home\/court\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Squash Court Location - PB Squash Indonesia\" \/>\n<meta property=\"og:description\" content=\"Direktori Lapangan Squash \u2014 SquashIndonesia Temukan Lapangan Squash di Seluruh Indonesia Jelajahi lokasi, komunitas, dan fasilitas squash yang tersebar di 22 provinsi. Cari Lapangan Sekarang Lihat di Peta Statistik Provinsi:…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/squashindonesia.id\/home\/court\/\" \/>\n<meta property=\"og:site_name\" content=\"PB Squash Indonesia\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-12T08:15:58+00:00\" \/>\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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/court\\\/\",\"url\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/court\\\/\",\"name\":\"Squash Court Location - PB Squash Indonesia\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/#website\"},\"datePublished\":\"2025-11-12T07:58:57+00:00\",\"dateModified\":\"2025-11-12T08:15:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/court\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/squashindonesia.id\\\/home\\\/court\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/court\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Squash Court Location\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/#website\",\"url\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/\",\"name\":\"PB Squash Indonesia\",\"description\":\"Informasi Event dan Organisasi\",\"publisher\":{\"@id\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/#organization\",\"name\":\"PB Squash Indonesia\",\"url\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/wp-content\\\/uploads\\\/2024\\\/03\\\/Logo-Squash-Indonesia.png\",\"contentUrl\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/wp-content\\\/uploads\\\/2024\\\/03\\\/Logo-Squash-Indonesia.png\",\"width\":324,\"height\":124,\"caption\":\"PB Squash Indonesia\"},\"image\":{\"@id\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Squash Court Location - PB Squash Indonesia","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:\/\/squashindonesia.id\/home\/court\/","og_locale":"en_US","og_type":"article","og_title":"Squash Court Location - PB Squash Indonesia","og_description":"Direktori Lapangan Squash \u2014 SquashIndonesia Temukan Lapangan Squash di Seluruh Indonesia Jelajahi lokasi, komunitas, dan fasilitas squash yang tersebar di 22 provinsi. Cari Lapangan Sekarang Lihat di Peta Statistik Provinsi:…","og_url":"https:\/\/squashindonesia.id\/home\/court\/","og_site_name":"PB Squash Indonesia","article_modified_time":"2025-11-12T08:15:58+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/squashindonesia.id\/home\/court\/","url":"https:\/\/squashindonesia.id\/home\/court\/","name":"Squash Court Location - PB Squash Indonesia","isPartOf":{"@id":"https:\/\/squashindonesia.id\/home\/#website"},"datePublished":"2025-11-12T07:58:57+00:00","dateModified":"2025-11-12T08:15:58+00:00","breadcrumb":{"@id":"https:\/\/squashindonesia.id\/home\/court\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/squashindonesia.id\/home\/court\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/squashindonesia.id\/home\/court\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/squashindonesia.id\/home\/"},{"@type":"ListItem","position":2,"name":"Squash Court Location"}]},{"@type":"WebSite","@id":"https:\/\/squashindonesia.id\/home\/#website","url":"https:\/\/squashindonesia.id\/home\/","name":"PB Squash Indonesia","description":"Informasi Event dan Organisasi","publisher":{"@id":"https:\/\/squashindonesia.id\/home\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/squashindonesia.id\/home\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/squashindonesia.id\/home\/#organization","name":"PB Squash Indonesia","url":"https:\/\/squashindonesia.id\/home\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/squashindonesia.id\/home\/#\/schema\/logo\/image\/","url":"https:\/\/squashindonesia.id\/home\/wp-content\/uploads\/2024\/03\/Logo-Squash-Indonesia.png","contentUrl":"https:\/\/squashindonesia.id\/home\/wp-content\/uploads\/2024\/03\/Logo-Squash-Indonesia.png","width":324,"height":124,"caption":"PB Squash Indonesia"},"image":{"@id":"https:\/\/squashindonesia.id\/home\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/squashindonesia.id\/home\/wp-json\/wp\/v2\/pages\/313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/squashindonesia.id\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/squashindonesia.id\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/squashindonesia.id\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/squashindonesia.id\/home\/wp-json\/wp\/v2\/comments?post=313"}],"version-history":[{"count":4,"href":"https:\/\/squashindonesia.id\/home\/wp-json\/wp\/v2\/pages\/313\/revisions"}],"predecessor-version":[{"id":318,"href":"https:\/\/squashindonesia.id\/home\/wp-json\/wp\/v2\/pages\/313\/revisions\/318"}],"wp:attachment":[{"href":"https:\/\/squashindonesia.id\/home\/wp-json\/wp\/v2\/media?parent=313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Direktori Lapangan Squash \u2014 SquashIndonesia<\/title>\r\n\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\"\r\n integrity=\"sha256-sA+e2k6wX1qQYJbT0nQY9qE3k1m9V+Uo7mXvYx0iR2M=\" crossorigin=\"\"\/>\r\n\r\n <style>\r\n :root{\r\n --primary:#8B0000;\r\n --muted:#6b7280;\r\n --bg:#f8fafc;\r\n --card:#ffffff;\r\n --glass: rgba(255,255,255,0.7);\r\n --max-width:1200px;\r\n }\r\n *{box-sizing:border-box}\r\n body{\r\n margin:0;\r\n font-family:Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial;\r\n background:linear-gradient(180deg, #fff 0%, var(--bg) 100%);\r\n color:#111827;\r\n -webkit-font-smoothing:antialiased;\r\n -moz-osx-font-smoothing:grayscale;\r\n }\r\n\r\n .container{max-width:var(--max-width); margin:28px auto; padding:0 18px;}\r\n\r\n \/* HERO *\/\r\n .hero{\r\n background: linear-gradient(90deg, rgba(139,0,0,0.05), rgba(255,255,255,0.85));\r\n border-radius:14px;\r\n padding:24px;\r\n display:flex;\r\n gap:18px;\r\n align-items:center;\r\n justify-content:space-between;\r\n box-shadow:0 6px 20px rgba(15,23,42,0.06);\r\n }\r\n .hero h1{margin:0; font-size:22px}\r\n .hero p{margin:6px 0 0; color:var(--muted); font-size:13px}\r\n\r\n \/* Filter bar *\/\r\n .filters{\r\n margin-top:16px;\r\n display:flex;\r\n gap:10px;\r\n flex-wrap:wrap;\r\n background:var(--glass);\r\n padding:10px;\r\n border-radius:12px;\r\n align-items:center;\r\n position:sticky;\r\n top:14px;\r\n z-index:40;\r\n box-shadow:0 4px 10px rgba(2,6,23,0.04);\r\n }\r\n .filters input[type=\"search\"], .filters select {\r\n padding:8px 10px;\r\n border-radius:8px;\r\n border:1px solid #e6e9ee;\r\n outline:none;\r\n font-size:14px;\r\n background:white;\r\n }\r\n .filters .btn{background:var(--primary); color:white; padding:9px 12px; border-radius:8px; border:none; cursor:pointer}\r\n .filters .muted-btn{background:white; border:1px solid #e6e9ee; color:var(--muted); padding:8px 10px; border-radius:8px; cursor:pointer}\r\n\r\n \/* grid *\/\r\n .layout{display:grid; grid-template-columns: 1fr 380px; gap:18px; margin-top:18px;}\r\n @media (max-width: 920px){ .layout{ grid-template-columns: 1fr; } .filters{ position: static; } }\r\n\r\n \/* cards *\/\r\n .cards{display:grid; grid-template-columns: repeat(2,1fr); gap:12px;}\r\n @media (max-width:720px){ .cards{ grid-template-columns:1fr } }\r\n .card{\r\n background:var(--card);\r\n padding:12px;\r\n border-radius:12px;\r\n box-shadow:0 6px 18px rgba(2,6,23,0.04);\r\n display:flex;\r\n gap:12px;\r\n align-items:flex-start;\r\n }\r\n .thumb{width:96px;height:72px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px}\r\n .card h3{margin:0;font-size:15px}\r\n .card .meta{color:var(--muted);font-size:12px;margin-top:6px}\r\n\r\n .card .actions{margin-top:10px;display:flex;gap:8px;align-items:center}\r\n .btn-sm{padding:7px 10px;border-radius:8px;border:1px solid #e6e9ee;background:white;cursor:pointer;font-size:13px}\r\n .btn-sm.primary{background:var(--primary); border:none;color:white}\r\n\r\n \/* map *\/\r\n #map { height:480px; border-radius:12px; overflow:hidden; box-shadow:0 6px 18px rgba(2,6,23,0.06); }\r\n\r\n \/* sidebar *\/\r\n .sidebar{background:var(--card); padding:12px;border-radius:12px;box-shadow:0 6px 18px rgba(2,6,23,0.04)}\r\n .sidebar h4{margin:0 0 8px 0}\r\n .list-communities{display:flex;flex-direction:column;gap:8px;margin-top:8px}\r\n .community {display:flex;justify-content:space-between;align-items:center;padding:8px;border-radius:8px;border:1px solid #f1f5f9}\r\n\r\n \/* CTA *\/\r\n .cta{margin-top:16px;padding:12px;border-radius:10px;background:linear-gradient(90deg, rgba(139,0,0,0.06), #fff);text-align:center}\r\n\r\n \/* modal *\/\r\n .modal-back{ position:fixed; inset:0; background:rgba(2,6,23,0.4); display:flex; align-items:center; justify-content:center; z-index:80; padding:18px; }\r\n .modal{ background:white; width:100%; max-width:880px; border-radius:12px; padding:18px; box-shadow:0 20px 50px rgba(2,6,23,0.4) }\r\n .modal-grid{ display:grid; grid-template-columns: 220px 1fr; gap:14px; align-items:start }\r\n @media (max-width:720px){ .modal-grid{ grid-template-columns: 1fr } }\r\n\r\n .badge{display:inline-block;padding:6px 8px;border-radius:999px;font-size:12px;background:#f8fafc;border:1px solid #eef2f7;color:var(--muted)}\r\n\r\n \/* small helpers *\/\r\n .muted{color:var(--muted);font-size:13px}\r\n a.link{color:var(--primary); text-decoration:none;font-weight:600}\r\n .fav{cursor:pointer;padding:6px;border-radius:8px}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"container\">\r\n <div class=\"hero\" role=\"banner\" aria-label=\"Hero\">\r\n <div>\r\n <h1>Temukan Lapangan Squash di Seluruh Indonesia<\/h1>\r\n <p>Jelajahi lokasi, komunitas, dan fasilitas squash yang tersebar di 22 provinsi.<\/p>\r\n <div style=\"margin-top:10px\">\r\n <button class=\"btn\" id=\"toFilters\">Cari Lapangan Sekarang<\/button>\r\n <button class=\"muted-btn\" id=\"toggleMapBtn\" title=\"Toggle Peta\">Lihat di Peta<\/button>\r\n <\/div>\r\n <\/div>\r\n <div style=\"text-align:right\">\r\n <div class=\"muted\">Statistik<\/div>\r\n <div style=\"margin-top:8px; font-weight:600\">Provinsi: <span id=\"stat-prov\">22<\/span><\/div>\r\n <div style=\"margin-top:4px; font-weight:600\">Lapangan: <span id=\"stat-courts\">--<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"filters\" id=\"filterBar\" role=\"search\">\r\n <input type=\"search\" id=\"searchInput\" placeholder=\"Cari nama lapangan, alamat, atau kota\" aria-label=\"Cari\">\r\n <select id=\"provSelect\" aria-label=\"Pilih Provinsi\">\r\n <option value=\"\">Semua Provinsi<\/option>\r\n <\/select>\r\n <select id=\"citySelect\" aria-label=\"Pilih Kota\">\r\n <option value=\"\">Semua Kota\/Kabupaten<\/option>\r\n <\/select>\r\n <select id=\"commSelect\" aria-label=\"Pilih Komunitas\">\r\n <option value=\"\">Semua Komunitas<\/option>\r\n <\/select>\r\n\r\n <button class=\"muted-btn\" id=\"resetBtn\">Reset<\/button>\r\n <div style=\"margin-left:auto; display:flex; gap:8px; align-items:center\">\r\n <button class=\"muted-btn\" id=\"detectLoc\">Detect Lokasi<\/button>\r\n <button class=\"muted-btn\" id=\"bookmarkCount\" title=\"Bookmarks\">Bookmarks: 0<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"layout\">\r\n \r\n <div>\r\n <div style=\"margin-top:8px; color:var(--muted); font-size:13px\">Menampilkan <strong id=\"resultCount\">0<\/strong> hasil<\/div>\r\n\r\n <div class=\"cards\" id=\"cardsContainer\" aria-live=\"polite\" style=\"margin-top:12px\"><\/div>\r\n\r\n <div class=\"cta\">\r\n <div style=\"font-weight:600\">Punya Lapangan atau Komunitas?<\/div>\r\n <div class=\"muted\" style=\"margin-top:6px\">Daftarkan lapanganmu agar mudah ditemukan oleh pemain dan komunitas.<\/div>\r\n <div style=\"margin-top:10px\"><button class=\"btn\">Daftarkan Lapangan Baru<\/button><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <div id=\"mapWrapper\">\r\n <div id=\"map\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"sidebar\" style=\"margin-top:12px\">\r\n <h4>Komunitas yang ditemukan<\/h4>\r\n <div class=\"list-communities\" id=\"communityList\"><\/div>\r\n <div style=\"margin-top:12px\" class=\"muted\">Bookmark disimpan di browser.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div id=\"modalRoot\" aria-live=\"polite\"><\/div>\r\n\r\n \r\n <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"\r\n integrity=\"sha256-m6Q5sV0v6r9j9z0sV3rY2x9k6bDq6Vb6fWkQ0k3Y3m8=\" crossorigin=\"\"><\/script>\r\n\r\n <script>\r\n \/*********************************************************************\r\n * Sample DATA (mock)\r\n * Replace this array with API data when ready. Each item:\r\n * { id, name, province, city, address, courts_count, communities:[], hours, phone, lat, lng }\r\n *********************************************************************\/\r\n const DATA = (function generateMock() {\r\n const PROVINCES = [\r\n \"Aceh\",\"Bali\",\"Banten\",\"Bengkulu\",\"DI Yogyakarta\",\"DKI Jakarta\",\r\n \"Gorontalo\",\"Jambi\",\"Jawa Barat\",\"Jawa Tengah\",\"Jawa Timur\",\r\n \"Kalimantan Barat\",\"Kalimantan Selatan\",\"Kalimantan Tengah\",\"Kalimantan Timur\",\r\n \"Lampung\",\"Maluku\",\"NTB\",\"NTT\",\"Papua\",\"Riau\",\"Sumatera Utara\"\r\n ];\r\n let id=1; const arr=[];\r\n PROVINCES.forEach((prov, idx) => {\r\n const n = 1 + ((idx+2)%3);\r\n for(let i=0;i<n;i++){\r\n arr.push({\r\n id: id++,\r\n name: `${prov} Squash Center ${i+1}`,\r\n province: prov,\r\n city: `${prov} City ${i+1}`,\r\n address: `Jl. Merdeka No.${100+i}, ${prov}`,\r\n courts_count: 1 + (i%3),\r\n communities: (i%2===0) ? [\"Komunitas A\", \"Komunitas B\"] : [],\r\n hours: \"Senin - Minggu: 07:00 - 21:00\",\r\n phone: `+62 8${Math.floor(10000000 + Math.random()*89999999)}`,\r\n lat: -2 + Math.random()*6 + idx*0.03,\r\n lng: 117 + Math.random()*6 + idx*0.03\r\n });\r\n }\r\n });\r\n return arr;\r\n })();\r\n\r\n \/*********************\r\n * App state & helpers\r\n *********************\/\r\n const state = {\r\n query: '',\r\n province: '',\r\n city: '',\r\n community: '',\r\n showMap: true,\r\n selected: null,\r\n favorites: JSON.parse(localStorage.getItem('squash_favs') || '[]'),\r\n };\r\n\r\n \/\/ DOM refs\r\n const provSelect = document.getElementById('provSelect');\r\n const citySelect = document.getElementById('citySelect');\r\n const commSelect = document.getElementById('commSelect');\r\n const searchInput = document.getElementById('searchInput');\r\n const cardsContainer = document.getElementById('cardsContainer');\r\n const resultCount = document.getElementById('resultCount');\r\n const bookmarkCount = document.getElementById('bookmarkCount');\r\n const communityList = document.getElementById('communityList');\r\n const mapEl = document.getElementById('map');\r\n const modalRoot = document.getElementById('modalRoot');\r\n const statCourts = document.getElementById('stat-courts');\r\n\r\n \/\/ populate stats\r\n document.getElementById('stat-courts').textContent = DATA.length;\r\n\r\n \/****************\r\n * Build selects\r\n ****************\/\r\n const provinces = Array.from(new Set(DATA.map(d=>d.province))).sort();\r\n provinces.forEach(p => {\r\n const opt = document.createElement('option'); opt.value=p; opt.textContent=p; provSelect.appendChild(opt);\r\n });\r\n\r\n function updateCityOptions() {\r\n citySelect.innerHTML = '<option value=\"\">Semua Kota\/Kabupaten<\/option>';\r\n const cities = new Set(DATA.filter(d => state.province ? d.province === state.province : true).map(d => d.city));\r\n Array.from(cities).sort().forEach(c => {\r\n const opt = document.createElement('option'); opt.value=c; opt.textContent=c; citySelect.appendChild(opt);\r\n });\r\n }\r\n\r\n function updateCommunityOptions() {\r\n commSelect.innerHTML = '<option value=\"\">Semua Komunitas<\/option>';\r\n const comms = new Set();\r\n DATA.filter(d => state.province ? d.province === state.province : true).forEach(d => d.communities.forEach(c => comms.add(c)));\r\n Array.from(comms).sort().forEach(c => {\r\n const opt = document.createElement('option'); opt.value=c; opt.textContent=c; commSelect.appendChild(opt);\r\n });\r\n }\r\n\r\n updateCityOptions();\r\n updateCommunityOptions();\r\n\r\n \/****************\r\n * Map init\r\n ****************\/\r\n const map = L.map(mapEl, { scrollWheelZoom: false }).setView([-2.5, 117], 5);\r\n L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\r\n attribution: '© OpenStreetMap contributors'\r\n }).addTo(map);\r\n\r\n let markersLayer = L.layerGroup().addTo(map);\r\n\r\n \/****************\r\n * Rendering\r\n ****************\/\r\n function filteredData() {\r\n const q = state.query.trim().toLowerCase();\r\n return DATA.filter(d => {\r\n if (state.province && d.province !== state.province) return false;\r\n if (state.city && d.city !== state.city) return false;\r\n if (state.community && !d.communities.includes(state.community)) return false;\r\n if (q) {\r\n return d.name.toLowerCase().includes(q) ||\r\n d.address.toLowerCase().includes(q) ||\r\n d.city.toLowerCase().includes(q) ||\r\n d.province.toLowerCase().includes(q);\r\n }\r\n return true;\r\n });\r\n }\r\n\r\n function renderCards() {\r\n const list = filteredData();\r\n cardsContainer.innerHTML = '';\r\n resultCount.textContent = list.length;\r\n bookmarkCount.textContent = `Bookmarks: ${state.favorites.length}`;\r\n\r\n list.forEach(d => {\r\n const el = document.createElement('div'); el.className='card';\r\n el.innerHTML = `\r\n <div class=\"thumb\">Foto<\/div>\r\n <div style=\"flex:1\">\r\n <h3>${escapeHtml(d.name)}<\/h3>\r\n <div class=\"meta\">${escapeHtml(d.city)} \u2014 ${escapeHtml(d.province)}<\/div>\r\n <div class=\"meta\" style=\"margin-top:8px\">${escapeHtml(d.address)}<\/div>\r\n <div class=\"actions\">\r\n <button class=\"btn-sm primary\" data-action=\"detail\" data-id=\"${d.id}\">Detail Lapangan<\/button>\r\n <a class=\"link\" href=\"https:\/\/www.google.com\/maps\/search\/?api=1&query=${encodeURIComponent(d.address)}\" target=\"_blank\" rel=\"noreferrer\">Buka di Maps<\/a>\r\n <button class=\"btn-sm\" data-action=\"fav\" data-id=\"${d.id}\">${state.favorites.includes(d.id) ? 'Unbookmark' : 'Bookmark'}<\/button>\r\n <\/div>\r\n ${d.communities.length ? `<div class=\"meta\" style=\"margin-top:8px\">Komunitas: ${d.communities.join(', ')}<\/div>` : ''}\r\n <\/div>\r\n `;\r\n cardsContainer.appendChild(el);\r\n });\r\n\r\n \/\/ attach listeners\r\n cardsContainer.querySelectorAll('[data-action=\"detail\"]').forEach(btn => {\r\n btn.addEventListener('click', e => {\r\n const id = Number(btn.dataset.id); showDetail(id);\r\n });\r\n });\r\n cardsContainer.querySelectorAll('[data-action=\"fav\"]').forEach(btn => {\r\n btn.addEventListener('click', e => {\r\n const id = Number(btn.dataset.id); toggleFav(id); renderCards(); renderMap();\r\n });\r\n });\r\n }\r\n\r\n function renderMap() {\r\n markersLayer.clearLayers();\r\n const list = filteredData();\r\n list.forEach(d => {\r\n if (typeof d.lat === 'number' && typeof d.lng === 'number') {\r\n const m = L.marker([d.lat, d.lng]).addTo(markersLayer);\r\n const popup = `<strong>${escapeHtml(d.name)}<\/strong><br\/><small>${escapeHtml(d.city)} \u2014 ${escapeHtml(d.province)}<\/small><br\/><a target=\"_blank\" href=\"https:\/\/www.google.com\/maps\/search\/?api=1&query=${encodeURIComponent(d.address)}\">Buka di Maps<\/a>`;\r\n m.bindPopup(popup);\r\n }\r\n });\r\n \/\/ adjust bounds if there are markers\r\n const all = markersLayer.getLayers();\r\n if(all.length){\r\n const group = L.featureGroup(all);\r\n map.fitBounds(group.getBounds().pad(0.15));\r\n }\r\n }\r\n\r\n function renderCommunities() {\r\n communityList.innerHTML = '';\r\n const comms = new Set();\r\n filteredData().forEach(d => d.communities.forEach(c => comms.add(c)));\r\n if(comms.size === 0){\r\n communityList.innerHTML = `<div class=\"muted\" style=\"font-size:13px\">Tidak ada komunitas terdaftar.<\/div>`;\r\n return;\r\n }\r\n Array.from(comms).sort().forEach(c => {\r\n const row = document.createElement('div'); row.className='community';\r\n row.innerHTML = `<span>${escapeHtml(c)}<\/span><button class=\"btn-sm\" data-comm=\"${escapeHtml(c)}\">Pilih<\/button>`;\r\n communityList.appendChild(row);\r\n row.querySelector('button').addEventListener('click', ()=> {\r\n state.community = c; commSelect.value = c; updateAndRender();\r\n });\r\n });\r\n }\r\n\r\n function showDetail(id) {\r\n const d = DATA.find(x => x.id === id);\r\n if(!d) return;\r\n state.selected = d;\r\n const html = `\r\n <div class=\"modal-back\" role=\"dialog\" aria-modal=\"true\">\r\n <div class=\"modal\">\r\n <div style=\"display:flex;justify-content:space-between;align-items:center\">\r\n <h3 style=\"margin:0\">${escapeHtml(d.name)}<\/h3>\r\n <div><button id=\"closeModal\" class=\"btn-sm\">Tutup<\/button><\/div>\r\n <\/div>\r\n <div style=\"margin-top:12px\" class=\"modal-grid\">\r\n <div style=\"background:#f1f5f9;border-radius:10px;padding:12px\">\r\n <div style=\"height:140px;display:flex;align-items:center;justify-content:center;color:var(--muted)\">Galeri Foto<\/div>\r\n <div style=\"margin-top:8px\"><span class=\"badge\">Jam: ${escapeHtml(d.hours)}<\/span><\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"muted\">${escapeHtml(d.city)} \u2014 ${escapeHtml(d.province)}<\/div>\r\n <div style=\"margin-top:8px\">${escapeHtml(d.address)}<\/div>\r\n <div style=\"margin-top:8px\">Kontak: <strong>${escapeHtml(d.phone)}<\/strong><\/div>\r\n <div style=\"margin-top:12px\">\r\n <div style=\"font-weight:600\">Fasilitas<\/div>\r\n <ul style=\"margin:6px 0 0 18px\" class=\"muted\">\r\n <li>Ruang Ganti<\/li><li>Parkir<\/li><li>Alat Sewa<\/li>\r\n <\/ul>\r\n <\/div>\r\n ${d.communities.length ? `<div style=\"margin-top:12px\"><strong>Komunitas:<\/strong> ${d.communities.join(', ')}<\/div>` : ''}\r\n <div style=\"margin-top:14px; display:flex; gap:8px;\">\r\n <a class=\"btn-sm primary\" href=\"https:\/\/www.google.com\/maps\/search\/?api=1&query=${encodeURIComponent(d.address)}\" target=\"_blank\">Buka di Maps<\/a>\r\n <button id=\"toggleModalFav\" class=\"btn-sm\">${state.favorites.includes(d.id) ? 'Unbookmark' : 'Bookmark'}<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n modalRoot.innerHTML = html;\r\n document.getElementById('closeModal').addEventListener('click', closeModal);\r\n document.getElementById('toggleModalFav').addEventListener('click', ()=>{\r\n toggleFav(d.id);\r\n closeModal();\r\n renderCards();\r\n renderMap();\r\n });\r\n }\r\n\r\n function closeModal(){\r\n state.selected = null;\r\n modalRoot.innerHTML = '';\r\n }\r\n\r\n function escapeHtml(s){\r\n return String(s).replaceAll('&','&').replaceAll('<','<').replaceAll('>','>');\r\n }\r\n\r\n function toggleFav(id){\r\n const idx = state.favorites.indexOf(id);\r\n if(idx === -1) state.favorites.push(id);\r\n else state.favorites.splice(idx,1);\r\n localStorage.setItem('squash_favs', JSON.stringify(state.favorites));\r\n bookmarkCount.textContent = `Bookmarks: ${state.favorites.length}`;\r\n }\r\n\r\n \/****************\r\n * Interactions\r\n ****************\/\r\n function updateAndRender() {\r\n updateCityOptions();\r\n updateCommunityOptions();\r\n renderCards();\r\n renderMap();\r\n renderCommunities();\r\n }\r\n\r\n searchInput.addEventListener('input', e => { state.query = e.target.value; updateAndRender(); });\r\n provSelect.addEventListener('change', e => { state.province = e.target.value; state.city=''; citySelect.value=''; updateAndRender(); });\r\n citySelect.addEventListener('change', e => { state.city = e.target.value; updateAndRender(); });\r\n commSelect.addEventListener('change', e => { state.community = e.target.value; updateAndRender(); });\r\n\r\n document.getElementById('resetBtn').addEventListener('click', ()=> {\r\n state.query=''; state.province=''; state.city=''; state.community='';\r\n searchInput.value=''; provSelect.value=''; citySelect.value=''; commSelect.value='';\r\n updateAndRender();\r\n });\r\n\r\n document.getElementById('toggleMapBtn').addEventListener('click', ()=> {\r\n state.showMap = !state.showMap;\r\n mapEl.parentElement.style.display = state.showMap ? 'block' : 'none';\r\n document.getElementById('toggleMapBtn').textContent = state.showMap ? 'Sembunyikan Peta' : 'Lihat di Peta';\r\n });\r\n\r\n document.getElementById('toFilters').addEventListener('click', ()=> {\r\n document.getElementById('filterBar').scrollIntoView({behavior:'smooth'});\r\n });\r\n\r\n document.getElementById('detectLoc').addEventListener('click', ()=> {\r\n if(!navigator.geolocation) return alert('Geolocation tidak didukung pada browser ini.');\r\n navigator.geolocation.getCurrentPosition(pos => {\r\n const {latitude, longitude} = pos.coords;\r\n alert(`Lokasimu: ${latitude.toFixed(4)}, ${longitude.toFixed(4)}`);\r\n map.setView([latitude, longitude], 12);\r\n }, ()=> alert('Gagal mendeteksi lokasi.'));\r\n });\r\n\r\n \/\/ bookmark button (sidebar)\r\n bookmarkCount.addEventListener('click', ()=> {\r\n if(state.favorites.length===0) return alert('Belum ada bookmark.');\r\n const list = state.favorites.map(id => {\r\n const p = DATA.find(d=>d.id===id);\r\n return p ? `${p.name} \u2014 ${p.province}` : id;\r\n }).join('\\\\n');\r\n alert('Bookmarks:\\\\n' + list);\r\n });\r\n\r\n \/****************\r\n * Init\r\n ****************\/\r\n \/\/ initial visibility: show map\r\n mapEl.parentElement.style.display = 'block';\r\n updateAndRender();\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Direktori Lapangan Squash \u2014 SquashIndonesia Temukan Lapangan Squash di Seluruh Indonesia Jelajahi lokasi, komunitas, dan fasilitas squash yang tersebar di 22 provinsi. Cari Lapangan Sekarang Lihat di Peta Statistik Provinsi:… <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-313","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Squash Court Location - PB Squash Indonesia<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/squashindonesia.id\/home\/court\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Squash Court Location - PB Squash Indonesia\" \/>\n<meta property=\"og:description\" content=\"Direktori Lapangan Squash \u2014 SquashIndonesia Temukan Lapangan Squash di Seluruh Indonesia Jelajahi lokasi, komunitas, dan fasilitas squash yang tersebar di 22 provinsi. Cari Lapangan Sekarang Lihat di Peta Statistik Provinsi:…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/squashindonesia.id\/home\/court\/\" \/>\n<meta property=\"og:site_name\" content=\"PB Squash Indonesia\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-12T08:15:58+00:00\" \/>\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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/court\\\/\",\"url\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/court\\\/\",\"name\":\"Squash Court Location - PB Squash Indonesia\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/#website\"},\"datePublished\":\"2025-11-12T07:58:57+00:00\",\"dateModified\":\"2025-11-12T08:15:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/court\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/squashindonesia.id\\\/home\\\/court\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/court\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Squash Court Location\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/#website\",\"url\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/\",\"name\":\"PB Squash Indonesia\",\"description\":\"Informasi Event dan Organisasi\",\"publisher\":{\"@id\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/#organization\",\"name\":\"PB Squash Indonesia\",\"url\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/wp-content\\\/uploads\\\/2024\\\/03\\\/Logo-Squash-Indonesia.png\",\"contentUrl\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/wp-content\\\/uploads\\\/2024\\\/03\\\/Logo-Squash-Indonesia.png\",\"width\":324,\"height\":124,\"caption\":\"PB Squash Indonesia\"},\"image\":{\"@id\":\"https:\\\/\\\/squashindonesia.id\\\/home\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Squash Court Location - PB Squash Indonesia","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:\/\/squashindonesia.id\/home\/court\/","og_locale":"en_US","og_type":"article","og_title":"Squash Court Location - PB Squash Indonesia","og_description":"Direktori Lapangan Squash \u2014 SquashIndonesia Temukan Lapangan Squash di Seluruh Indonesia Jelajahi lokasi, komunitas, dan fasilitas squash yang tersebar di 22 provinsi. Cari Lapangan Sekarang Lihat di Peta Statistik Provinsi:…","og_url":"https:\/\/squashindonesia.id\/home\/court\/","og_site_name":"PB Squash Indonesia","article_modified_time":"2025-11-12T08:15:58+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/squashindonesia.id\/home\/court\/","url":"https:\/\/squashindonesia.id\/home\/court\/","name":"Squash Court Location - PB Squash Indonesia","isPartOf":{"@id":"https:\/\/squashindonesia.id\/home\/#website"},"datePublished":"2025-11-12T07:58:57+00:00","dateModified":"2025-11-12T08:15:58+00:00","breadcrumb":{"@id":"https:\/\/squashindonesia.id\/home\/court\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/squashindonesia.id\/home\/court\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/squashindonesia.id\/home\/court\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/squashindonesia.id\/home\/"},{"@type":"ListItem","position":2,"name":"Squash Court Location"}]},{"@type":"WebSite","@id":"https:\/\/squashindonesia.id\/home\/#website","url":"https:\/\/squashindonesia.id\/home\/","name":"PB Squash Indonesia","description":"Informasi Event dan Organisasi","publisher":{"@id":"https:\/\/squashindonesia.id\/home\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/squashindonesia.id\/home\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/squashindonesia.id\/home\/#organization","name":"PB Squash Indonesia","url":"https:\/\/squashindonesia.id\/home\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/squashindonesia.id\/home\/#\/schema\/logo\/image\/","url":"https:\/\/squashindonesia.id\/home\/wp-content\/uploads\/2024\/03\/Logo-Squash-Indonesia.png","contentUrl":"https:\/\/squashindonesia.id\/home\/wp-content\/uploads\/2024\/03\/Logo-Squash-Indonesia.png","width":324,"height":124,"caption":"PB Squash Indonesia"},"image":{"@id":"https:\/\/squashindonesia.id\/home\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/squashindonesia.id\/home\/wp-json\/wp\/v2\/pages\/313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/squashindonesia.id\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/squashindonesia.id\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/squashindonesia.id\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/squashindonesia.id\/home\/wp-json\/wp\/v2\/comments?post=313"}],"version-history":[{"count":4,"href":"https:\/\/squashindonesia.id\/home\/wp-json\/wp\/v2\/pages\/313\/revisions"}],"predecessor-version":[{"id":318,"href":"https:\/\/squashindonesia.id\/home\/wp-json\/wp\/v2\/pages\/313\/revisions\/318"}],"wp:attachment":[{"href":"https:\/\/squashindonesia.id\/home\/wp-json\/wp\/v2\/media?parent=313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}