{% extends "base.html" %}
{% block content %}
<div class="container mt-4">
    <h3>Snapshot Export</h3>
    <div id="map" style="height: 600px;"></div>
    <button class="btn btn-primary mt-3" onclick="downloadSnapshot()">Download PNG</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/leaflet-image"></script>
<script>
    const map = L.map('map').setView([0.1, 37.0], 7);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

    function downloadSnapshot() {
        leafletImage(map, function(err, canvas) {
            const link = document.createElement('a');
            link.href = canvas.toDataURL();
            link.download = 'map_snapshot.png';
            link.click();
        });
    }
</script>
{% endblock %}