World Weed Biocontrol Catalog

`; circle.bindPopup(popupHTML, { maxWidth: 240 }); markers[country] = circle; }); updateStats(releases); document.getElementById('bioMap-count').textContent = `${releases.length} release${releases.length !== 1 ? 's' : ''} \u00b7 ${Object.keys(byCountry).length} countries`; } // ============================================= // STATS BAR // ============================================= function updateStats(releases) { const t = { established: 0, 'not-established': 0, unknown: 0 }; releases.forEach(r => t[r.status]++); document.getElementById('stat-total').textContent = releases.length; document.getElementById('stat-est').textContent = t.established; document.getElementById('stat-not').textContent = t['not-established']; document.getElementById('stat-unk').textContent = t.unknown; } // ============================================= // DETAIL PANEL // ============================================= // Handle popup footer clicks via delegation (avoids apostrophe-in-onclick issues) document.addEventListener('click', function(e) { const footer = e.target.closest('.popup-footer[data-country]'); if (footer) window._bioMapShowPanel(footer.dataset.country); }); window._bioMapShowPanel = function(country) { const rels = getFiltered().filter(r => r.country === country); if (!rels.length) return; document.getElementById('bioMap-panelTitle').textContent = `${country} \u2014 ${rels.length} release${rels.length !== 1 ? 's' : ''}`; document.getElementById('bioMap-panelBody').innerHTML = rels.map(r => ` `).join(''); document.getElementById('bioMap-panel').classList.add('open'); document.getElementById('bioMap-panel').scrollIntoView({ behavior: 'smooth', block: 'nearest' }); map.closePopup(); }; document.getElementById('bioMap-panelClose').addEventListener('click', () => { document.getElementById('bioMap-panel').classList.remove('open'); }); // ============================================= // FILTERING // ============================================= function getFiltered() { const search = document.getElementById('bioMap-search').value.toLowerCase(); const region = document.getElementById('bioMap-filterRegion').value; const status = document.getElementById('bioMap-filterStatus').value; const year = document.getElementById('bioMap-filterYear').value; return allReleases.filter(r => { if (region && r.region !== region) return false; if (status && r.status !== status) return false; if (year && r.year !== year) return false; if (search) { const hay = (r.weed + ' ' + r.agent + ' ' + r.country).toLowerCase(); if (!hay.includes(search)) return false; } return true; }); } function applyFilters() { buildMarkers(getFiltered()); } ['bioMap-filterRegion','bioMap-filterStatus','bioMap-filterYear'].forEach(id => { document.getElementById(id).addEventListener('change', applyFilters); }); // ============================================= // AUTOCOMPLETE // ============================================= const searchInput = document.getElementById('bioMap-search'); const sugList = document.getElementById('bioMap-suggestions'); let activeIdx = -1; function buildSuggestions(query) { if (!query || query.length < 2) { hideSuggestions(); return; } const q = query.toLowerCase(); const weeds = new Set(); const agents = new Set(); allReleases.forEach(r => { if (r.weed && r.weed.toLowerCase().includes(q)) weeds.add(r.weed); if (r.agent && r.agent.toLowerCase().includes(q)) agents.add(r.agent); }); const items = [ ...[...weeds].slice(0,8).map(v => ({ label: v, type: 'weed' })), ...[...agents].slice(0,8).map(v => ({ label: v, type: 'agent' })), ].slice(0, 12); if (!items.length) { hideSuggestions(); return; } sugList.innerHTML = items.map((item, i) => { const escaped = query.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'); const highlighted = item.label.replace(new RegExp('(' + escaped + ')', 'gi'), '$1'); return `

${item.type === 'weed' ? 'Weed' : 'Agent'} ${highlighted}

`; }).join(''); sugList.style.display = 'block'; activeIdx = -1; sugList.querySelectorAll('li').forEach(li => { li.addEventListener('mousedown', e => { e.preventDefault(); selectSuggestion(li.dataset.val); }); }); } function selectSuggestion(val) { searchInput.value = val; hideSuggestions(); applyFilters(); } function hideSuggestions() { sugList.style.display = 'none'; sugList.innerHTML = ''; activeIdx = -1; } searchInput.addEventListener('input', () => { buildSuggestions(searchInput.value); applyFilters(); }); searchInput.addEventListener('keydown', e => { const items = sugList.querySelectorAll('li'); if (!items.length) return; if (e.key === 'ArrowDown') { e.preventDefault(); activeIdx = Math.min(activeIdx+1, items.length-1); } else if (e.key === 'ArrowUp') { e.preventDefault(); activeIdx = Math.max(activeIdx-1, 0); } else if (e.key === 'Enter' && activeIdx >= 0) { e.preventDefault(); selectSuggestion(items[activeIdx].dataset.val); return; } else if (e.key === 'Escape') { hideSuggestions(); return; } items.forEach((li, i) => li.classList.toggle('active', i === activeIdx)); if (activeIdx >= 0) items[activeIdx].scrollIntoView({ block: 'nearest' }); }); document.addEventListener('click', e => { if (!e.target.closest('#bioMap-searchWrap')) hideSuggestions(); }); // ============================================= // CLEAR BUTTONS // ============================================= const clearSearchBtn = document.getElementById('bioMap-clearSearch'); const clearAllBtn = document.getElementById('bioMap-clearAll'); function updateClearButtons() { const hasSearch = searchInput.value.trim().length > 0; const hasRegion = document.getElementById('bioMap-filterRegion').value !== ''; const hasStatus = document.getElementById('bioMap-filterStatus').value !== ''; const hasYear = document.getElementById('bioMap-filterYear').value !== ''; clearSearchBtn.style.display = hasSearch ? 'block' : 'none'; clearAllBtn.classList.toggle('visible', hasSearch || hasRegion || hasStatus || hasYear); } searchInput.addEventListener('input', updateClearButtons); ['bioMap-filterRegion','bioMap-filterStatus','bioMap-filterYear'].forEach(id => { document.getElementById(id).addEventListener('change', updateClearButtons); }); clearSearchBtn.addEventListener('click', () => { searchInput.value = ''; hideSuggestions(); applyFilters(); updateClearButtons(); searchInput.focus(); }); clearAllBtn.addEventListener('click', () => { searchInput.value = ''; document.getElementById('bioMap-filterRegion').value = ''; document.getElementById('bioMap-filterStatus').value = ''; document.getElementById('bioMap-filterYear').value = ''; hideSuggestions(); applyFilters(); updateClearButtons(); }); // ============================================= // POPULATE FILTER DROPDOWNS // ============================================= function populateFilters(releases) { const regions = [...new Set(releases.map(r => r.region).filter(Boolean))].sort(); const years = [...new Set(releases.map(r => r.year).filter(Boolean))].sort().reverse(); const rSel = document.getElementById('bioMap-filterRegion'); regions.forEach(v => rSel.insertAdjacentHTML('beforeend', `${v}`)); const ySel = document.getElementById('bioMap-filterYear'); years.forEach(v => ySel.insertAdjacentHTML('beforeend', `${v}`)); } // ============================================= // INIT - process pre-parsed data directly // ============================================= function loadData() { initMap(); allReleases = RAW_DATA .filter(r => r.country && COUNTRY_COORDS[r.country]) .map(r => ({ weed: r.weed, agent: r.agent, region: r.region, country: r.country, year: r.year, status: classifyStatus(r.estab), })); populateFilters(allReleases); buildMarkers(allReleases); document.getElementById('bioMap-loading').style.display = 'none'; } loadData(); })();