function fishmap_shortcode() {
ob_start(); ?>

Submit Catch

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />

<script>
document.addEventListener('DOMContentLoaded', () => {
    const map = L.map('fishmap').setView([40, -95], 4); // Default to US view
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

    let marker;
    map.on('click', function(e) {
        if (marker) map.removeLayer(marker);
        marker = L.marker(e.latlng).addTo(map);
        document.getElementById('lat').value = e.latlng.lat;
        document.getElementById('lng').value = e.latlng.lng;
    });

    // Load existing catches
    fetch('<?php echo admin_url('admin-ajax.php'); ?>?action=get_fish_catches')
        .then(res => res.json())
        .then(data => {
            data.forEach(c => {
                L.marker([c.lat, c.lng]).addTo(map)
                    .bindPopup(`<strong>${c.species}</strong><br>${c.size}`);
            });
        });

    // Submit form via AJAX
    document.getElementById('catch-form').addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        fetch('<?php echo admin_url('admin-ajax.php'); ?>?action=submit_catch', {
            method: 'POST',
            body: formData
        })
        .then(res => res.text())
        .then(msg => document.getElementById('form-msg').innerText = msg);
    });
});
</script>
<?php
return ob_get_clean();

}
add_shortcode(‘fishmap’, ‘fishmap_shortcode’);