static/js/map.js

// Initialize map for index.html
function initializeMap(reports = []) {
    // Define bounds to lock the map to one world instance
    const bounds = L.latLngBounds(
        L.latLng(-85, -180), // Southwest corner
        L.latLng(85, 180)   // Northeast corner
    );

    // Initialize map with USA centered (~39°N, -100°W)
    const map = L.map('map', {
        maxBounds: bounds,
        maxBoundsViscosity: 1.0, // Prevents panning outside bounds
        worldCopyJump: false     // Disables jumping to world copies
    }).setView([39, -100], 2);   // Center on USA, zoom level 4

    // Add tile layer with noWrap to prevent tiling beyond -180/180
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        maxZoom: 18,
        minZoom: 2,        // Prevent zooming out too far
        noWrap: true       // Disable horizontal wrapping
    }).addTo(map);

    // Custom arrow icon
    const ArrowIcon = L.divIcon({
        className: 'arrow-icon',
        html: '<div style="transform: rotate({angle}deg); font-size: 30px;">⇧</div>',
        iconSize: [20, 20],
        iconAnchor: [10, 10]
    });

    // Add markers from reports
    reports.forEach(report => {
        const icon = L.divIcon({
            className: 'arrow-icon',
            html: `<div style="transform: rotate(${report.direction}deg); font-size: 30px;">⇧</div>`,
            iconSize: [20, 20],
            iconAnchor: [10, 10]
        });
        L.marker([report.latitude, report.longitude], { icon })
            .addTo(map)
            .bindPopup(`
                <b>Anomaly Report</b><br>
                Observer: ${report.observer_name || 'Anonymous'}<br>
                Description: ${report.description || 'No description'}<br>
                Timestamp: ${report.timestamp || 'N/A'}
            `);
    });
}

// Initialize map for add_report.html
function initializeAddReportMap() {
    // Define bounds to lock the map
    const bounds = L.latLngBounds(
        L.latLng(-85, -180),
        L.latLng(85, 180)
    );

    // Initialize map with USA centered
    const map = L.map('map', {
        maxBounds: bounds,
        maxBoundsViscosity: 1.0,
        worldCopyJump: false
    }).setView([39, -100], 2);

    // Add tile layer with noWrap
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        maxZoom: 18,
        minZoom: 2,
        noWrap: true
    }).addTo(map);

    let marker = null;
    let direction = 0;

    // Handle map click to place marker
    map.on('click', function(e) {
        if (marker) {
            map.removeLayer(marker);
        }
        const icon = L.divIcon({
            className: 'arrow-icon',
            html: `<div style="transform: rotate(${direction}deg); font-size: 30px;">⇧</div>`,
            iconSize: [20, 20],
            iconAnchor: [10, 10]
        });
        marker = L.marker(e.latlng, { icon }).addTo(map);
        document.getElementById('latitude').value = e.latlng.lat.toFixed(6);
        document.getElementById('longitude').value = e.latlng.lng.toFixed(6);
        document.getElementById('direction').value = direction;
    });

    // Handle direction input
    document.getElementById('direction').addEventListener('input', function(e) {
        direction = parseFloat(e.target.value) || 0;
        if (marker) {
            const icon = L.divIcon({
                className: 'arrow-icon',
                html: `<div style="transform: rotate(${direction}deg); font-size: 30px;">⇧</div>`,
                iconSize: [20, 20],
                iconAnchor: [10, 10]
            });
            map.removeLayer(marker);
            marker = L.marker([parseFloat(document.getElementById('latitude').value), parseFloat(document.getElementById('longitude').value)], { icon }).addTo(map);
            document.getElementById('direction').value = direction;
        }
    });

    // Handle form submission
    document.getElementById('report-form').addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        fetch('/add_report', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            alert(data.message);
            if (data.status === 'success') {
                window.location.href = '/';
            }
        })
        .catch(error => {
            alert('Error: ' + error.message);
        });
    });
}