${project.description}

${project.images ? ` ` : ''} `; // Show panel panel.classList.add('active'); // Center map on project map.setView(project.location, 12); } // Close panel document.getElementById('closePanel').addEventListener('click', () => { document.getElementById('infoPanel').classList.remove('active'); }); // Filter projects by status document.querySelectorAll('.status-filter').forEach(button => { button.addEventListener('click', () => { // Update active button document.querySelectorAll('.status-filter').forEach(btn => { btn.classList.remove('active', 'bg-blue-600', 'text-white'); btn.classList.add('bg-gray-200'); }); button.classList.add('active', 'bg-blue-600', 'text-white'); button.classList.remove('bg-gray-200'); const status = button.getAttribute('data-status'); filterProjects(); }); }); // Filter projects by sector document.querySelectorAll('.sector-filter').forEach(button => { button.addEventListener('click', () => { // Update active button document.querySelectorAll('.sector-filter').forEach(btn => { btn.classList.remove('active', 'bg-blue-600', 'text-white'); btn.classList.add('bg-gray-200'); }); button.classList.add('active', 'bg-blue-600', 'text-white'); button.classList.remove('bg-gray-200'); const sector = button.getAttribute('data-sector'); filterProjects(); }); }); // Filter projects based on selected filters function filterProjects() { const activeStatus = document.querySelector('.status-filter.active').getAttribute('data-status'); const activeSector = document.querySelector('.sector-filter.active').getAttribute('data-sector'); projects.forEach(project => { const marker = markers[project.id]; // Check if project matches filters const statusMatch = activeStatus === 'all' || project.status === activeStatus; const sectorMatch = activeSector === 'all' || project.type === activeSector; if (statusMatch && sectorMatch) { if (!map.hasLayer(marker)) { marker.addTo(map); } } else { if (map.hasLayer(marker)) { map.removeLayer(marker); } } }); }