//Init map
console.log("init map");
map = new maplibregl.Map({
    container: 'map',
    style: window.MAP_STYLE_LIGHT,
    center: [4.3572, 50.8477],
    zoom: 11,
    minzoom: 0,
    maxzoom: 24
});

// Ajout des marqueurs pour les projets
projects.forEach(project => {
    const popupContent = `
        <div>
            <a href="${project.link}">${project.name}</a>
            <p>${project.description}</p>
        </div>
    `;

    // Create the marker
    const marker = new maplibregl.Marker({ className: 'pointer'})
    .setLngLat(project.coordinates)  // Use the coordinates from the Django view
    .setPopup(new maplibregl.Popup().setHTML(popupContent))
    .addTo(map);
});


// Gestion de l'affichage de la carte
const openMapButton = document.getElementById('openMap');
const closeMapButton = document.getElementById('closeMap');
const mapContainer = document.getElementById('map');

openMapButton.addEventListener('click', () => {
    mapContainer.classList.add('visible'); // Rend la carte visible
    closeMapButton.style.display = 'block';
    openMapButton.style.display = 'none';
});

closeMapButton.addEventListener('click', () => {
    mapContainer.classList.remove('visible'); // Cache la carte
    closeMapButton.style.display = 'none';
    openMapButton.style.display = 'block';
});