// Shared chrome for Leaflet-based pages: base tile layer and the mobile
// hamburger/controls-drawer behavior used by both the editing map viewer
// and read-only reports.

function initBaseMap(elementId, view, zoom) {
    const map = L.map(elementId).setView(view || [28.7, -81.7], 12);

    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors',
        maxNativeZoom: 19,
        maxZoom: 20,
        className: 'base-tiles'
    }).addTo(map);

    if (zoom) map.setZoom(zoom);
    return map;
}

// Wires up the hamburger button / slide-out controls panel / overlay used
// on mobile. Expects #hamburgerButton, #controls, #overlay in the page.
function initMobileControls() {
    const hamburgerButton = document.getElementById('hamburgerButton');
    const controls = document.getElementById('controls');
    const overlay = document.getElementById('overlay');
    if (!hamburgerButton || !controls || !overlay) return;

    function toggleControls() {
        controls.classList.toggle('open');
        hamburgerButton.classList.toggle('active');
        overlay.classList.toggle('active');
    }

    function closeControls() {
        controls.classList.remove('open');
        hamburgerButton.classList.remove('active');
        overlay.classList.remove('active');
    }

    window.closeMobileControls = closeControls;
    hamburgerButton.addEventListener('click', toggleControls);
    overlay.addEventListener('click', closeControls);
}